/**
 * base.css
 * Global reset, typography scale, and base layout styles — applied site-wide
 * as the foundation layer beneath component and page-specific styles.
 *
 * @package astra-child
 */

/* ── Fonts (self-hosted, audit 00-038) ──────────────────────────────────────
 * Marcellus (headings) and Inter (body), SIL Open Font License — licences in
 * assets/fonts/. Inter is a variable font: one file covers weights 400–700.
 * "latin" covers French and German (é, à, œ, ä, ß, « », —, €); "latin-ext" only
 * downloads if a page uses a character beyond it. Each latin-ext face is declared
 * BEFORE its latin face on purpose: for characters in both ranges (Œ, œ) the
 * browser uses the face declared last, so latin wins and latin-ext (85 KB for
 * Inter) is not fetched for "Œil de Perdrix". The latin URLs are preloaded
 * by porta_preload_fonts() (inc/enqueue.php) and must stay byte-identical. */

@font-face {
  font-family: Marcellus;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/marcellus-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: Marcellus;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/marcellus-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Reset ───────────────────────────────────────────────────────────────── */

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

/* Remove default margin/padding that browsers add inconsistently */
body,
h1, h2, h3, h4, h5, h6,
p, ul, ol, figure, blockquote {
  margin: 0;
  padding: 0;
}

/* ── Body ────────────────────────────────────────────────────────────────── */

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.7;
  /* Never fake a bold Marcellus (see the heading rule below) */
  font-synthesis-weight: none;
  /* Smoother font rendering on macOS/iOS */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Required for full-bleed negative-margin sections — prevents horizontal scroll */
  overflow-x: hidden;
}

/* ── Headings ────────────────────────────────────────────────────────────── */

/* Marcellus for all headings — editorial, premium feel.
   Marcellus has ONE weight (400): anything bolder was drawn as a synthetic
   « faux bold » — thicker, smudgy strokes (audit 00-043, owner S9-Q4).
   font-synthesis-weight: none on body also stops the browser from faking
   bold where Astra or WooCommerce still ask 600/700 of a Marcellus element
   (Inter is a variable 400–700 font, unaffected). */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--color-text);
  line-height: 1.2;
  font-weight: 400;
}

/* ── Links ───────────────────────────────────────────────────────────────── */

/* Inherit color so links blend into their context by default.
   Explicit color is applied at the component level where needed. */
a {
  color: inherit;
  text-decoration: none;
}

a:visited,
body a:visited {
  color: inherit;
}

a:hover,
a:focus {
  /* :focus included — Astra's inline CSS otherwise colors focused links with
     its palette hover slot, which no longer matches the hover state here. */
  color: var(--color-accent);
}

/* ── Interactive-state baseline ──────────────────────────────────────────── */

/* Brand keyboard-focus ring (design.md §9.2). The element-qualified variants
   are needed because Astra ships `button:focus { outline: 0 }` at (0,1,1)
   specificity — the bare :focus-visible rule alone would lose to it. */
:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Astra draws a dotted outline on every link :focus (mouse clicks included).
   Keep mouse focus quiet — keyboard focus uses the branded ring above. */
a:focus:not(:focus-visible) {
  outline: none;
}

/* Astra's customizer inline CSS hardcodes its default blue (#046bd2) on
   form-field focus borders. Same specificity, later in the cascade — ours wins.
   Components with their own focus treatment (CF7 underline fields, WC steppers)
   override this again at higher specificity. */
input[type="text"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="reset"]:focus,
input[type="tel"]:focus,
input[type="date"]:focus,
select:focus,
textarea:focus {
  border-color: var(--color-accent);
}

/* ── Images ──────────────────────────────────────────────────────────────── */

/* Prevent images from overflowing their containers */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ── Layout utilities ────────────────────────────────────────────────────── */

/* Main content container — centered, max-width constrained */
.porta-container {
  max-width: var(--max-width);
  margin-inline: auto;
  /* 1.5rem horizontal padding keeps content off the screen edge on mobile */
  padding-inline: 1.5rem;
}

/* Narrower container for prose-heavy sections */
.porta-container--text {
  max-width: var(--max-width-text);
  margin-inline: auto;
  padding-inline: 1.5rem;
}

/* ── Page template wrapper ───────────────────────────────────────────────── */

/*
 * Astra's .entry-content uses display:flex. As a flex item, <main> defaults to
 * max-content width (~1200px, driven by .porta-container) instead of filling the
 * container (~1240px). This shifts the negative-margin full-bleed calc off by
 * ~11px, leaving a visible gap on the right of colored sections.
 * width: 100% forces <main> to fill the flex container, correcting the calc.
 * See: Astra Layout Configuration in CLAUDE.md for the full context.
 */
main {
  width: 100%;
}

/*
 * ONE side margin on phones and tablets, not two (design review A2, audit
 * 09-032 / 09-DR-O4). Astra pads its container 20px up to 921px, and every
 * theme section pads its .porta-container 1.5rem (≈22px) again: text in normal
 * sections sat 42px from the screen edge while text in full-bleed sections
 * (which escape Astra's container) sat at 22px — two different margins on the
 * same page. On pages built from theme templates (their <main> carries a
 * porta-* class) and on wine pages, Astra's padding goes, so every
 * .porta-container lands at the same 22px. WooCommerce's own screens (cart,
 * checkout, account), which have no .porta-container, keep Astra's 20px.
 */
