/* ==========================================================================
   Arneaud's Apples — Global Styles (v1)
   Purpose: light helpers on top of Bootstrap for layout, type, hero, cards, and utilities.
   Safe to keep; brand colors live in CSS variables for easy tweaking.
   ========================================================================== */

/* ---------- Theme tokens (tweak as brand locks) ---------- */
:root {
  --aa-bg: #fffdf7;
  --aa-text: #1a1a1a;
  --aa-muted: #667085;

  /* Accents (pick final later) */
  --aa-red-500: #d84c2a;   /* apple red */
  --aa-red-600: #b93e20;
  --aa-green-500: #67b347; /* orchard green */
  --aa-green-600: #4f8f38;

  --aa-radius-lg: 1.25rem;
  --aa-shadow-soft: 0 12px 30px rgba(0,0,0,0.08);
}

/* ---------- Base ---------- */
html { scroll-behavior: smooth; }
body {
  background: var(--aa-bg);
  color: var(--aa-text);
  font-family: "Open Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.section-cream {
  background-color: #fdf7f1; /* soft cream tone */
}
h1, h2, h3, h4, h5, h6 {
  font-family: "Merriweather", Georgia, serif;
  line-height: 1.25;
  letter-spacing: 0.2px;
}
.lead { color: var(--aa-muted); }

/* Links pick up an accent */
a { color: var(--aa-red-500); text-decoration-thickness: 1px; }
a:hover { color: var(--aa-red-600); }

/* ---------- Hero ---------- */
.hero-banner {
  position: relative;
  overflow: visible; /* avoid accidental clipping */
}
.hero-banner .hero-image {
  display: block;
  width: 100%;
  height: auto;          /* let the image keep its 1536×1024 ratio */
  object-fit: contain;   /* show the whole image; no cropping */
  object-position: center;
}

/* Optional overlay (only if you add a child .hero-overlay in HTML) */
.hero-banner .hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.05) 60%, rgba(0,0,0,0) 100%);
  pointer-events: none;
}
/* Force the interstitial image to a fixed banner height */
#orchard-break > img{
  width:100%;
  height:330px !important;   /* adjust 260–420px to taste */
  object-fit:cover;           /* crops evenly, keeps it wide */
  display:block;
}

/* ---------- Buttons (brandable helpers) ---------- */
.btn-apple-red {
  --bs-btn-bg: var(--aa-red-500);
  --bs-btn-border-color: var(--aa-red-500);
  --bs-btn-hover-bg: var(--aa-red-600);
  --bs-btn-hover-border-color: var(--aa-red-600);
  --bs-btn-active-bg: var(--aa-red-600);
  --bs-btn-active-border-color: var(--aa-red-600);
  --bs-btn-color: #fff;
}
.btn-apple-green {
  --bs-btn-bg: var(--aa-green-500);
  --bs-btn-border-color: var(--aa-green-500);
  --bs-btn-hover-bg: var(--aa-green-600);
  --bs-btn-hover-border-color: var(--aa-green-600);
  --bs-btn-active-bg: var(--aa-green-600);
  --bs-btn-active-border-color: var(--aa-green-600);
  --bs-btn-color: #fff;
}

/* ---------- Notice block (for raw-juice safety message) ---------- */
.notice-raw {
  background: #fff7e6;
  border-left: 4px solid var(--aa-red-500);
  padding: 1rem 1.25rem;
  border-radius: 0.5rem;
  color: #5d4a20;
}
.notice-raw strong { color: var(--aa-text); }

/* General info notice (e.g., sparkling special-order) */
.notice-info {
  background: #eef6ff;
  border-left: 4px solid #2b6cb0;
  padding: 1rem 1.25rem;
  border-radius: 0.5rem;
  color: #1e3a5f;
}

/* ---------- Cards / surfaces ---------- */
.aa-card {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: var(--aa-radius-lg);
  box-shadow: var(--aa-shadow-soft);
  display: flex;
  flex-direction: column;   /* keep footer pinned to bottom */
}

.aa-card .aa-card-img {
  border-top-left-radius: var(--aa-radius-lg);
  border-top-right-radius: var(--aa-radius-lg);
  object-fit: cover;
}

