/* 7Group International — styles.css
   Phase 3: foundational visual system (palette, typography, layout, header).
   Palette re-sampled from the clean, flat business card (true brand tones —
   softer gold-orange, fresh medium green). Orange/gold are decorative only
   (fail AA as text on cream); green-deep is used for coloured text/links
   (AA 5.42:1); ink is AAA body text. */

/* ------------------------------------------------------------------ Tokens */
:root {
  /* Brand (sampled from clean card) */
  --orange:       #E38737;  /* brand orange — decorative + large text only */
  --orange-deep:  #C2691C;  /* large headings / hover — AA-large (3.68:1) */
  --gold:         #F4B84D;  /* sun gold — decorative */
  --green:        #6B9D23;  /* fresh green — borders / decorative */
  --green-deep:   #487026;  /* links, heading accent — AA on cream (5.42:1) */

  /* Neutrals */
  --cream:        #F8F8EC;  /* page background (soft green-cream, as card) */
  --cream-panel:  #EFF1DC;  /* panels / alternating sections */
  --tint-green:   #EEF1DD;  /* subtle green-leaning section tint */
  --tint-warm:    #FBF2E2;  /* subtle warm/gold-leaning section tint */
  --ink:          #23271F;  /* body text — 14.2:1 on cream (AAA) */
  --ink-soft:     #4A4F45;  /* muted labels — 7.9:1 on cream (AAA) */
  --line:         #E1E2C9;  /* hairline borders on cream */
  --white:        #FFFFFF;
  --shadow-sm:    0 1px 2px rgba(35,39,31,.06), 0 2px 8px rgba(35,39,31,.05);
  --shadow-md:    0 4px 14px rgba(35,39,31,.10), 0 12px 30px rgba(35,39,31,.08);

  /* Type */
  --serif: "Lora", Georgia, "Times New Roman", serif;
  --sans:  "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Spacing scale */
  --sp-1: 0.5rem;
  --sp-2: 1rem;
  --sp-3: 1.5rem;
  --sp-4: 2.5rem;
  --sp-5: 4rem;

  --maxw: 1140px;            /* wide rows: header, footer, reach, product grid */
  --maxw-read: 720px;        /* reading column for body copy */
  --radius: 6px;
  --header-h: 158px;         /* sticky-header height; kept in sync by main.js */
}

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

html {
  font-size: 112.5%;          /* base body = 18px (§3) */
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 1rem;            /* 18px */
  line-height: 1.6;           /* §3 */
  color: var(--ink);
  background: var(--cream);
}

img, svg { max-width: 100%; height: auto; }

/* Headings — trustworthy serif */
h1, h2, h3 {
  font-family: var(--serif);
  color: var(--ink);
  line-height: 1.2;
  margin: 0 0 var(--sp-2);
  font-weight: 600;
}
h1 { font-size: clamp(2rem, 4.5vw, 3rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); }
h3 { font-size: 1.25rem; }

p { margin: 0 0 var(--sp-2); max-width: 68ch; }

a { color: var(--green-deep); transition: color .18s ease; }
a:hover { color: var(--orange-deep); }

/* Centred section headings with a small brand accent underline — the
   centred-heading + contained-column combo is what makes the page read
   as designed rather than typed (long body copy stays left-aligned). */
main > section h2 {
  text-align: center;
  margin-bottom: var(--sp-3);
}
main > section h2::after {
  content: "";
  display: block;
  width: 60px; height: 3px;
  margin: var(--sp-2) auto 0;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--orange), var(--gold));
}

/* Visible focus for keyboard users (§3 accessibility) */
a:focus-visible, button:focus-visible {
  outline: 3px solid var(--orange-deep);
  outline-offset: 2px;
  border-radius: 3px;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Inner content wrapper. Default = reading column; --wide for rows/grids. */
.container { max-width: var(--maxw-read); margin-inline: auto; padding-inline: var(--sp-3); }
.container--wide { max-width: var(--maxw); }

/* -------------------------------------------------------------- Site header */
/* Thin decorative brand bar across the very top; sticky on scroll (§6 motion) */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-top: 4px solid var(--orange);
  background: var(--cream);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .25s ease, background-color .25s ease;
}
/* Slightly translucent + shadow once the page is scrolled (set by main.js) */
.site-header.is-scrolled {
  background: rgba(248, 248, 236, .94);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 12px rgba(35, 39, 31, .10);
}

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  /* full-width bar, content centred within --maxw */
  padding-block: var(--sp-3);
  padding-inline: max(var(--sp-3), calc((100% - var(--maxw)) / 2));
}

