/* Page frame: container, announcement line, header, footer and the page intro. Mobile first; 820px is
   the one breakpoint between the phone and desktop layouts. The header sits on the canvas itself,
   with hairline rules instead of coloured bars. */

@layer layout {
  .container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  main.container { flex: 1; padding-block: var(--space-4) 0; }

  /* Announcement line */
  .announcement-bar {
    border-bottom: 1px solid var(--bp-line);
    color: var(--bp-ink-2);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
  }

  .announcement-bar__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding-block: var(--space-2);
    text-align: center;
  }

  .announcement-bar .icon { display: none; color: var(--bp-brand-600); }
  .announcement-bar__more { display: none; }

  @media (max-width: 819.98px) {
    .announcement-bar { font-size: 10.5px; letter-spacing: .07em; }
  }

  @media (min-width: 820px) {
    .announcement-bar .icon { display: inline-block; }
    .announcement-bar__more { display: inline; }
  }

  /* Header */
  .site-header { position: relative; }

  .site-header__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3) var(--space-1);
    padding-block: var(--space-4) var(--space-3);
  }

  /* The wordmark: a painted enso, then "Art-Online" in the display serif. */
  .brand {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    color: var(--bp-heading);
    text-decoration: none;
  }

  /* The client logo, in two versions on transparent: red brush and grey lettering for light walls,
     white lettering on a red banner for dark ones. The page carries both; the theme shows one, the
     same way the colour tokens switch (the attribute, or the device setting before one is chosen). */
  .brand__logo,
  .site-footer__logo,
  .welcome__logo { width: auto; }

  .logo--dark { display: none; }
  :root[data-theme="dark"] .logo--light { display: none; }
  :root[data-theme="dark"] .logo--dark { display: block; }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme]) .logo--light { display: none; }
    :root:not([data-theme]) .logo--dark { display: block; }
  }

  .brand__logo { height: 44px; }

  .site-search {
    position: relative;
    order: 3;
    flex: 1 1 100%;
  }

  .site-search__icon {
    position: absolute;
    inset-inline-start: 2px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 22px;
    color: var(--bp-ink-2);
    pointer-events: none;
  }

  /* Underline only, like a line ruled on the wall. */
  .site-search__input {
    width: 100%;
    height: 44px;
    padding: 0 4px 0 34px;
    border: 0;
    border-bottom: 1px solid var(--bp-line-strong);
    border-radius: 0;
    background: transparent;
    font-size: var(--fs-md);
    transition: border-color var(--dur);
  }

  .site-search__input:hover { border-bottom-color: var(--bp-ink-2); }
  .site-search__input:focus { outline: none; border-bottom-color: var(--bp-brand-600); box-shadow: 0 1px 0 var(--bp-brand-600); }
  .site-search__input::placeholder { color: var(--bp-ink-3); font-style: italic; }

  .site-utilities {
    display: flex;
    align-items: center;
    margin-inline-start: auto;
    order: 2;
  }

  .utility {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 38px; /* five icons and the logo still fit one row on a 375px phone */
    min-height: 44px;
    justify-content: center;
    padding: 4px 2px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--bp-ink);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
  }

  .utility:hover { color: var(--bp-brand-600); }

  /* "Sell your art" / "My application" (ADR-0013): the one red utility, a brush for artists, so it
     reads as an invitation rather than one more shop tool. On phones it is an icon like the rest. */
  .utility--sell { color: var(--bp-brand-600); }
  .utility--sell:hover { color: var(--bp-brand-700); }
  .utility--sell[aria-current] .icon { font-variation-settings: 'FILL' 1; }
  .utility .icon { font-size: 25px; }

  /* On phones these are tabs in the bottom bar instead (tab-bar.css, ADR-0034). */
  @media (max-width: 819.98px) {
    .utility--wide { display: none; }
  }

  /* Labels read to screen readers on phones, shown on desktop. */
  .utility__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .utility__badge {
    position: absolute;
    top: 0;
    inset-inline-end: 2px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 9px;
    background: var(--bp-brand-600);
    color: var(--bp-on-primary);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 18px;
    text-align: center;
  }

  @media (min-width: 820px) {
    .site-header__inner { gap: var(--space-8); padding-block: var(--space-6) var(--space-4); flex-wrap: nowrap; }
    .brand__logo { height: 64px; }
    .site-search { order: 1; flex: 1 1 360px; max-width: 480px; margin-inline-start: auto; }
    .site-utilities { gap: var(--space-2); margin-inline-start: 0; }
    .utility { min-width: 44px; padding-inline: 6px; }

    .utility__label {
      position: static;
      width: auto;
      height: auto;
      overflow: visible;
      clip-path: none;
    }

    .utility__badge { inset-inline-end: 4px; }
  }

  /* Footer: the one dark wall, charcoal in both themes. */
  .site-footer {
    margin-top: var(--space-24);
    background: var(--bp-footer-bg);
    color: var(--bp-on-dark);
    font-size: var(--fs-sm);
  }

  .site-footer__inner {
    display: grid;
    gap: var(--space-8);
    padding-block: var(--space-12) var(--space-8);
  }

  @media (min-width: 820px) {
    .site-footer__inner { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: end; }
  }

  .site-footer__brand { display: flex; flex-direction: column; gap: var(--space-3); max-width: 44ch; }

  /* align-self: the brand column is a flex column, which would otherwise stretch the logo across its
     full width at a fixed height and squash it. */
  .site-footer__logo { align-self: flex-start; height: 64px; }
  .site-footer__note { font-family: var(--font-hand); font-size: 24px; line-height: 1.1; color: var(--bp-on-dark); }
  .site-footer__address { display: flex; flex-direction: column; gap: 2px; font-style: normal; font-size: var(--fs-sm); }
  .site-footer__address a { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
  .site-footer__address a:hover { text-decoration: underline; }
  .site-footer__social { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin: 0; padding: 0; list-style: none; font-size: var(--fs-sm); font-weight: 600; }
  .site-footer a { color: var(--bp-on-dark); }
  .site-footer a:hover { color: var(--bp-white); }

  .site-footer__links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2) var(--space-6);
    list-style: none;
    padding: 0;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
  }

  .site-footer__links a { text-decoration: none; }
  .site-footer__links a:hover { text-decoration: underline; }

  /* The mailing-list sign-up (ADR-0026): its own row under brand and links, a third column when wide. */
  .signup { display: flex; flex-direction: column; gap: var(--space-3); }
  .signup__title { font-size: var(--fs-xl); color: var(--bp-on-dark); }
  .signup__lead { max-width: 44ch; }
  .signup__form { display: none; }
  .js .signup__form { display: flex; flex-wrap: wrap; gap: var(--space-2); }
  .signup__input { flex: 1 1 220px; width: auto; color: var(--bp-ink); }
  .signup__status:empty { display: none; }
  .signup__status { color: var(--bp-on-dark); }
  .signup__status[data-tone="error"] { font-weight: 600; }

  @media (min-width: 820px) {
    .signup { grid-column: 1 / -1; }
  }

  @media (min-width: 1100px) {
    .site-footer__inner { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1.2fr); }
    .signup { grid-column: auto; }
  }

  .site-footer__legal {
    border-top: 1px solid var(--bp-on-dark-rule);
    padding-block: var(--space-4) var(--space-6);
    font-size: var(--fs-xs);
    opacity: .7;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-6);
  }

  .site-footer__legal span { margin-inline-end: auto; }

  /* Page intro: breadcrumbs, title, brush stroke, lead */
  .breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--bp-ink-3);
  }

  .breadcrumbs a { color: var(--bp-ink-3); text-decoration: none; }
  .breadcrumbs a:hover { color: var(--bp-brand-600); }
  .breadcrumbs [aria-current="page"] { color: var(--bp-ink); }

  .page-intro {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-block: var(--space-4) var(--space-6);
  }

  .page-intro__title { line-height: 1.05; }
  .page-intro__lead { margin-top: 4px; max-width: 620px; font-size: var(--fs-lg); color: var(--bp-ink-2); }

  @media (min-width: 820px) {
    main.container { padding-block-start: var(--space-6); }
    .page-intro { margin-block: var(--space-6) var(--space-10); }
  }
}