@media (max-width: 921px) {
  body:has(main[class*="porta-"]) #content > .ast-container,
  body.single-product #content > .ast-container {
    padding-inline: 0;
  }
}

/* ── Section rhythm ──────────────────────────────────────────────────────── */

/* Standard section vertical rhythm — mobile first */
.porta-section {
  padding-block: var(--space-section-sm);
}

@media (min-width: 768px) {
  .porta-section {
    padding-block: var(--space-section);
  }
}

/*
 * Page intro headers — reduced vertical rhythm.
 * .porta-page-band is the band of template-parts/page-intro.php (/actualites,
 * /contact, /degustation, legal pages); /nos-vins and single posts build their
 * own band and are listed beside it (audit 02-012).
 * These sections contain only an H1 + one-line subtitle; the full
 * 5rem section padding would create a dead zone above and below them.
 * Overrides .porta-section using the same specificity (class selector),
 * placed after it so cascade wins. Mobile 2rem / desktop 3.5rem.
 */
.porta-page-band,
.porta-catalog__header,
.porta-single-post__header {
  padding-block: 2rem;
  min-height: 140px;
}

@media (min-width: 768px) {
  .porta-page-band,
  .porta-catalog__header,
  .porta-single-post__header {
    padding-block: 3.5rem;
    /*
     * 270px was the natural height of a band holding eyebrow + 44px H1 + a
     * two-line intro (3.5rem padding + 157px of content). Since the eyebrow
     * went (audit 09-025) every band sits on this floor, content centred
     * (rule below). It is a floor, not a cap: a longer intro still grows the band.
     */
    min-height: 270px;
  }
}

/* Content centred in the band: without the « Domaine Porta » eyebrow
   (audit 09-025) most bands sit on the 270px floor, and the H1 + intro would
   otherwise hang at the top of it. */
.porta-page-band,
.porta-catalog__header {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/*
 * .porta-section-header carries a 3rem bottom margin to separate it from the
 * content below it inside a normal section. In a page intro band there IS no
 * content below — the band ends there — so that margin is dead space that
 * silently made every band using the wrapper 48px taller than /nos-vins,
 * which builds its header without it. Zero it so all the bands agree on
 * height and are sized purely by their own content and padding.
 */
.porta-page-band .porta-section-header,
.porta-catalog__header .porta-section-header,
.porta-single-post__header .porta-section-header {
  margin-bottom: 0;
}

/* ── Full-bleed sections: see components.css and woocommerce.css ─────────── */

/*
 * Astra Free constrains all page content in .ast-container (max-width: ~1240px,
 * margin: auto). Per-page full-width control is an Astra Pro feature.
 *
 * Full-bleed section backgrounds (hero, trust bar, featured wines, visit band,
 * catalog header) escape this constraint using the CSS negative-margin technique:
 *
 *   margin-left: calc(50% - 50vw);
 *   margin-right: calc(50% - 50vw);
 *
 * This is the same method Astra uses for its own .alignfull Gutenberg blocks.
 * It works because .ast-container is centered with margin: auto — so 50% of the
 * section's containing block equals 50vw only at the container's midpoint. At
 * wider viewports the negative margins push the section edges to the viewport
 * boundary. overflow-x: hidden on body (above) prevents horizontal scroll.
 *
 * Applied per section class in components.css (.porta-hero, .porta-famille,
 * .porta-degustation__header, .porta-degustation-cta) and woocommerce.css
 * (.porta-catalog__header).
 *
 * Additional requirement: page templates that use <main> as a wrapper must have
 * main { width: 100% } (above) to ensure the flex-item <main> fills .entry-content.
 * Without it, <main> collapses to max-content (~1200px) and the 50% calc is off.
 */

/* ── Bare-button reset (audit 02-021) ────────────────────────────────────────
 * Astra skins every <button> (accent fill, border, radius, shadow on hover and
 * focus) from its customizer inline CSS, which prints after our stylesheets —
 * so these resets need !important. Written once, here, for the theme's
 * buttons that must look like plain controls: photo-viewer arrows and close
 * buttons, gallery cells, the "Voir les N photos" link.
 * Each component then sets only its own look (incl. border-radius, which
 * also shapes the focus ring). Add a selector here instead of copying the
 * three lines again.
 */
.porta-lightbox__close,
.porta-lightbox__close:hover,
.porta-lightbox__close:focus,
.porta-lightbox__close:active,
.porta-lightbox__prev,
.porta-lightbox__prev:hover,
.porta-lightbox__prev:focus,
.porta-lightbox__prev:active,
.porta-lightbox__next,
.porta-lightbox__next:hover,
.porta-lightbox__next:focus,
.porta-lightbox__next:active,
.porta-degustation-grid__hint,
.porta-degustation-grid__hint:hover,
.porta-degustation-grid__hint:focus,
.porta-degustation-grid__hint:active,
.porta-degustation-grid__item,
.porta-degustation-grid__item:hover,
.porta-degustation-grid__item:focus,
.porta-degustation-grid__item:active,
.domaine-modal__close,
.domaine-modal__close:hover,
.domaine-modal__close:focus,
.domaine-modal__close:active {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}