/* Components and layout. Built only on tokens.css; base element styles live there. */

/* Base */
*,
*::before,
*::after {
  box-sizing: border-box;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Inline SVG icons follow the text color (see partials/icon.njk). */
.icon {
  display: inline-block;
  flex-shrink: 0;
  width: var(--icon-size);
  height: var(--icon-size);
  vertical-align: middle;
}

/* Utilities */

/* Hidden visually but still read by screen readers. Fixed 1px sizes are part of the technique. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Skip link: off-screen until focused with the keyboard. */
.skip-link {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: var(--z-skip-link);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--color-btn-bg);
  color: var(--color-btn-text);
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}

/* Metadata (dimensions, materials, references): Manrope. */
.meta {
  font-family: var(--font-meta);
  font-weight: var(--font-weight-meta);
  font-size: var(--font-size-sm);
}

/* Prices: Manrope, slightly heavier. Tabular figures keep columns aligned. */
.price {
  font-family: var(--font-meta);
  font-weight: var(--font-weight-meta-strong);
  font-variant-numeric: tabular-nums;
}

/* Buttons: room for the trailing arrow icon. */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

/* Header */
.site-header {
  padding-block: var(--space-2);
  padding-inline: var(--gutter);
  background: var(--color-bg);
}

/* The header is the containing block of the mobile menu panel (sticky or not). */
.site-header {
  position: relative;
}

/* Sticky header only when the viewport is tall enough: zoomed pages and
   landscape phones keep a normal header (WCAG 1.4.10). 30rem = 480px. */
@media (min-height: 30rem) {
  html {
    scroll-padding-top: var(--scroll-offset); /* anchors and focus never land under the header */
  }

  /* Mobile menu open (it stays open after a same-page link such as #brands, there is no
     script to close it): keep anchors clear of the panel too (four items + its padding). */
  @media (max-width: 47.99rem) {
    html:has(.nav-menu[open]) {
      scroll-padding-top: calc(var(--scroll-offset) + 4 * var(--control-height) + var(--space-2));
    }
  }

  .site-header {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
  }
}

@media print {
  .site-header {
    position: static;
  }
}

/* One row at every width: logo, then (desktop) nav, language switch and (mobile) menu button. */
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

/* Logo: ice wordmark (Josefin Sans 500, tracking -0.05em) on a wine block.
   If the logo ships as an SVG image instead, drop the font rules and keep the block. */
.site-header__logo {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--color-logo-bg);
  font-family: var(--font-logo);
  font-weight: var(--font-weight-logo);
  font-size: var(--font-size-lg);
  letter-spacing: var(--letter-spacing-logo);
  line-height: var(--line-height-logo);
  color: var(--color-logo-text);
  text-decoration: none;
}

.site-nav__list,
.lang-switch__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav a,
.lang-switch a {
  font-family: var(--font-secondary);
  font-weight: var(--font-weight-secondary);
  letter-spacing: var(--letter-spacing-nav);
  text-decoration: none;
}

.site-nav a:hover,
.lang-switch a:hover,
.site-nav a[aria-current="page"],
.lang-switch a[aria-current="true"] {
  text-decoration: underline;
}

.lang-switch {
  margin-inline-start: auto; /* mobile: language links sit right, next to the menu button */
  font-size: var(--font-size-sm);
  letter-spacing: var(--letter-spacing-eyebrow);
}

/* Mobile menu (below 48rem): native <details>, no JavaScript. Exactly one of the two
   navs is displayed at any width; display:none also hides the other from screen readers. */
.site-nav--desktop {
  display: none;
}

/* Menu button: the <summary>, 48px square (touch target), icon only with a visually
   hidden label. Hamburger icon when closed, cross when open. */
.nav-menu__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--control-height);
  height: var(--control-height);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-lg);
  list-style: none; /* removes the disclosure triangle */
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.nav-menu__button::-webkit-details-marker {
  display: none; /* disclosure triangle in Safari */
}

.nav-menu__button:hover {
  background: var(--color-surface); /* wine icon on mist: 6.8:1 */
}

.nav-menu[open] .icon-menu,
.nav-menu:not([open]) .icon-x {
  display: none;
}

/* Panel: full width under the header bar, over the page (no layout shift). No animation,
   so nothing to turn off under prefers-reduced-motion. */
.nav-menu__panel {
  position: absolute;
  inset-inline: 0;
  top: 100%;
  padding: var(--space-1) var(--gutter);
  border-block-start: 1px solid var(--color-border); /* decorative hairline */
  background: var(--color-bg);
  box-shadow: var(--shadow-soft);
}

