@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700");

/* -------- Design Tokens -------- */
:root{
  --bg-accent: #935d8c;   /* page surround purple */
  --text: #3a3a3a;        /* body text */
  --muted: #636363;       /* muted text */
  --border: #d8d8d8;      /* light border */
  --card-bg: #fff;        /* page/card bg */
  --surface: #f7f7f7;     /* nav surface */
  --brand: #5fd1c8;       /* accent for rules */
  --focus: #ffbf47;       /* focus ring */

  /* Nav (unified white; hover lilac) */
  --nav-base-bg: #ffffff;
  --nav-base-fg: #2b2b2b;
  --nav-base-bd: var(--border);
  --nav-hover-bg:  #6C3F8C;   /* your color */
  --nav-hover-bd:  #6C3F8C;
  --nav-active-bg:  #552C6E;  /* slightly deeper */
  --nav-active-bd:  #552C6E;

  /* CTA shares nav hover/active colors (used by all buttons + nav CTA) */
  --cta-bg: var(--nav-hover-bg);
  --cta-bd: var(--nav-hover-bd);
  --cta-fg: #ffffff;
  --cta-active-bg: var(--nav-active-bg);
  --cta-active-bd: var(--nav-active-bd);
}

/* -------- Base / Reset -------- */
html { box-sizing: border-box; scroll-behavior: smooth; }
*,*::before,*::after { box-sizing: inherit; margin: 0; padding: 0; }
html, body { width:100%; height:100%; }
body{
  font-family: "Source Sans Pro", sans-serif;
  background: var(--bg-accent);
  color: var(--text);
  line-height: 1.6;
  font-size: 18px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img{ display:block; max-width:100%; height:auto; }

/* Anchor targets won’t hide under sticky nav */
[id]{ scroll-margin-top: 96px; }

/* Links & buttons */
a{
  color:#135d58;
  text-decoration: underline;
  text-underline-offset: 3px;
}
a:hover{ opacity:.9; }
a:focus-visible{ outline:3px solid var(--focus); outline-offset:2px; border-radius:4px; }

/* Unified button treatment (matches nav CTA colors) */
button{
  padding: 14px 28px;
  font-size: 16px;
  border: 1px solid var(--cta-bd);
  color: var(--cta-fg);
  background: var(--cta-bg);
  border-radius: 10px;
  cursor: pointer;
  transition: transform .15s ease, background-color .2s ease, border-color .2s ease, color .2s ease;
}
button:hover{
  transform: translateY(-1px);
  background: var(--cta-active-bg);
  border-color: var(--cta-active-bd);
  color: #fff;
}
button:active{ transform: translateY(0); }
button:focus-visible{ outline:3px solid var(--focus); outline-offset:3px; }

/* Skip link a11y */
.skip-link{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  position: fixed; left:16px; top:12px; width:auto; height:auto; background:#000; color:#fff;
  padding:8px 12px; border-radius:8px; z-index:9999;
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ transition:none !important; animation:none !important; }
}

/* -------- Page Shell -------- */
.page-wrapper{
  width: min(1200px, 90%);
  margin: 0 auto;
  background: var(--card-bg);
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100dvh;
}

/* -------- Header -------- */
header{
  color:#fff;
  background: transparent; /* body holds purple */
  padding: 48px 16px;
}
.header-container{
  width: 80%;
  max-width: 980px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;   /* mobile: single column */
  justify-items: center;
  row-gap: 16px;
  text-align: center;
}
.header-container img{
  width: 180px;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,.2));
  order: 2;
}
.header-container h1{
  color:#fff;
  font-size: clamp(32px, 4.2vw, 56px);
  font-weight: 600;
  letter-spacing:.2px;
  order:0;
}
.header-container p{
  color: rgba(255,255,255,.92);
  font-size: clamp(16px, 2.1vw, 20px);
  font-weight: 300;
  width: min(700px, 90%);
  margin: 0 auto;
  order:1;
}

/* ≥992px: hero two-column (left text, right image) */
@media (min-width: 992px){
  .header-container{
    grid-template-columns: 1.15fr 0.85fr;
    column-gap: 32px;
    text-align: left;
    justify-items: start;
  }
  .header-container h1{ grid-column:1; }
  .header-container p{ grid-column:1; width:100%; }
  .header-container img{ grid-column:2; width:260px; justify-self:end; }
}

/* CTA under the hero */
.hero-cta-below{
  width: 80%;
  max-width: 980px;
  margin: 14px auto 0;
  text-align: center;
}