/* Brand lockup — logo mark beside wordmark over sub-brand, as on the card */
.brand { text-decoration: none; display: inline-flex; align-items: center; gap: 14px; }
.brand-logo { height: 54px; width: auto; display: block; flex: none; }
.brand-text { display: inline-flex; flex-direction: column; line-height: 1.1; }
.brand-name {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--orange-deep);
  letter-spacing: 0.01em;
}
.brand-sub {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 2px;
}

/* Primary nav */
.site-nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); margin: 0; padding: 0; }
.site-nav a {
  text-decoration: none;
  color: var(--ink);
  font-weight: 600;
  font-size: 1.05rem;
  padding: var(--sp-1) 0.25rem;        /* generous tap target */
  border-bottom: 3px solid transparent;
}
.site-nav a:hover { color: var(--orange-deep); }
.site-nav a[aria-current="page"] { color: var(--orange-deep); border-bottom-color: var(--orange); }

/* Header contact — phone over email, right aligned, large tap targets */
.header-contact { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.header-contact a {
  text-decoration: none;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--green-deep);
  padding: var(--sp-1) 0;               /* large tap target */
}
.header-contact a:hover { color: var(--orange-deep); }

/* --------------------------------------------------------------------- Main */
main { display: block; }

/* Sections are now full-bleed (background spans the viewport); their inner
   .container holds and centres the content. This is what lets us alternate
   section background tones for scroll rhythm. */
main > section { padding-block: var(--sp-5); }

/* Section background rhythm — subtle, on-palette tints (§3: keep it calm) */
.section--tint-green { background: var(--tint-green); }
.section--tint-warm  { background: var(--tint-warm); }

/* Anchor targets clear the sticky header when jumped/scrolled to (in-page
   nav and cross-page #fragment landings alike). --header-h tracks the real
   header height; the fallback covers the no-JS case. */
#global-reach, #what-i-source {
  scroll-margin-top: calc(var(--header-h, 158px) + 1.25rem);
}

/* Short intro line under a centred heading — centred + width-limited.
   (Long, multi-paragraph body copy stays left-aligned — see below.) */
.section-intro {
  text-align: center;
  max-width: 60ch;
  margin: 0 auto var(--sp-4);
  font-size: 1.12rem;
  color: var(--ink-soft);
}

/* ------------------------------------------------------------------- Hero */
.hero {
  position: relative;
  display: flex;
  align-items: flex-start;            /* text sits in the calmer upper area */
  justify-content: center;
  text-align: center;
  /* Robust height. The plain px lines are fallbacks: if a browser can't
     parse clamp(), the whole declaration would otherwise be dropped and the
     hero would collapse to a thin content-height strip. The floor keeps a
     proper full-height hero everywhere. */
  /* Taller hero so the frame spans from the houses at top down to the
     dried-fruit crates along the image's bottom edge. */
  min-height: 760px;
  min-height: clamp(760px, 100vh, 1040px);
  padding-block: 4rem var(--sp-5);
  padding-block: clamp(var(--sp-5), 12vh, 7rem) var(--sp-5);
  background-color: #161c10;          /* dark fallback before/without image */
  /* Stronger scrim up top (headline now sits over busier street, not sky);
     lightens toward the bottom so the fruit crates stay vivid. */
  background-image:
    linear-gradient(180deg,
      rgba(18,24,12,.88) 0%,
      rgba(18,24,12,.72) 30%,
      rgba(18,24,12,.55) 46%,
      rgba(18,24,12,.28) 56%,
      rgba(18,24,12,.12) 100%),
    url("../assets/hero.jpg");
  background-size: cover;             /* image fills the hero, cropped not letterboxed */
  background-position: center bottom; /* anchor to the crates so they're always in frame */
  background-repeat: no-repeat;
  border-bottom: 4px solid var(--orange);
}
.hero-overlay { width: 100%; }
.hero h1 {
  color: var(--white);
  max-width: 20ch;
  margin: 0 auto var(--sp-4);
  text-shadow: 0 1px 14px rgba(0,0,0,.45);
}
.hero-lead {
  color: var(--white);
  font-size: clamp(1.15rem, 2.2vw, 1.4rem);
  font-weight: 400;
  line-height: 1.5;
  max-width: 54ch;
  margin: 0 auto;
  text-shadow: 0 1px 10px rgba(0,0,0,.5);
}