.site-nav--mobile .site-nav__list {
  display: grid;
  gap: 0;
}

/* Each item is a full-width row, at least 48px tall. */
.site-nav--mobile a {
  display: flex;
  align-items: center;
  min-height: var(--control-height);
}

/* Breakpoints cannot use custom properties; 48rem = 768px. */
@media (min-width: 48rem) {
  .site-nav--desktop {
    display: block;
  }

  /* Thin vertical separators between desktop menu items (not before the first, not after
     the last). An empty pseudo-element outside the link: not announced by screen readers,
     and the link box, its underline and its focus ring are unchanged. Equal space on both
     sides replaces the list gap. Decorative colour (mist), as --color-border allows. */
  .site-nav--desktop .site-nav__list {
    gap: 0;
  }

  .site-nav--desktop li {
    display: flex;
    align-items: center;
  }

  .site-nav--desktop li + li::before {
    content: "";
    width: 1px; /* hairline, as the other rules of the site */
    height: 1em;
    margin-inline: var(--space-2);
    background: var(--color-border);
  }

  .nav-menu {
    display: none;
  }

  .lang-switch {
    margin-inline-start: 0; /* the bar spreads logo, nav and language switch evenly */
  }
}

/* Typography helpers */
.lead {
  max-width: var(--max-width-text);
  font-size: var(--font-size-lg);
}

.hero h1 {
  margin-block-end: var(--space-3); /* clear room before the handwritten accent */
}

.hero .accent-script {
  margin: 0 0 var(--space-2);
}

.hero .lead {
  margin: 0 0 var(--space-4);
}

/* Cards: one column on mobile, three from tablet width. */
.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 48rem) {
  .card-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Each card spans two shared rows (title, text), so a title that wraps
     keeps the texts of the three cards aligned. Without subgrid support
     the cards simply keep their own layout. */
  .card-grid > .card {
    display: grid;
    grid-row: span 2;
    grid-template-rows: subgrid;
    row-gap: 0;
  }
}

.card {
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-soft);
}

.card p {
  margin: 0;
}

/* Buttons as <button>: drop the native border and font so they match the link buttons. */
button.btn {
  border: 0;
  font-size: inherit;
  line-height: inherit;
  cursor: pointer;
}

/* Form fields (design system TextField). Forms sit on cream sections only:
   --color-border-control reaches 3:1 on cream, not on mist or ice. */
.field {
  display: grid;
  gap: var(--space-1);
  align-content: start;
}

.field__label {
  font-family: var(--font-secondary);
  font-weight: var(--font-weight-secondary);
  font-size: var(--font-size-sm);
}

.input {
  width: 100%;
  min-height: var(--control-height);
  padding: 0 var(--space-2);
  border: 1px solid var(--color-border-control); /* hairline edge, as in the design system */
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-text);
  font: inherit;
  font-size: var(--font-size-base); /* 16px stops iOS zooming into the field */
  transition: border-color var(--transition-fast);
}

.input:hover {
  border-color: var(--color-text);
}

.input:focus-visible {
  border-color: var(--color-focus);
}

/* Multi-line field (textarea): room above and below the text, vertical resize only. */
.input--multiline {
  padding-block: var(--space-1);
  resize: vertical;
}

/* Contact form */
.contact-form {
  display: grid;
  gap: var(--space-3);
  max-width: var(--max-width-text);
}

.contact-form__actions {
  display: grid;
  justify-items: start;
  gap: var(--space-2);
}

.contact-form__note {
  margin: 0;
  font-size: var(--font-size-sm);
}

/* Checkbox (design system Checkbox): custom 24px box over the native input, Lucide check
   mark shown with :checked (no JavaScript). The <label for> next to it is the click target. */
.checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--space-1);
}

.checkbox__box {
  display: grid;
  flex: none;
}

.checkbox__box > * {
  grid-area: 1 / 1;
}

