/*
Theme Name: Sidenotes
Theme URI: https://sidenotes.in
Description: Child theme of GeneratePress for Sidenotes. Page markup and styles live in the child; the parent is never edited.
Author: Sidenotes
Template: generatepress
Version: 1.21.0
Text Domain: sidenotes
*/

/* ================================================================
   Shared layer. Loaded on every page using the Sidenotes Blank
   template, as the handle 'sidenotes-child'. Every per-page
   stylesheet in /assets/ declares this as a dependency, so
   everything here is guaranteed to load first.

   What belongs here: design tokens, the reset, base elements,
   the header, the footer, section grammar and utilities.

   What does not: cards and blocks rendered on more than one page
   type, which are in assets/components.css; and page sections,
   which are in assets/{path}.css. The three files load in that
   order, fixed by the dependency graph in functions.php.
   ================================================================ */


:root{
  color-scheme:light;
  --ink:#0E1618;
  --ink-2:#46545A;
  --line:#D2DAD8;
  --line-soft:#E6EBE9;
  --surface:#FFFFFF;
  --surface-2:#F3F7F6;
  --teal:#00707A;
  --teal-dark:#004E56;
  --teal-deep:#00363C;
  --teal-tint:#DBEFF0;
  --wa:#128C7E;
  --wa-dark:#0E7A6D;
  --teal-lite:#4FC7CE;
  /* type scale: five steps, nothing between them */
  --fs-xs:12px;
  --fs-sm:13px;
  --fs-base:14.5px;
  --fs-md:16px;
  --fs-xxs:10px;
  --fs-lead:18px;
  --fs-xl:20px;
  --r-sm:6px;
  --r-md:10px;
  --r-pill:100px;
  --gut:40px;
  --hdr:74px;
  --t:.18s ease;
}
:where(.sn) :where(*,*::before,*::after){box-sizing:border-box}
:where(.sn) :where(h1,h2,h3,h4,p,ul,ol,li,figure,fieldset,button,input,table,th,td){margin:0;padding:0}
:where(.sn) :where(ul,ol){list-style:none}
.panel a small,.sugg a span.m{font-variant-numeric:tabular-nums}
html{background:#FFFFFF}
body{overflow-x:clip;-webkit-tap-highlight-color:transparent;background:var(--surface);color:var(--ink);font-family:"Inter",system-ui,sans-serif;font-size:var(--fs-base);line-height:1.6;-webkit-font-smoothing:antialiased}
.wrap{max-width:1160px;margin:0 auto;padding:0 var(--gut)}
main,footer{background:var(--surface)}
h1,h2{font-weight:800;letter-spacing:-0.022em;line-height:1.14;color:var(--ink)}
h3,h4{font-weight:700;letter-spacing:-0.01em;line-height:1.25;color:var(--ink)}
a{color:inherit}
.img-slot{display:block;width:100%;height:auto;object-fit:cover;background:var(--surface-2)}

/* ============================ header ============================ */
header{border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50;background:#fff;transition:box-shadow var(--t)}
header.scrolled{box-shadow:0 6px 18px -12px rgba(14,22,24,.4)}
.h-top{display:flex;align-items:center;gap:18px;padding-top:12px;padding-bottom:12px;position:relative}
.logo{display:flex;align-items:center;flex:none;text-decoration:none}
.logo{flex:none;margin-right:12px;padding:3px 0;display:flex;align-items:center}
.logo svg{height:30px;width:auto;display:block}

.navsearch{flex:1;position:relative;min-width:200px;max-width:360px}
.navsearch input{width:100%;padding:11px 14px 11px 40px;border:1.5px solid var(--line);border-radius:var(--r-md);background:var(--surface-2);font-family:inherit;font-size:var(--fs-base);color:var(--ink)}
.navsearch input::placeholder{color:#7B888D}
.navsearch input:focus{outline:none;border-color:var(--teal);background:#fff;box-shadow:0 0 0 3px rgba(0,112,122,.14)}
.navsearch .sicon{position:absolute;left:13px;top:50%;transform:translateY(-50%);display:block;width:16px;height:16px;fill:#7B888D;pointer-events:none}
.sugg{position:absolute;top:calc(100% + 6px);left:0;right:0;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);box-shadow:0 14px 30px -16px rgba(14,22,24,.35);padding:6px;display:none;z-index:60}
.sugg.on{display:block}
.sugg-h{font-size:var(--fs-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);padding:8px 10px 5px;font-weight:700}
.sugg a{display:flex;justify-content:space-between;gap:12px;padding:9px 10px;border-radius:var(--r-sm);text-decoration:none;font-size:var(--fs-base)}
.sugg a:hover{background:var(--surface-2)}
.sugg a span.t{font-weight:500}
.sugg a span.m{color:var(--ink-2);font-size:var(--fs-sm);white-space:nowrap}

nav.main{display:flex;align-items:center;gap:2px;flex:none;margin-left:auto}
.hdiv{width:1px;height:24px;background:var(--line);flex:none}
.navitem{position:relative}
.navlink{display:flex;align-items:center;gap:5px;padding:9px 11px;border-radius:var(--r-sm);font-size:var(--fs-base);font-weight:600;color:var(--ink-2);text-decoration:none;background:none;border:0;font-family:inherit;cursor:pointer;white-space:nowrap}
.navlink:hover,.navitem.open .navlink{color:var(--teal);background:var(--surface-2)}
.navlink[aria-current="page"]{position:relative;color:var(--ink)}
/* The rule sits under the text, not under the padded box. An inset box-shadow
   drew it across the full 11px of padding on each side, which read as a stray
   line rather than an underline. A pseudo-element can be inset to the text. */
.navlink[aria-current="page"]::after{content:"";position:absolute;left:11px;right:11px;bottom:4px;height:2px;border-radius:1px;background:var(--teal)}
.caret{display:block;width:9px;height:9px;fill:currentColor;flex:none;transition:transform var(--t)}
.navitem.open .caret{transform:rotate(180deg)}
/* panels anchor right so a 520px panel cannot run past the viewport edge */
.panel{position:absolute;top:calc(100% + 10px);right:-8px;width:520px;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);box-shadow:0 18px 38px -20px rgba(14,22,24,.4);padding:10px;display:none;z-index:60}
.navitem.open .panel{display:grid;grid-template-columns:1fr 1fr;gap:0 8px}
.panel a{display:block;padding:9px 11px;border-radius:var(--r-sm);text-decoration:none;font-size:var(--fs-base);line-height:1.4}
.panel a:hover{background:var(--surface-2);color:var(--teal)}
.panel a small{display:block;font-size:var(--fs-xs);color:var(--ink-2);font-weight:400;margin-top:1px;letter-spacing:0}
.panel a b{font-weight:600}
.panel .all{grid-column:1/-1;border-top:1px solid var(--line-soft);margin-top:6px;padding-top:11px;font-weight:700;color:var(--teal)}

.h-right{display:flex;align-items:center;gap:10px;flex:none;margin-left:auto}
.wa-link{width:36px;height:36px;border-radius:var(--r-md);border:1.5px solid var(--line);background:#fff;display:flex;align-items:center;justify-content:center;flex:none;transition:border-color var(--t)}
.wa-link:hover{border-color:var(--wa);background:var(--teal-tint)}
.wa-link svg{display:block;width:18px;height:18px;flex:none}
.wa-link svg{fill:var(--wa)}
/* These two icons are painted as background images, not as child elements.

   On iOS Safari the previous markup collapsed: the search <svg> rendered at
   about 2px and the middle hamburger bar at about 1px, while the identical
   WhatsApp icon in the neighbouring <a> was fine. Two rewrites using child
   elements did not fix it. A background image takes no part in layout at all,
   so nothing about how the button sizes its children can reach it.

   The child <svg> and <span> stay in the markup and are hidden here, so with
   no stylesheet at all the icons still appear at their attribute size. */
.searchbtn,.menubtn{display:none;width:38px;height:38px;border:1.5px solid var(--line);border-radius:var(--r-md);cursor:pointer;flex:none;position:relative;background-color:#fff;background-repeat:no-repeat;background-position:50% 50%}
.searchbtn{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 24 24' fill='%230E1618'><path d='M10 2a8 8 0 1 0 5.3 14l5.4 5.4 1.4-1.4-5.4-5.4A8 8 0 0 0 10 2zm0 2a6 6 0 1 1 0 12 6 6 0 0 1 0-12z'/></svg>");background-size:17px 17px}
.menubtn{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='%230E1618'><rect y='2' width='16' height='2' rx='1'/><rect y='7' width='16' height='2' rx='1'/><rect y='12' width='16' height='2' rx='1'/></svg>");background-size:16px 16px}
.searchbtn svg,.menubtn span{display:none}

.mnav{display:none;flex-direction:column;border-top:1px solid var(--line);max-height:calc(100dvh - var(--hdr));overflow-y:auto}
.mnav.open{display:flex}
.mnav>a{padding:13px var(--gut);font-size:var(--fs-md);font-weight:600;text-decoration:none;border-bottom:1px solid var(--line-soft)}
.mgroup{border-bottom:1px solid var(--line-soft)}
.mgroup>button{width:100%;display:flex;justify-content:space-between;align-items:center;padding:13px var(--gut);font-size:var(--fs-md);font-weight:600;background:none;border:0;font-family:inherit;color:var(--ink);cursor:pointer;text-align:left}
.mgroup>button .caret{width:11px;height:11px}
.mgroup.open>button .caret{transform:rotate(180deg)}
.msub{display:none;padding:0 0 8px;background:var(--surface-2)}
.mgroup.open .msub{display:block}
.msub a{display:block;padding:10px var(--gut);font-size:var(--fs-base);text-decoration:none;color:var(--ink-2)}
.mcontact{display:flex;gap:10px;padding:14px var(--gut) 18px}
.mcontact a{flex:1;text-align:center;padding:11px;border-radius:var(--r-md);font-size:var(--fs-base);font-weight:700;text-decoration:none;border:1.5px solid var(--line)}
.mcontact a.wa{background:var(--wa);border-color:var(--wa);color:#fff}

/* ====================== section grammar ====================== */
main{scroll-margin-top:var(--hdr)}
section{padding:64px 0;border-top:1px solid var(--line);scroll-margin-top:var(--hdr);overflow-x:clip}
section.tint{background:var(--surface-2);border-top:none}
section.tint + section{border-top:none}
.sec-head{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
/* Present to a screen reader, absent to the eye. Needed wherever a heading
   is required for document structure but would be visual noise. */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

.eyebrow{display:inline-block;background:var(--teal-tint);color:var(--teal-dark);padding:5px 10px;border-radius:var(--r-sm);font-size:var(--fs-xs);letter-spacing:.08em;text-transform:uppercase;font-weight:700;margin-bottom:8px}
section.tint .eyebrow{background:#fff}
h2{font-size:clamp(22px,3vw,30px);margin-bottom:10px;position:relative;padding-left:14px}
h2::before{content:"";position:absolute;left:0;top:.18em;bottom:.18em;width:4px;border-radius:2px;background:var(--teal)}
.sec-sub{color:var(--ink-2);max-width:62ch;margin-bottom:0}
.sec-link{font-size:var(--fs-base);font-weight:700;color:var(--teal);text-decoration:none;white-space:nowrap}
.sec-link:hover{text-decoration:underline}
/* the content block that follows a .sec-head. Was a hard-coded list of the
   homepage's own container classes, which meant every new page type had to be
   added to it here. It is a class now. */
section .sec-body{margin-top:26px}


/* ========================== footer ========================== */
footer{border-top:1px solid var(--line);padding:40px 0 26px;overflow-x:clip}
.f-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;gap:26px;margin-bottom:28px}
.f-col h4{font-size:var(--fs-xs);letter-spacing:.07em;text-transform:uppercase;margin-bottom:13px;font-weight:800}
.f-col p{font-size:var(--fs-sm);color:var(--ink-2);max-width:30ch}
.f-col a{display:block;font-size:var(--fs-sm);color:var(--ink-2);text-decoration:none;margin-bottom:8px}
.f-col a:hover{color:var(--teal)}
.f-bottom{border-top:1px solid var(--line-soft);padding-top:18px;font-size:var(--fs-sm);color:var(--ink-2);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.disclaimer{font-size:var(--fs-xs);color:var(--ink-2);max-width:82ch;margin-top:14px;line-height:1.65}

/* ========================= utilities ========================= */
.mobilebar{display:none}
.skiplink{position:absolute;left:-9999px;top:0;background:var(--teal);color:#fff;padding:10px 16px;z-index:100;border-radius:0 0 var(--r-sm) 0;font-weight:700;font-size:var(--fs-base)}
.skiplink:focus{left:0}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible{outline:2px solid var(--teal);outline-offset:2px;border-radius:var(--r-sm)}
.hero a:focus-visible{outline-color:#fff}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* Carousel rails. The webkit rule read `section.tint section.tint .noscroll`,
   a nested selector that matches nothing, so the scrollbar was never hidden in
   Chrome or Safari. */
.noscroll{scrollbar-width:none;-ms-overflow-style:none}
.noscroll::-webkit-scrollbar{display:none}


/* ============ responsive overrides, kept last ============ */
@media(max-width:1100px){
  /* The 250px cap here existed to leave room for the phone number. With that
     gone the search can use the space, but the row is tight between 1000 and
     1100, so the gap and the nav padding come in to keep the placeholder whole. */
  .h-top{gap:12px}
  .navlink{padding:9px 7px}
  /* Matches the padding above, so the underline stays under the text. */
  .navlink[aria-current="page"]::after{left:7px;right:7px}
  .f-grid{grid-template-columns:repeat(4,1fr)}
  .f-col:first-child{grid-column:1/-1;margin-bottom:4px}
  .f-col:first-child p{max-width:64ch}
}
@media(max-width:1000px){
  :root{--gut:32px}
  nav.main{display:none}
  .menubtn{display:flex}
  .navsearch{max-width:380px}
}
@media(max-width:900px){
  .searchbtn{display:flex}
  .navsearch input{font-size:var(--fs-md)}
  .searchbtn,.menubtn,.wa-link{width:44px;height:44px}
  /* "View all X" was 23px high, under the 24px minimum target size */
  .sec-link{padding:11px 0}
  .mnav{max-height:calc(100dvh - var(--hdr) - 84px)}
  .navsearch{display:none}
  .navsearch.mobileopen{display:block;position:absolute;top:calc(100% + 12px);left:var(--gut);right:var(--gut);max-width:none;z-index:60}
  .logo{margin-right:8px}
  .logo svg{height:26px}
  .hdiv{display:none}
  body{padding-bottom:calc(74px + env(safe-area-inset-bottom))}
  .f-grid{grid-template-columns:1fr 1fr;gap:22px}
  .mobilebar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:70;background:#fff;border-top:1px solid var(--line);padding:10px 16px calc(10px + env(safe-area-inset-bottom));gap:10px;align-items:center}
  .mobilebar a{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:12px;border-radius:var(--r-md);font-weight:700;font-size:var(--fs-base);text-decoration:none;border:1.5px solid var(--line);color:var(--ink)}
  .mobilebar a svg{width:18px;height:18px;fill:var(--ink)}
  .mobilebar a.wa{background:var(--wa);border-color:var(--wa);color:#fff}
  .mobilebar a.wa svg{fill:#fff}
  section{padding:48px 0}
  section .sec-body{margin-top:22px}
}
@media(max-width:600px){
  :root{--gut:24px}
}
/* The header row needs 346px: gutters 24+24, logo 126, its 8px margin, an 18px
   gap and 146px of buttons. Below that the page scrolled sideways. These two
   steps shrink the row rather than letting it push the viewport. */
@media(max-width:359px){
  :root{--gut:16px}
  .logo svg{height:24px}
  .h-top{gap:10px}
  .h-right{gap:8px}
  .searchbtn,.menubtn,.wa-link{width:40px;height:40px}
}
@media(max-width:319px){
  /* Last resort for folding phones. WhatsApp stays reachable in the sticky bar
     and in the drawer, so nothing is lost by dropping it from the header. */
  .wa-link{display:none}
}