/*
Theme Name: YA Kreyòl Flavors
Description: Artwork-driven theme for YA Kreyòl Flavors. Section artwork is served from the Media Library and overlaid with accessible hotspot links; the hero, contact and footer are real HTML text editable in the Customizer.
Version: 2.1
Author: YA Kreyòl Flavors
Text Domain: ya-kreyol-flavors
*/


:root{--wine:#72080e;--wine2:#4b0509;--gold:#d6a13a;--cream:#fff8e9;--ink:#35100c;--line:#ead6ae}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#efe7da;color:var(--ink);font-family:Arial,Helvetica,sans-serif}a{color:inherit;text-decoration:none}img{display:block;width:100%}button,input,textarea{font:inherit}
.site{width:min(100%,1440px);margin:auto;background:var(--cream);overflow:hidden;box-shadow:0 0 35px #0002}
.wrap{width:min(1180px,calc(100% - 40px));margin:auto}
.top{height:28px;background:var(--wine);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;position:relative}.account{position:absolute;right:28px;font-size:11px}
header{height:63px;background:#fffaf2;position:sticky;top:0;z-index:50;border-bottom:1px solid #eadbc1}.head{height:100%;display:flex;align-items:center;padding-left:155px;position:relative}.logo{position:absolute;left:0;top:-34px;width:132px;height:132px;border-radius:50%;object-fit:cover;z-index:4}nav{display:flex;justify-content:center;gap:30px;flex:1}nav a{font-size:12px;font-weight:900;white-space:nowrap}nav a:first-child{color:var(--wine);border-bottom:2px solid var(--wine);padding-bottom:7px}.menu{display:none;margin-left:auto;border:0;background:var(--wine);color:#fff;padding:9px 12px;border-radius:3px}
.art-section{position:relative;overflow:hidden}.art-section>img{width:100%;height:100%;object-fit:cover}.hero{aspect-ratio:1024/396}.products-art{aspect-ratio:1024/280}.pair{display:grid;grid-template-columns:1fr 1fr}.pair .art-section{aspect-ratio:512/162}.story{aspect-ratio:1024/195}.lower .art-section{aspect-ratio:512/138}
.hot{position:absolute;z-index:5;display:block}
/* hero */
.hero-shop{left:7.2%;top:74%;width:20%;height:10%}.hero-order{left:29%;top:74%;width:15%;height:10%}
/* products */
.p1{left:9%;top:82%;width:16%;height:11%}.p2{left:31%;top:82%;width:16%;height:11%}.p3{left:53%;top:82%;width:16%;height:11%}.p4{left:75%;top:82%;width:16%;height:11%}
/* feature areas */
.feature-button{left:35%;bottom:8%;width:31%;height:18%}.catering-button{left:18%;bottom:8%;width:31%;height:18%}
.story-button{left:19%;bottom:7%;width:16%;height:16%}
.recipe-button{left:34%;bottom:7%;width:31%;height:18%}.wholesale-button{left:34%;bottom:7%;width:31%;height:18%}
.contact{background:var(--wine);color:#fff;padding:20px 0;border-top:1px solid #9b2a2e}.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:50px;align-items:center}.contact h2{font:700 26px Georgia,serif;color:#efc967;margin:0}.script{font:italic 22px cursive;color:#efc967;margin:3px 0 8px}.contact p{font-size:11px;line-height:1.4}form{display:grid;grid-template-columns:1fr 1fr;gap:6px}input,textarea{width:100%;min-width:0;border:0;border-radius:2px;padding:9px;font-size:10px}textarea{grid-column:1/-1;min-height:50px;resize:vertical}.btn{grid-column:1/-1;min-height:32px;border:1px solid #e0ae43;border-radius:3px;background:linear-gradient(#efc967,#d3992d);font-size:10px;font-weight:900;color:#351207;cursor:pointer}
footer{background:radial-gradient(circle at 50% 0,#780b10,var(--wine2));color:#fff;border-top:3px solid var(--gold);padding:13px 35px 20px}.footer-grid{display:grid;grid-template-columns:110px 1fr 120px;gap:24px;align-items:center}.footer-logo{width:100px;height:100px;border-radius:50%;object-fit:cover}.links{display:flex;justify-content:center;gap:9px;flex-wrap:wrap;font-size:9px}footer .script{text-align:center;font-size:20px;margin:14px 0;color:#efc967}footer small{display:block;text-align:center;font-size:9px}.footer-haiti{width:105px;margin-left:auto}
@media(max-width:900px){nav{gap:15px}.account{display:none}}
@media(max-width:760px){header{height:58px}.head{padding-left:100px}.logo{width:86px;height:86px;top:-14px}.menu{display:block}nav{display:none;position:absolute;top:58px;left:0;right:0;background:#fffaf2;flex-direction:column;padding:8px 18px;box-shadow:0 10px 20px #0002}nav.open{display:flex}nav a{padding:10px 0;border-bottom:1px solid var(--line)}.hero{height:430px;aspect-ratio:auto}.hero>img{width:auto;max-width:none;height:100%;position:absolute;left:50%;transform:translateX(-50%)}.products-art{height:370px;aspect-ratio:auto}.products-art>img{width:auto;max-width:none;height:100%;position:absolute;left:50%;transform:translateX(-50%)}.pair{grid-template-columns:1fr}.pair .art-section{aspect-ratio:512/162}.story{height:260px;aspect-ratio:auto}.story>img{width:auto;max-width:none;height:100%;position:absolute;left:50%;transform:translateX(-50%)}.contact-grid{grid-template-columns:1fr}}
@media(max-width:520px){.wrap{width:calc(100% - 24px)}.top{height:auto;padding:6px 10px;font-size:9px}.hero{height:400px}.products-art{height:510px}.pair .art-section{height:210px;aspect-ratio:auto}.pair .art-section>img{width:auto;max-width:none;height:100%;position:absolute;left:50%;transform:translateX(-50%)}.story{height:230px}.lower .art-section{height:180px;aspect-ratio:auto}.lower .art-section>img{width:auto;max-width:none;height:100%;position:absolute;left:50%;transform:translateX(-50%)}form{grid-template-columns:1fr}textarea,.btn{grid-column:1}.footer-grid{grid-template-columns:1fr;text-align:center}.footer-logo,.footer-haiti{margin:auto}}

/* HERO REBUILT FROM THE APPROVED DESIGN:
   one header logo + all hero writing as real HTML */
.hero-real{
  position:relative;
  min-height:555px;
  overflow:hidden;
  background:#091105;
  color:#fff;
}
.hero-photo-real{
  position:absolute;
  inset:0 0 0 auto;
  width:69%;
  height:100%;
  object-fit:cover;
  object-position:center;
}
.hero-fade-real{
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,
    #071004 0%,
    rgba(7,16,4,.98) 27%,
    rgba(7,16,4,.86) 40%,
    rgba(7,16,4,.36) 58%,
    rgba(7,16,4,0) 76%);
  pointer-events:none;
}
.hero-content-real{
  position:relative;
  z-index:4;
  padding-top:74px;
  padding-bottom:20px;
}
.hero-eyebrow-real{
  display:flex;
  align-items:center;
  gap:14px;
  font-family:Georgia,serif;
  font-size:17px;
  letter-spacing:3px;
  margin-bottom:7px;
}
.hero-eyebrow-real span{
  display:inline-block;
  width:72px;
  height:1px;
  background:#e2b54a;
}
.hero-title-real{
  margin:0;
  font-family:Georgia,serif;
  font-size:clamp(50px,5.1vw,73px);
  line-height:.92;
  font-weight:500;
  letter-spacing:-1px;
  text-shadow:0 2px 4px #0006;
}
.hero-title-real em{
  color:#efca69;
  font-style:normal;
}
.hero-script-real{
  margin-top:6px;
  font-family:"Brush Script MT","Segoe Script",cursive;
  font-size:32px;
  line-height:1.05;
}
.hero-desc-real{
  width:min(440px,46%);
  margin:11px 0 0;
  font-size:16px;
  line-height:1.38;
  text-shadow:0 1px 3px #000;
}
.hero-buttons-real{
  display:flex;
  gap:14px;
  margin-top:16px;
}
.hero-btn-real{
  min-width:200px;
  min-height:42px;
  display:inline-flex;
  justify-content:center;
  align-items:center;
  border-radius:4px;
  font-size:12px;
  font-weight:900;
  border:1px solid #d9a83d;
  box-shadow:0 4px 12px #0003;
}
.hero-btn-real.gold{
  background:linear-gradient(#efca69,#d49a2e);
  color:#3a1607;
}
.hero-btn-real.red{
  min-width:155px;
  background:linear-gradient(#8e1118,#65080d);
  color:#fff;
}
.hero-badges-real{
  display:flex;
  gap:0;
  margin-top:17px;
  width:440px;
}
.hero-badges-real>div{
  width:25%;
  min-height:72px;
  border-right:1px solid rgba(216,164,58,.28);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
}
.hero-badges-real>div:last-child{border-right:0}
.hero-badges-real b{
  width:38px;height:38px;border:2px solid #e6b83f;border-radius:50%;
  display:grid;place-items:center;color:#e6b83f;font-size:19px;
}
.hero-badges-real span{
  font-size:9px;
  font-weight:900;
  white-space:nowrap;
}
@media(max-width:760px){
  .hero-real{min-height:610px}
  .hero-photo-real{width:100%;opacity:.70}
  .hero-fade-real{background:linear-gradient(90deg,rgba(7,16,4,.94),rgba(7,16,4,.55))}
  .hero-content-real{padding-top:115px}
  .hero-desc-real{width:min(500px,90%)}
}
@media(max-width:520px){
  .hero-real{min-height:650px}
  .hero-content-real{padding-top:105px}
  .hero-title-real{font-size:44px}
  .hero-script-real{font-size:26px}
  .hero-desc-real{width:100%;font-size:14px}
  .hero-buttons-real{display:grid}
  .hero-btn-real,.hero-btn-real.red{width:100%;min-width:0}
  .hero-badges-real{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .hero-badges-real>div{width:100%;border:0}
}


/* =========================================================
   YA KREYÒL FLAVORS — MOBILE / TABLET RESPONSIVE HARDENING
   Keeps the approved desktop design while preventing overlap.
   ========================================================= */
html,body{width:100%;max-width:100%;overflow-x:hidden}
img{max-width:100%}
input,textarea,button,a{-webkit-tap-highlight-color:transparent}

@media (max-width: 1024px){
  .wrap{width:min(94%,1180px)}
  nav{gap:16px}
  nav a{font-size:11px}
  .hero-content-real{padding-top:62px}
  .hero-title-real{font-size:clamp(48px,6vw,66px)}
  .hero-desc-real{width:min(440px,52%)}
}

@media (max-width: 820px){
  header{height:64px}
  .head{padding-left:104px}
  .logo{width:92px;height:92px;top:-17px}
  .account{display:none}
  .menu{display:block;font-size:20px;line-height:1}
  nav{
    display:none;
    position:absolute;
    top:64px;left:0;right:0;
    background:#fffaf2;
    flex-direction:column;
    gap:0;
    padding:10px 20px 18px;
    box-shadow:0 12px 25px #0002;
    max-height:calc(100vh - 64px);
    overflow:auto;
  }
  nav.open{display:flex}
  nav a{
    width:100%;
    padding:12px 2px;
    border-bottom:1px solid var(--line);
    font-size:12px;
  }

  .hero-real{
    min-height:650px;
    display:flex;
    align-items:flex-end;
  }
  .hero-photo-real{
    inset:0;
    width:100%;
    height:100%;
    object-position:62% center;
    opacity:.76;
  }
  .hero-fade-real{
    background:
      linear-gradient(180deg,rgba(5,12,3,.15) 0%,rgba(5,12,3,.42) 32%,rgba(5,12,3,.94) 72%,#071004 100%),
      linear-gradient(90deg,rgba(7,16,4,.82),rgba(7,16,4,.08));
  }
  .hero-content-real{
    width:100%;
    padding-top:190px;
    padding-bottom:24px;
  }
  .hero-title-real{font-size:clamp(48px,9vw,64px)}
  .hero-desc-real{width:min(560px,92%)}
  .hero-badges-real{width:min(520px,100%)}

  .products-art{height:auto;aspect-ratio:1024/280}
  .pair{grid-template-columns:1fr}
  .pair .art-section{height:auto;aspect-ratio:512/162}
  .story{height:auto;aspect-ratio:1024/195}
  .lower .art-section{height:auto;aspect-ratio:512/138}
  .contact-grid{grid-template-columns:1fr;gap:20px}
}

@media (max-width: 600px){
  .top{
    min-height:30px;height:auto;
    padding:6px 56px 6px 8px;
    font-size:9px;
    line-height:1.25;
    text-align:center;
  }
  .wrap{width:calc(100% - 28px)}
  header{height:58px}
  .head{padding-left:82px}
  .logo{width:76px;height:76px;top:-10px}
  nav{top:58px}

  .hero-real{min-height:690px}
  .hero-photo-real{object-position:67% center}
  .hero-content-real{
    padding-top:225px;
    padding-bottom:18px;
  }
  .hero-eyebrow-real{
    font-size:12px;
    letter-spacing:2px;
    gap:8px;
  }
  .hero-eyebrow-real span{width:42px}
  .hero-title-real{
    font-size:clamp(39px,12.5vw,52px);
    line-height:.94;
    letter-spacing:-.5px;
  }
  .hero-script-real{
    font-size:24px;
    margin-top:9px;
  }
  .hero-desc-real{
    width:100%;
    font-size:13px;
    line-height:1.42;
  }
  .hero-buttons-real{
    display:grid;
    grid-template-columns:1fr;
    gap:9px;
    margin-top:14px;
  }
  .hero-btn-real,.hero-btn-real.red{
    width:100%;
    min-width:0;
    min-height:43px;
  }
  .hero-badges-real{
    width:100%;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:7px;
    margin-top:13px;
  }
  .hero-badges-real>div{
    width:100%;
    min-height:58px;
    border:1px solid rgba(216,164,58,.22);
    border-radius:5px;
  }
  .hero-badges-real b{width:31px;height:31px;font-size:16px}
  .hero-badges-real span{font-size:8px}

  /* Keep approved artwork visible instead of zooming/cropping it */
  .products-art,
  .pair .art-section,
  .story,
  .lower .art-section{
    width:100%;
    height:auto !important;
    aspect-ratio:auto !important;
    overflow:hidden;
  }
  .products-art>img,
  .pair .art-section>img,
  .story>img,
  .lower .art-section>img{
    position:relative !important;
    left:auto !important;
    transform:none !important;
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    object-fit:contain !important;
  }

  /* Hotspots scale with artwork and never create visible overlap */
  .hot{background:transparent}

  .contact{padding:28px 0}
  .contact h2{font-size:24px}
  .script{font-size:20px}
  form{grid-template-columns:1fr}
  form input,form textarea,form .btn{grid-column:1/-1}
  input,textarea{font-size:16px} /* prevents iPhone auto zoom */
  textarea{min-height:100px}

  footer{padding:22px 18px 26px}
  .footer-grid{grid-template-columns:1fr;gap:15px;text-align:center}
  .footer-logo{width:88px;height:88px;margin:auto}
  .footer-haiti{width:90px;margin:auto}
  .links{font-size:10px;line-height:1.8}
  footer .script{font-size:19px}
}

@media (max-width: 390px){
  .hero-real{min-height:700px}
  .hero-content-real{padding-top:235px}
  .hero-title-real{font-size:38px}
  .hero-script-real{font-size:21px}
  .hero-desc-real{font-size:12.5px}
}


/* =========================================================
   WORDPRESS INTEGRATION
   Additions required to host the design inside WordPress.
   No design values from the approved layout are changed.
   ========================================================= */

/* The admin bar is fixed at the top for logged-in users; keep the
   sticky site header clear of it instead of letting them overlap. */
.admin-bar header{top:32px}
@media screen and (max-width:782px){
  .admin-bar header{top:46px}
  .admin-bar nav{top:calc(64px + 46px)}
}
@media screen and (max-width:782px) and (max-width:600px){
  .admin-bar nav{top:calc(58px + 46px)}
}

/* Hotspot links are invisible by design; they must still show a
   focus ring for keyboard users. */
.hot:focus-visible{
  outline:3px solid #efca69;
  outline-offset:-3px;
  border-radius:3px;
}

/* Feedback shown after the contact form is submitted. */
.yak-notice{
  grid-column:1/-1;
  margin:0 0 10px;
  padding:9px 12px;
  border-radius:3px;
  font-size:11px;
  font-weight:700;
}
.yak-notice.ok{background:#1d4620;color:#dff5d8;border:1px solid #3f7a3f}
.yak-notice.err{background:#5d1216;color:#ffdede;border:1px solid #9b2a2e}

/* Inner pages and posts: the design is homepage-first, so give
   ordinary content a readable container in the same palette. */
.page-body{padding:40px 0 56px}
.page-body h1,.page-body h2{font-family:Georgia,serif;color:var(--wine)}
.page-body a{color:var(--wine);text-decoration:underline}
.page-body img{height:auto}

/* Spam honeypot: present in the DOM, never shown to people. */
.yak-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

/* =========================================================
   FULL-WIDTH PAGE
   The approved design centred everything in a 1440px shell on a
   #efe7da backdrop. The site now spans the whole viewport, so the
   shell cap, its drop shadow and the backdrop behind it all go.
   The inner .wrap column is unchanged, which keeps line lengths
   readable while the artwork runs edge to edge.
   ========================================================= */
.site{
  width:100%;
  max-width:none;
  box-shadow:none;
}
/* Without the shell there is no backdrop to show; matching body to the
   page colour stops a mismatched band appearing on overscroll. */
body{background:var(--cream)}