/* Intro section — the remaining opening copy in the reading column */
.intro .lead {
  font-size: 1.3rem; font-weight: 400; line-height: 1.55; color: var(--ink);
}

/* ------------------------------------------------------ Global Reach (§7) */
/* Two source/supply panels with a flow connector between them. Origins lean
   warm/gold, markets lean green — a subtle visual distinction, not a clash. */
.reach-flow {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: var(--sp-3);
  margin-top: var(--sp-3);
}
.reach-panel {
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 4px solid var(--green);
  border-radius: 12px;
  padding: var(--sp-3);
  box-shadow: var(--shadow-sm);
}
.reach-panel--source { border-top-color: var(--orange); }
.reach-panel--supply { border-top-color: var(--green); }
.reach-panel__head { margin-bottom: var(--sp-2); }
.reach-panel__role {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.reach-panel--source .reach-panel__role { color: var(--orange-deep); }
.reach-panel--supply .reach-panel__role { color: var(--green-deep); }
.reach-panel__head h3 { margin: 4px 0 0; color: var(--ink); }

/* Country chips — graphic, tight, scannable */
.chip-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.5rem;
}
.chip {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  padding: 0.42rem 0.8rem;
  border-radius: 999px;
  background: var(--cream);
  border: 1px solid var(--line);
  color: var(--ink);
}
.reach-panel--source .chip { background: #FBEFDD; border-color: #EAD3AE; }
.reach-panel--supply .chip { background: #E9F0D9; border-color: #CDDDA6; }

/* Flow connector between the two panels */
.reach-flow__link {
  display: flex; align-items: center; justify-content: center;
}
.reach-flow__link span {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  color: var(--orange-deep);
  font-size: 1.5rem; line-height: 1;
}

/* --------------------------------------------------------- Image band (§7) */
.image-band {
  min-height: clamp(180px, 30vh, 300px);
  background-image: url("../assets/band.jpg");
  background-size: cover;
  background-position: center 55%;
  background-repeat: no-repeat;
  border-block: 4px solid var(--green);
}

/* What I Source — image cards in a responsive grid, uniform treatment */
.product-categories {
  list-style: none; margin: var(--sp-3) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3);
}
.product-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;                 /* clip image to the rounded corners */
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-sm);
  transition: transform .22s ease, box-shadow .22s ease;
}
.product-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.product-card picture { display: block; overflow: hidden; }
.product-card img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 3 / 2; object-fit: cover;   /* uniform crop, no distortion */
  background: var(--line);
  transition: transform .4s ease;
}
.product-card:hover img { transform: scale(1.04); }
.product-info {
  margin: 0; padding: var(--sp-2);
  font-size: 1.05rem;
  border-left: 4px solid var(--green);       /* on-brand accent */
}
.product-info strong { color: var(--ink); }