/* Transparent hero CTA using theme colors (no background) */
.hero-cta{
  display: inline-block;
  font-weight: 800;
  font-size: clamp(19px, 1.8vw, 24px);  /* accessible “large” text */
  line-height: 1.2;
  letter-spacing: .2px;
  padding: 10px 0;
  color: var(--nav-hover-bg);            /* theme lilac */
  text-decoration: underline;
  text-underline-offset: 4px;
  border: 1px solid transparent;
  background: transparent;
  transition: transform .15s ease, color .2s ease, text-decoration-color .2s ease;
}
.hero-cta:hover{
  transform: translateY(-1px);
  color: var(--nav-active-bg);
  text-decoration-color: currentColor;
}
.hero-cta:focus-visible{
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 8px;
}

@media (max-width: 560px){
  .hero-cta{ font-size: 20px; }
  .hero-cta-below{ margin-top: 12px; }
}

/* -------- Content Wrapper -------- */
.content-wrapper{ background: var(--card-bg); }

/* -------- Sticky Nav -------- */
nav{
  position: sticky; top: 0; z-index: 10;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
nav ul{
  list-style:none;
  margin: 0 auto;
  width: min(1200px, 90%);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  justify-content: center;
  gap: 8px;
  padding: 8px;
  min-height: 64px;
}
/* Unified white buttons; hover lilac; active deeper (default for all nav links) */
nav ul li a,
nav ul li a.btn-nav{
  background: var(--nav-base-bg) !important;
  color: var(--nav-base-fg) !important;
  border: 1px solid var(--nav-base-bd) !important;
  text-decoration: none;
  display: inline-block;
  padding: 10px 16px;
  border-radius: 8px;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
nav ul li a:hover{
  background: var(--nav-hover-bg) !important;
  border-color: var(--nav-hover-bd) !important;
  color:#fff !important;
}
nav ul li a:active,
nav ul li a[aria-current]{
  background: var(--nav-active-bg) !important;
  border-color: var(--nav-active-bd) !important;
  color:#fff !important;
}
nav ul li a:focus-visible{
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

/* Nav primary CTA realignment — force CTA to match buttons exactly */
nav ul li a.btn-nav{
  background: var(--cta-bg) !important;
  border-color: var(--cta-bd) !important;
  color: var(--cta-fg) !important;
}
nav ul li a.btn-nav:hover{
  background: var(--cta-active-bg) !important;
  border-color: var(--cta-active-bd) !important;
  color:#fff !important;
}
nav ul li a.btn-nav:active,
nav ul li a.btn-nav[aria-current]{
  background: var(--cta-active-bg) !important;
  border-color: var(--cta-active-bd) !important;
  color:#fff !important;
}

@media (max-width: 740px){
  nav{ position: static; }
  nav ul{
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: center;
  }
}

/* -------- Sections -------- */
.section01, .section02{
  padding: clamp(32px, 6vw, 80px);
  border-bottom: 1px solid var(--border);
}

/* About */
.section01-container{
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 40px;
  align-items: start;
}
.section01-text{ color: var(--muted); }
.section01-text h2{
  font-weight: 600; color:#222;
  font-size: clamp(26px, 3.2vw, 36px);
  margin-bottom: 10px;
}
.section01-text h3{
  font-weight: 400; color:#333;
  font-size: clamp(18px, 2.4vw, 24px);
  margin-bottom: 14px;
}
.section01-text h3::after{
  content:""; display:block; width:120px; height:3px; margin: 12px 0 6px 0;
  background: linear-gradient(330deg, #e05252 0%, var(--brand) 50%, #e05252 100%);
  border-radius:3px;
}
.section01-text p{
  font-size: 18px;
  margin: 12px 0 24px 0;
  font-weight: 300;
  color:#3d3d3d;
  max-width: 72ch;
}
.section01-image img{
  border-radius: 16px;
  border:1px solid var(--border);
  box-shadow: 0 12px 28px rgba(0,0,0,.08);
  width: 100%;
}
@media (max-width: 960px){
  .section01-container{
    grid-template-columns: 1fr;
    text-align: center;
  }
  .section01-image img{ width: 80%; margin: 0 auto; }
}

/* Section headings */
.section02 h2{
  text-align:center; color:#2a2a2a; font-weight:700;
  font-size: clamp(26px, 3.2vw, 36px);
}
.section02 h2::after{
  content:""; display:block; width:120px; height:3px;
  margin: 16px auto 32px auto;
  background: linear-gradient(330deg, #e05252 0%, var(--brand) 50%, #e05252 100%);
  border-radius:3px;
}

/* General card grid (3/2/1) */
.section02-container{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
}
.item{
  background:#fff;
  border:1px solid var(--border);
  border-radius: 14px;
  padding: 18px;
  box-shadow: 0 10px 22px rgba(0,0,0,.04);
}
.item img{ border-radius: 12px; margin-bottom: 14px; }
.item h3{ font-size: 20px; font-weight: 600; margin-bottom: 10px; color:#222; }
.item p{ font-size: 17px; font-weight: 300; line-height: 1.7; max-width:72ch; }

@media (max-width: 960px){ .section02-container{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 730px){ .section02-container{ grid-template-columns: 1fr; } }

/* Benefits — simple */
#benefits .item h3{ display:block; }
#benefits .item p{ margin-top:6px; }

/* Focus (Explore by Focus): vertical */
#coconut-beauty .section02-container{ grid-template-columns: 1fr; }
#coconut-beauty .item{
  max-width: 820px; margin:0 auto; box-shadow:none; border:0; padding:0;
}
#coconut-beauty .item + .item{ border-top:1px solid var(--border); padding-top:22px; margin-top:18px; }
#coconut-beauty .item img{
  width:100%; height:auto; border-radius:12px; margin-bottom:14px;
}
#coconut-beauty .item h3{ margin-top:10px; }

/* Tutorials: secondary CTA */
#tutorials .item p:last-child a{
  display:inline-block; margin-top:6px; text-decoration:none;
  border:1px solid var(--border); padding:8px 12px; border-radius:8px;
}
#tutorials .item p:last-child a:hover{ background:#f8f8f8; }

/* FAQ — Pure CSS Accordion */
#faq .faq-accordion{ max-width: 820px; margin: 0 auto; }
#faq .section02-container{ display:block !important; }
#faq .item{ background:transparent !important; border:0 !important; box-shadow:none !important; padding:0 !important; }

#faq .faq-item{
  border-bottom:1px solid var(--border);
  padding: .25rem 0;
}
#faq .faq-item > summary{
  list-style:none; cursor:pointer;
  display:grid; grid-template-columns: 1fr auto; align-items:center; gap:12px;
  padding:16px 0; line-height:1.5;
  font-size:18px; font-weight:600; color:#222;
}
#faq .faq-item > summary::-webkit-details-marker{ display:none; }
#faq .faq-item > summary::after{
  content:"▸"; font-size:18px; line-height:1; transform: translateY(1px);
  transition: transform .2s ease; color:#555;
}
#faq .faq-item[open] > summary::after{ transform: rotate(90deg) translateY(0); }
#faq .faq-item > summary:focus-visible{ outline:3px solid var(--focus); outline-offset:3px; border-radius:4px; }

#faq .faq-content{
  padding: 0 0 14px 0;
  color:#3d3d3d; line-height:1.75; font-size:17px; max-width:72ch;
}
#faq .faq-item:last-child{ border-bottom:0; }