/* --- Button row: always stacked --- */
.aa-card .mt-auto {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.aa-card .mt-auto .btn {
  width: 100%;
  text-align: center;
  padding: .375rem .75rem;   /* normalize Bootstrap's default btn-sm/md padding */
  font-size: 1rem;           /* normalize font size */
  border-radius: .375rem;    /* normalize border radius */
}



/* Portrait aspect closer to most label art */
.ratio-2x3 { --bs-aspect-ratio: 150% } /* height = 150% of width (2:3) */

/* Make sure images inside .ratio truly fill and honor contain */
.ratio > .img-contain { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; object-position:center }


/* NEW: Ensure full label is visible (no crop) */
.img-contain { width: 100%; height: 100%; object-fit: contain; object-position: center; }


/* Two-column lists (md+), stack on mobile */
.two-col-list { column-count: 2; column-gap: 1.5rem; }
@media (max-width: 767.98px) { .two-col-list { column-count: 1; } }
.two-col-list li { break-inside: avoid; margin-bottom: .25rem; }

/* ---------- Sections ---------- */
.section-pad { padding-block: clamp(2rem, 4vw, 5rem); }
.section-title {
  font-size: clamp(1.5rem, 1.2vw + 1.1rem, 2.25rem);
  margin-bottom: 0.25rem;
}
.section-subtitle {
  color: var(--aa-muted);
  margin-bottom: 1.25rem;
}

/* ---------- Images & media ---------- */
.img-cover { width: 100%; height: 100%; object-fit: cover; }
.rounded-2xl { border-radius: var(--aa-radius-lg) !important; }
.shadow-soft { box-shadow: var(--aa-shadow-soft) !important; }
.img-raise:hover { transform: translateY(-2px); transition: transform 160ms ease; }
.media-cover { object-fit: cover; }

/* ---------- Embeds ---------- */
.shop-frame { width:100%; height: clamp(900px, 120vh, 1600px); border:0; }
.shop-embed { border-radius: var(--aa-radius-lg); box-shadow: var(--aa-shadow-soft); overflow:hidden; }

/* Exact portrait ratio for 632×805 image */
.ratio-632x805 { --bs-aspect-ratio: 127.373%; } /* 805 / 632 * 100 */

/* No-crop helper for images inside ratio boxes */
.img-contain { width:100%; height:100%; object-fit: contain; }

/* Full-bleed interstitial image section */
.fullbleed { padding: 0; margin: 0; }
.fullbleed img { display:block; width:100%; height:auto; } /* no crop, keeps 1372×771 ratio */

/* ---------- Accessibility ---------- */
:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--aa-red-500) 70%, white);
  outline-offset: 2px;
}

/* ---------- Motion reduction ---------- */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ---------- Navbar & Footer ---------- */
.navbar .navbar-brand img { height: 40px; width: auto; }
.navbar .nav-link { padding: .5rem .75rem; }
.navbar .nav-link:hover,
.navbar .nav-link.active { color: var(--aa-red-600); }

/* Softer sticky navbar background with subtle blur */
.navbar.sticky-top {
  background: #fdf7f1 !important;   /* use same cream as .section-cream */
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

/* Remove Bootstrap's focus ring on hamburger when clicked; keep keyboard :focus-visible from global rule */
.navbar .navbar-toggler { border: 0; }
.navbar .navbar-toggler:focus,
.navbar .navbar-toggler:active { box-shadow: none; outline: none; }

/* ---------- Footer small text ---------- */
.footer-small { color: var(--aa-muted); font-size: 0.925rem; }

/* Footer links */
/* Footer (dark palette for .footer-bg) */
.footer-bg { background:#141414; color:#fff; }
.footer-bg h5 { color:#fff; margin-bottom:.75rem; }
.footer-bg a { color:#fff; text-decoration:none; }
.footer-bg a:hover { color:var(--aa-red-500); text-decoration:underline; }
.footer-bg .footer-logo { max-height:300px; width:auto; }
.footer-bg .footer-brand-name { color:#ddd; font-size:.95rem; }
.footer-bg .list-unstyled li { margin-bottom:.35rem; }

/* Anchor offset so sticky nav doesn't cover section headings */
section[id] { scroll-margin-top: 80px; }