/**
 * 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
 */

/* ── 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.6;
  /* 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 ────────────────────────────────────────────────────────────── */

/* Playfair Display for all headings — editorial, premium feel */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--color-text);
  line-height: 1.2;
  font-weight: 700;
}

/* ── 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:hover {
  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%;
}

/* ── 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.
 * 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-catalog__header,
.porta-degustation__header,
.porta-contact__header,
.porta-actualites__header,
.porta-agenda__header,
.porta-legal__header,
.porta-single-post__header {
  padding-block: 2rem;
  min-height: 140px;
}

@media (min-width: 768px) {
  .porta-catalog__header,
  .porta-degustation__header,
  .porta-contact__header,
  .porta-actualites__header,
  .porta-agenda__header,
  .porta-legal__header,
  .porta-single-post__header {
    padding-block: 3.5rem;
    min-height: 190px;
  }
}

/* ── 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-trust,
 * .porta-wine-lineup, .porta-visit) 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.
 */