/*
Theme Name: Slow Kerala
Theme URI: https://slowkerala.com
Description: Child theme of Frost for Slow Kerala, an illustrated field guide for unhurried travel. Editorial block theme with the Fraunces + Archivo type system, the brand palette, the paper-grain overlay, the slow-line motif, and a soft fade-up on first scroll. Illustration-only, no photography.
Author: Dinsan
Template: frost
Version: 1.0.0
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 7.4
Text Domain: slow-kerala
*/

/* ─────────────────────────────────────────────────────────────
   Design tokens live in theme.json (palette, type, spacing).
   This stylesheet holds the things theme.json cannot express:
   the paper-grain overlay, the sticky masthead polish, the
   canoe drift, the reveal fade-up, and low-specificity editorial
   touches that must match between the editor and the front end.
   Keep selectors shallow so block-editor styles stay in sync.
   ───────────────────────────────────────────────────────────── */

:root{
  --sk-green-deep:#1E5945;
  --sk-green-dark:#14352A;
  --sk-terracotta:#C2683D;
  --sk-cream:#EFEADD;
  --sk-sage:#E4EBE1;
  --sk-body:#4A463C;
  --sk-muted:#8A7E6B;
  --sk-hairline:#DAD3C2;
  --sk-gold:#D8B26A;
}

/* ——— paper-grain overlay, site-wide, ~5% ——— */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.7'/%3E%3C/svg%3E");
}
.editor-styles-wrapper{position:relative}

/* ——— utility eyebrow / meta text (Archivo) ——— */
.sk-eyebrow{
  font-family:'Archivo',sans-serif;font-size:11px;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--sk-terracotta);
}
.sk-meta{
  font-family:'Archivo',sans-serif;font-size:11.5px;font-weight:500;
  letter-spacing:.08em;color:var(--sk-muted);
}
.sk-eyebrow.has-gold-color{color:var(--sk-gold)}

/* ——— sticky masthead ——— */
.wp-site-blocks > header.wp-block-template-part,
header.sk-masthead{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb,var(--sk-cream) 92%,transparent);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--sk-hairline);
}
.sk-wordmark{font-family:'Fraunces',Georgia,serif;font-weight:560;font-size:21px;color:var(--sk-green-deep);letter-spacing:-.01em}
.sk-wordmark em{font-style:italic;font-weight:400;color:var(--sk-terracotta)}

/* nav pills / links */
.sk-nav a{
  font-family:'Archivo',sans-serif;font-size:12px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--sk-body);border-bottom:1px solid transparent;
  transition:color .25s,border-color .25s;
}
.sk-nav a:hover,.sk-nav .current-menu-item a{color:var(--sk-green-deep);border-bottom-color:var(--sk-terracotta)}
.sk-nav-cta a,a.sk-nav-cta{
  font-family:'Archivo',sans-serif;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--sk-cream);background:var(--sk-green-deep);padding:10px 18px;border-radius:999px;transition:background .25s;
}
.sk-nav-cta a:hover,a.sk-nav-cta:hover{background:var(--sk-green-dark)}

/* ——— the slow line: hero canoe drift (60s) ——— */
.sk-slow-line{position:relative;height:120px;overflow:hidden}
.sk-slow-line svg{position:absolute;inset:0;width:100%;height:100%}
.sk-canoe{animation:sk-drift 60s linear infinite}
@keyframes sk-drift{from{transform:translateX(-8%)}to{transform:translateX(104%)}}
/* static recurring divider */
.sk-divider{height:64px;position:relative;overflow:hidden}
.sk-divider svg{position:absolute;inset:0;width:100%;height:100%}

/* ——— headings tuned for the editorial voice ——— */
h1,h2,h3,h4,.wp-block-heading{font-family:'Fraunces',Georgia,serif;letter-spacing:-.015em}
h1,h2{color:var(--sk-green-deep)}
.sk-drift-word{font-style:italic;font-weight:340;color:var(--sk-terracotta)}

/* ——— editor's letter ——— */
.sk-letter{background:var(--sk-sage);border-block:1px solid var(--sk-hairline)}
.sk-letter p{font-style:italic;font-weight:360;line-height:1.7}
.sk-sign-rule{display:block;height:3px;width:64px;background:var(--sk-terracotta);margin-top:6px;border-radius:2px}

/* ——— pillars ——— */
.sk-pillar h3{font-style:italic;color:var(--sk-green-deep)}

/* ——— plan-your-journey library (dark band) ——— */
.sk-diy{background:var(--sk-green-dark);color:var(--sk-cream)}
.sk-diy h2,.sk-diy h3{color:var(--sk-cream)}
.sk-diy-card{
  border:1px solid color-mix(in srgb,var(--sk-cream) 22%,transparent);
  border-radius:6px;padding:24px;transition:border-color .3s,transform .3s;display:block;
}
.sk-diy-card:hover{border-color:var(--sk-gold);transform:translateY(-3px)}
.sk-diy-card svg{width:44px;height:44px;margin-bottom:14px}

/* ——— article components ——— */
.sk-pull-quote{padding-left:26px;border-left:2px solid var(--sk-terracotta)}
.sk-pull-quote p{font-style:italic;font-weight:380;color:var(--sk-green-deep);line-height:1.4}
.sk-field-aside{background:var(--sk-sage);border-radius:8px;padding:clamp(20px,3vw,32px)}
.sk-practical table{width:100%;border-collapse:collapse}
.sk-practical th,.sk-practical td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--sk-hairline);font-size:15px}
.sk-practical th{font-family:'Archivo',sans-serif;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--sk-muted);font-weight:600}

/* ——— buttons ——— */
.wp-block-button.is-style-sk-primary .wp-block-button__link{background:var(--sk-green-deep);color:var(--sk-cream);border-radius:999px;font-family:'Archivo',sans-serif;font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:14px 26px}
.wp-block-button.is-style-sk-ghost .wp-block-button__link{background:transparent;border:1px solid var(--sk-green-deep);color:var(--sk-green-deep);border-radius:999px;font-family:'Archivo',sans-serif;font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:13px 25px}
.wp-block-button.is-style-sk-primary .wp-block-button__link:hover{background:var(--sk-green-dark)}
.wp-block-button.is-style-sk-ghost .wp-block-button__link:hover{background:var(--sk-sage)}

/* ——— footer ——— */
.sk-footer{background:var(--sk-green-dark);color:color-mix(in srgb,var(--sk-cream) 75%,var(--sk-green-dark))}
.sk-footer .sk-wordmark{color:var(--sk-cream)}
.sk-foot-pillars{font-style:italic;color:#9FB89A}

/* ——— fade-up on first scroll (JS adds .is-visible) ——— */
.sk-reveal{opacity:0;transform:translateY(18px);transition:opacity .8s ease,transform .8s ease}
.sk-reveal.is-visible{opacity:1;transform:none}

@media (prefers-reduced-motion: reduce){
  .sk-reveal{opacity:1;transform:none;transition:none}
  .sk-canoe{animation:none}
  html{scroll-behavior:auto}
}