/* -------- Lightweight Trust box -------- */
.trust-lite{
  padding: 20px clamp(16px, 4vw, 24px);
  border-top: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
}
.trust-lite-grid{
  display: grid;
  grid-template-columns: repeat(3, max-content);
  gap: 8px 24px;
  justify-content: center;
  align-items: center;
  text-align: left;
  margin: 0 auto;
  width: min(1000px, 95%);
}
.trust-lite p{
  font-size: 15px;
  line-height: 1.5;
  margin: 0;
}
.trust-lite strong{ color:#222; font-weight:600; }
.trust-lite-note{
  text-align: center;
  margin-top: 10px;
  font-size: 15px;
  color: var(--muted);
}
@media (max-width: 720px){
  .trust-lite-grid{
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    row-gap: 6px;
  }
}

/* -------- Footer -------- */
footer{
  background: var(--bg-accent);
  color: rgba(255,255,255,.92);
  padding: clamp(32px, 6vw, 80px);
}
.footer-container{
  width: min(1200px, 90%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.footer-left h3, .footer-right h3{
  font-weight:600; font-size: clamp(22px, 2.6vw, 28px); margin-bottom:14px; color:#fff;
}
.footer-left p{ font-size:17px; margin-bottom:16px; }

/* Footer CTA now matches global CTA */
.footer-left button{
  display:inline-block; margin-top:6px; padding:13px 24px; font-size:15px;
  color: var(--cta-fg); border:1px solid var(--cta-bd); font-weight:400;
  border-radius:10px; background: var(--cta-bg); cursor:pointer;
  transition: transform .15s ease, background-color .2s ease, border-color .2s ease, color .2s ease;
}
.footer-left button:hover{
  transform: translateY(-1px);
  background: var(--cta-active-bg);
  border-color: var(--cta-active-bd);
  color: #fff;
}

.footer-right-container{
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 28px;
}
.footer-right-container ul{ list-style:none; font-size:15px; }
.footer-right-container ul li{ margin-bottom:8px; }
footer a{ color:#fff; }
footer a:hover{ color:#fefefe; opacity:.95; }
footer a:focus-visible{ outline:3px solid var(--focus); outline-offset:3px; border-radius:4px; background: rgba(0,0,0,.1); }
.footer-links{ text-align:center; margin-top:22px; font-size:16px; }
.footer-links a{ margin: 0 8px; }
footer .copyright{
  margin-top:28px; text-align:center; font-size:14px; color: rgba(255,255,255,.9);
}
@media (max-width: 980px){ .footer-container{ grid-template-columns: 1fr; } }

/* -------- Figures -------- */
figure{ margin:0; }
figcaption{ font-size:14px; color:#6b6b6b; margin-top:6px; }

/* -------- Utility -------- */
.visually-hidden{
  position:absolute !important;
  height:1px; width:1px;
  overflow:hidden; clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

/* -------- XL tweaks -------- */
@media (min-width: 1281px){
  .header-container h1{ font-size:56px; }
  .header-container p{ font-size:20px; }
}

/* ===== Contrast fixes (WCAG AA) ===== */

/* Darken the page accent so white text passes comfortably */
:root{
  /* old: #935d8c */
  --bg-accent: #6a2e62; /* darker purple for better contrast with #fff */
}

/* Footer text & links: use full white, bump tiny text to readable size */
footer{ color:#fff; }
.footer-left p,
.footer-right-container ul,
.footer-links,
footer .copyright{
  color:#fff;
}

footer .copyright{
  /* old: 14px; tiny + low-contrast => fail */
  font-size: 16px;           /* improve legibility */
  opacity: 1;                 /* ensure solid white */
}

/* Footer links should remain white in all states */
footer a{ color:#fff; text-decoration: underline; }
footer a:hover,
footer a:focus{ color:#fff; opacity:.95; }

/* Social chips: stronger border so they don’t look “ghosted” on dark bg */
.social-links a{
  border-color: rgba(255,255,255,0.6);
}

/* Footer button: keep accessible contrast between label and its background */
.footer-left button{
  background:#fff;
  color:#1e1e1e;             /* ~14:1 vs white bg */
  border-color: rgba(0,0,0,.25);
}

/* Hero text: ensure readability over the image */
.header-container h1,
.header-container p{
  color:#fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.45);
}

/* Respect users who ask for more contrast */
@media (prefers-contrast: more){
  .footer-left button{ border-color: #000; }
  .social-links a{ border-color:#fff; }
}

/* --- Touch target accessibility for social icons --- */
.social-links {
  display: flex;
  gap: 12px;               /* spacing between icons */
  justify-content: start;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 12px;
}

.social-links a {
  width: 48px;             /* ensure minimum target size */
  height: 48px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 10px;           /* enlarges clickable area */
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  text-decoration: none;
  border: 1px solid rgba(255,255,255,0.5);
  transition: background-color 0.2s ease;
  margin: 6px;             /* ensures spacing between each target */
}

.social-links a:hover,
.social-links a:focus-visible {
  background: rgba(255,255,255,0.25);
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.social-links i {
  font-size: 20px;
  line-height: 1;
  color: #fff;
}

/* Banner Ads */
.banner-leaderboard {
  display: flex;
  justify-content: center;   /* centers banner horizontally */
  align-items: center;       /* vertically centers if the container gets taller */
  margin: 24px auto;         /* space above/below + center in layout */
  text-align: center;
}

.banner-leaderboard img {
  max-width: 100%;           /* makes it responsive on small screens */
  height: auto;
}

.footer-container {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 32px;
}

/* Main footer columns */
.footer-left,
.footer-right {
  flex: 1 1 260px;
}

/* Banner column on the far right */
.footer-banner-col {
  flex: 0 0 250px;           /* fixed-ish width for the 250x250 */
  margin-left: auto;         /* pushes it to the far right */
  display: flex;
  justify-content: flex-end; /* align image to the right edge */
}

.footer-banner-col img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Stack nicely on smaller screens */
@media (max-width: 900px) {
  .footer-banner-col {
    margin-left: 0;
    justify-content: flex-start;
    order: 3;                /* show under the other columns */
    margin-top: 16px;
  }
}

/*New*/
.map-embed {
  margin-top: 16px;
  display: flex;
  justify-content: center;
}

.map-embed iframe {
  max-width: 100%;
  border-radius: 8px;
}

/* Article review: no card, just clean centered text */
#coconut-oil-for-skin-article .section02-container{
  display: block;              /* no 3-column grid */
}

#coconut-oil-for-skin-article .item{
  background: transparent;     /* remove white card */
  border: 0;                   /* remove frame */
  box-shadow: none;            /* remove shadow */
  border-radius: 0;
  padding: 0;                  /* use section padding only */
  max-width: 72ch;             /* nice readable width */
  margin: 0 auto;              /* center block */
}

#coconut-oil-for-skin-article .item p{
  color: #050000;
  font-size: 18px;
  line-height: 1.8;
  max-width: none;    
  width: 100%;         
}

#coconut-oil-for-skin-article .item{
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  max-width: 1100px;  
  width: 100%;
  margin: 0 auto;
  padding: 0;
}