/* Closing — a deliberate CTA panel, centred, not leftover text */
.closing-panel {
  background: var(--cream-panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: var(--sp-5) var(--sp-4);
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.closing-lead {
  font-size: 1.35rem; font-weight: 400; line-height: 1.5; color: var(--ink);
  max-width: 42ch; margin: 0 auto var(--sp-3);
}
.closing .signature { font-size: 1.1rem; line-height: 1.7; margin: 0 auto; max-width: none; }
.closing .signature strong { font-size: 1.3rem; color: var(--orange-deep); }
.closing .signature a { font-weight: 600; }

/* Body copy fills the reading column (the container governs width now) */
main > section .container p { max-width: none; }
.intro .lead, .section-intro { max-width: 60ch; }

/* ------------------------------------------------------------- Contact page */
.contact { background: var(--tint-green); min-height: 60vh; }
.contact-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 4px solid var(--orange);
  border-radius: 14px;
  padding: var(--sp-4);
  box-shadow: var(--shadow-sm);
}
.contact h1 { text-align: center; }
.contact .contact-brand { margin: var(--sp-2) 0 var(--sp-4); display: flex; flex-direction: column; line-height: 1.15; align-items: center; text-align: center; }
.contact .contact-brand .brand-name { font-size: 1.5rem; }
.contact-intro { font-size: 1.15rem; max-width: 60ch; }
.contact-person { margin: var(--sp-3) 0; }
.contact-person h2 { font-size: 1.3rem; margin-bottom: var(--sp-1); }
.contact-person p { margin: 0.35rem 0; font-size: 1.15rem; }
.contact-person a, .contact-linkedin a { font-weight: 600; padding: var(--sp-1) 0; display: inline-block; }
.contact-location { font-size: 1.15rem; font-weight: 600; margin-top: var(--sp-3); }
.contact-linkedin { margin-top: var(--sp-2); }

/* -------------------------------------------------------------- Site footer */
.site-footer {
  background: var(--cream-panel);
  border-top: 4px solid var(--green);
  margin-top: var(--sp-3);
}
.site-footer > * { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--sp-3); }
.site-footer { padding-block: var(--sp-4); }
.footer-brand { display: flex; flex-direction: column; line-height: 1.15; margin: 0 auto var(--sp-2); }
.footer-brand .brand-name { font-family: var(--serif); font-weight: 700; color: var(--orange-deep); font-size: 1.2rem; }
.footer-brand .brand-sub { font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-soft); font-weight: 600; }
.footer-contact { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); align-items: center; margin-bottom: var(--sp-1); }
.footer-contact a { text-decoration: none; font-weight: 600; }
.footer-copy { color: var(--ink-soft); font-size: 0.95rem; margin: 0; }

/* ----------------------------------------------------------- Motion layer */
/* Gentle fade/slide-in as content enters the viewport. main.js adds
   .is-visible; the .js guard keeps content visible if JS never runs. */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s ease, transform .6s ease;
  will-change: opacity, transform;
}
.js .reveal.is-visible { opacity: 1; transform: none; }

/* ------------------------------------------------------------- Responsive */
@media (max-width: 760px) {
  /* Deliberate stack: brand, then nav, then contact (DOM order) */
  .site-header { flex-direction: column; align-items: flex-start; gap: var(--sp-2); }
  .brand { width: 100%; }            /* fill the column so the wordmark wraps, never clips */
  .brand-text { min-width: 0; }
  /* Nav spans the column so its links wrap within the viewport instead of
     overflowing off the right edge (the header is a flex-start column here). */
  .site-nav { width: 100%; }
  .site-nav ul { gap: var(--sp-2) var(--sp-3); }
  .header-contact { align-items: flex-start; }
  .product-categories { grid-template-columns: repeat(2, 1fr); }
  main > section { padding-block: var(--sp-4); }

  /* Hero text sizes down and wraps shorter so it never clips */
  .hero { min-height: clamp(420px, 64vh, 560px); }
  .hero h1 { font-size: 1.8rem; max-width: 15ch; }
  .hero-lead { font-size: 1.1rem; max-width: 36ch; }

  /* Reach panels stack; connector arrow points down between them */
  .reach-flow { grid-template-columns: 1fr; }
  .reach-flow__link { padding: 2px 0; }
  .reach-flow__link span { transform: rotate(90deg); }
}

/* Very narrow phones — keep the lockup and headline from overflowing */
@media (max-width: 480px) {
  .site-header { padding: var(--sp-2); }
  /* Stack logo above wordmark so the name gets the full row width (no clipping) */
  .brand { flex-direction: column; align-items: flex-start; gap: 8px; }
  .brand-logo { height: 46px; }
  .brand-name { font-size: 1.3rem; }
  h1 { font-size: 1.8rem; }
  .hero h1 { font-size: 1.6rem; max-width: 13ch; }
  .hero-lead { font-size: 1.05rem; max-width: 32ch; }
  .container { padding-inline: var(--sp-2); }
  .product-categories { grid-template-columns: 1fr; }
  .reach-panel, .closing-panel { padding: var(--sp-3); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
  /* Never hide content when motion is reduced */
  .js .reveal { opacity: 1 !important; transform: none !important; }
  .product-card:hover { transform: none; }
  .product-card:hover img { transform: none; }
}