.checkbox input {
  appearance: none;
  width: var(--space-3);
  height: var(--space-3);
  margin: 0;
  border: 1px solid var(--color-border-control); /* hairline edge, as in the design system */
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  cursor: pointer;
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.checkbox input:checked {
  border-color: var(--color-btn-bg);
  background: var(--color-btn-bg);
}

.checkbox__box .icon {
  place-self: center;
  width: var(--space-2);
  height: var(--space-2);
  color: var(--color-btn-text);
  opacity: 0;
  pointer-events: none;
}

.checkbox input:checked + .icon {
  opacity: 1;
}

.checkbox label {
  cursor: pointer;
}

/* Newsletter band ("OBJKT Journal") on wine, above the footer. Centred heading and text,
   then a compact single-column form: e-mail, consent, button (same order for the keyboard). */
.newsletter-band {
  text-align: center;
}

.newsletter-band__title {
  margin: 0;
}

.newsletter-band__subtitle {
  margin: 0 0 var(--space-1);
  font-family: var(--font-primary);
  font-weight: var(--font-weight-primary);
  font-size: var(--font-size-h3);
  line-height: var(--line-height-tight);
}

.newsletter-band__text {
  max-width: var(--max-width-text);
  margin: 0 auto var(--space-4);
}

.newsletter-form {
  display: grid;
  justify-items: start;
  gap: var(--space-3);
  max-width: var(--max-width-form);
  margin-inline: auto;
  text-align: start;
}

.newsletter-form .field {
  width: 100%;
}

/* Fields on wine ("TextField on dark"): the cream fill is the visible edge (cream on wine
   12:1), so --color-border-control, made for cream grounds, is not relied on here. */
.section--dark .input {
  border-color: var(--color-bg);
}

/* Checkbox on wine: the box stays cream in both states (12:1 against wine); checked adds
   the wine check mark (12:1 against the cream box). */
.section--dark .checkbox input,
.section--dark .checkbox input:checked {
  border-color: var(--color-bg);
  background: var(--color-bg);
}

.section--dark .checkbox__box .icon {
  color: var(--color-text);
}

/* Handwritten lines on wine use cream: the accent colour (wine) would vanish. */
.section--dark .accent-script {
  color: var(--color-text-inverse);
}

/* Spam trap: moved off-screen (not display:none, which some bots skip). The wrapper is
   aria-hidden and the field has tabindex="-1", so people never reach it. */
.form-trap {
  position: absolute;
  inset-inline-start: -100vw;
  width: 1px; /* part of the off-screen technique, like .visually-hidden */
  height: 1px;
  overflow: hidden;
}

/* Long-form text (privacy policy): readable line length, room between sections. */
.prose {
  max-width: var(--max-width-text);
}

.prose h2 {
  margin-block-start: var(--space-6);
  font-size: var(--font-size-h3);
}

.prose ul {
  padding-inline-start: var(--space-3);
}

/* Question-and-answer headings inside long text: smaller than the section h2. */
.prose h3 {
  margin-block: var(--space-4) var(--space-1);
  font-size: var(--font-size-lg);
}

/* Personal quote on cream: a first-person paragraph, lead size, with a handwritten
   signature. No border, no quotation marks. */
.personal-quote {
  margin: var(--space-4) 0;
  padding-inline-start: var(--space-4);
}

.personal-quote blockquote {
  margin: 0;
}

.personal-quote p {
  margin: 0;
  font-size: var(--font-size-lg);
}

.personal-quote figcaption {
  margin-block-start: var(--space-1);
}

/* Footer: dark contrast band. */
.site-footer {
  padding-block: var(--space-6);
  padding-inline: var(--gutter);
  background: var(--color-surface-dark);
  color: var(--color-text-inverse);
}

.site-footer a {
  color: var(--color-text-inverse);
}

.contact-list {
  display: grid;
  gap: var(--space-1);
  margin: 0 0 var(--space-4);
  padding: 0;
  list-style: none;
}

.contact-list li {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

/* Social links: icon and handle form one click target, at least 24px tall (WCAG 2.5.8). */
.contact-list__link {
  position: relative; /* keeps the visually hidden network name inside the link box */
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: var(--space-3);
}

/* After the wine newsletter band, a thin cream rule marks where the footer starts. */
.newsletter-band + .site-footer {
  padding-block-start: 0;
}

.newsletter-band + .site-footer .site-footer__inner {
  padding-block-start: var(--space-6);
  border-block-start: 1px solid var(--color-text-inverse); /* hairline rule */
}

/* Footer columns: contact, then "Customer service" links. Stacked on mobile, two columns from 48rem. */
.site-footer__grid {
  display: grid;
  gap: var(--space-4);
  margin-block-end: var(--space-4);
}

.site-footer__grid .contact-list {
  margin-block-end: 0;
}

.site-footer__links {
  display: grid;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

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

.site-footer__links a:hover,
.site-footer__links a:focus-visible {
  text-decoration: underline;
}

@media (min-width: 48rem) {
  .site-footer__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.site-footer__legal {
  margin: 0;
  font-size: var(--font-size-xs);
}

/* Wine focus outline is invisible on wine backgrounds: switch it to cream there.
   The logo keeps the default wine outline: it sits on the cream header, outside the block. */
.section--dark :focus-visible,
.site-footer :focus-visible {
  outline-color: var(--color-text-inverse);
}