/* =======================================================================
   Furnilytics – custom.css (drop-in)
   What’s inside this build:
     - Header + logo/nav sizing + nav “nudge”
     - Footer social icons (LinkedIn/GitHub) using inline <svg> from default.hbs
     - Home hero height (shorter) + blue band and gap fix
     - Directory & misc. tweaks preserved from earlier
     - Samsung Internet band kept
   ======================================================================= */

/* -----------------------------
   0) Tweak-me variables
   ----------------------------- */
:root{
  /* LOGO size (increase to make bigger) */
  --logo-h: 70px;          /* desktop */
  --logo-h-m: 52px;        /* mobile */

  /* NAV font size (decrease to make smaller) */
  --nav-fs-min: 15px;
  --nav-fs-fluid: 1.05vw;
  --nav-fs-max: 18px;

  /* NAV vertical nudge (use positive px to move the links down a bit) */
  --nav-nudge: 2px;

  /* HERO fixed height for home (shorter hero => less/no scrolling) */
  --hero-h: 52vh;          /* try 48vh…56vh depending on your screen */

  /* Band colors */
  --band-bg: #B9DEFF;
  --band-fg: #0056D6;
  --band-sep: rgba(2,86,216,.22);
  --band-sep-mobile: rgba(2,86,216,.22);

  /* UI font */
  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial,
             "Apple Color Emoji", "Segoe UI Emoji";
}

/* -----------------------------
   1) Global UI & Header
   ----------------------------- */
html, body{
  font-family: var(--font-ui) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-weight: 400;
}

h1, h2, h3, h4, h5, h6,
.post-card-title, .article-title, .page-title, .post-full-title,
.gh-article-title, .content-title{
  font-family: var(--font-ui) !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em;
  line-height: 1.2;
}

/* Header grid + sizes */
.gh-head-inner{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; }
.gh-head-brand, .gh-head-menu, .gh-head-actions{ min-width:0; }

/* Logo size */
.gh-head-logo img, .site-logo-img{
  height: var(--logo-h);
  width: auto;
  display: block;
}
@media (max-width:768px){
  .gh-head-logo img, .site-logo-img{ height: var(--logo-h-m); }
}

/* Desktop nav – slightly smaller */
@media (min-width:768px){
  #gh-head .nav a,
  .gh-head .nav a{
    font-size: clamp(var(--nav-fs-min), var(--nav-fs-fluid), var(--nav-fs-max)) !important;
    line-height: 1.25 !important;
    font-weight: 600 !important;
  }
}

/* Nudge the nav down a hair so it aligns with the logo */
.gh-head-menu{ transform: translateY(var(--nav-nudge)); }

/* Sticky header + scroll shadow */
#gh-head{ position: sticky; top: 0; z-index: 9999; background:#fff; transition: box-shadow .15s ease; }
body.has-scrolled #gh-head{ box-shadow: 0 8px 14px -10px rgba(0,0,0,.22); }

/* Keep header light in dark OS mode too */
@media (prefers-color-scheme: dark){
  #gh-head{ background:#fff !important; color:inherit !important; }
  body.has-scrolled #gh-head{ box-shadow: 0 8px 14px -10px rgba(0,0,0,.22) !important; }
}

/* Avoid anchor-jumps under sticky header */
:root{ scroll-padding-top: 72px; }

/* -----------------------------
   2) Footer (clean social icons)
   ----------------------------- */
.custom-foot{
  padding: 22px clamp(16px, 4vw, 32px);
  border-top: 1px solid var(--color-border, #e7e7e7);
  box-sizing: border-box;
  background: #fff; /* footer stays white */
}
.custom-foot-inner{
  max-width: 1200px;
  margin: 0 auto;
  display: grid; gap: 16px;
  grid-template-columns: 1fr auto auto;  /* left | middle | right */
  align-items: center;
}
.custom-foot .foot-right{ display:flex; gap:12px; justify-self:end; }
@media (max-width: 680px){
  .custom-foot-inner{ grid-template-columns: 1fr; text-align:center; }
  .custom-foot .foot-right{ justify-self:center; }
}

/* Social icon button shell */
.custom-foot .foot-right a{
  width: 34px; height: 34px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius: 50%;
  background: #f2f6ff;
  border: 1px solid #d9e6ff;
  text-decoration: none;
}
/* Remove the old pseudo-icon technique and style the inline <svg> from default.hbs */
.custom-foot .foot-right a svg{
  width: 18px; height: 18px; display:block;
  fill: #0056D6;
}

/* Global content/footer spacing (not on the home) */
:root{ --footer-gap: 56px; }
.site-content{ padding-bottom: var(--footer-gap); }
@media (max-width: 768px){ :root{ --footer-gap: 40px; } }
.home-template .site-content{ padding-bottom: 0 !important; }

/* -----------------------------
   3) Home – hero height + blue band
   ----------------------------- */
/* Make the tiny gap under the hero match the band color */
.home-template .site-content{ background: var(--band-bg); }

/* Shorter hero (height set via --hero-h above) */
.home-template .site-cover{
  height: var(--hero-h) !important;
  min-height: var(--hero-h) !important;
}
.home-template .site-cover .cover-image{
  width:100%; height:100%; object-fit:cover;
}

/* The blue band itself (unchanged) */
.home-template .home-band{
  background: var(--band-bg);
  margin: 0;
  padding: clamp(16px, 3vw, 28px) 0;
}

/* Three across by default; stack at ≤650px */
.home-template .home-band .kpi-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 28px);
  align-items: center;
  position: relative;
}

/* Items (buttons) */
.home-template .home-band .kpi-item{
  position: relative;
  display: flex; flex-direction: column;
  align-items: center; gap: 12px;
  text-decoration: none; color: var(--band-fg);
  background: transparent;
  min-height: clamp(100px, 18vh, 140px);
  padding: 18px 10px;
  border: 0;
  transition: background .12s, transform .12s;
}
.home-template .home-band .kpi-item:hover{
  background: rgba(255,255,255,.40);
  transform: translateY(-1px);
}

/* Icon images (don’t stretch) */
.home-template .home-band .kpi-icon{
  display: block;
  height: clamp(52px, 5.2vw, 78px);
  width: auto !important;
  max-width: none !important;
  object-fit: contain;
  margin-bottom: 8px;
}
.home-template .home-band .kpi-label{
  font-size: clamp(18px, 1.9vw, 22px);
  font-weight: 600; line-height: 1.25;
  color: var(--band-fg);
  text-align: center;
}

/* Two thin vertical separators on wide screens */
@media (min-width: 901px){
  .home-template .home-band .kpi-grid{
    padding-block: 26px;
    background-clip: content-box;
    background-image:
      linear-gradient(90deg,
        transparent 0,
        transparent calc(33.333% - .5px),
        var(--band-sep) calc(33.333% - .5px),
        var(--band-sep) calc(33.333% + .5px),
        transparent calc(33.333% + .5px),
        transparent calc(66.666% - .5px),
        var(--band-sep) calc(66.666% - .5px),
        var(--band-sep) calc(66.666% + .5px),
        transparent calc(66.666% + .5px),
        transparent 100%
      );
    background-repeat: no-repeat;
  }
}

/* Stack & remove vertical lines at ≤650px */
@media (max-width: 650px){
  .home-template .home-band .kpi-grid{
    grid-template-columns: 1fr !important;
    gap: 20px;
    background-image: none !important;
    padding-block: 0;
  }
  .home-template .home-band .kpi-item{ min-height: 110px; }
  .home-template .home-band .kpi-item + .kpi-item{
    border-top: 1px solid var(--band-sep-mobile);
  }
}

/* -----------------------------
   4) Directory & post chips (kept from your previous build)
   ----------------------------- */
.pd-header{ margin:.25rem 0 .75rem; padding-top:2px; }
.pd-heading{ margin:0 0 6px; font-weight:700; font-size:clamp(28px,3vw,36px); line-height:1.15; }
.pd-sub{ margin:0; color:inherit !important; opacity:1; }

body.template-posts-directory .pd-controls .pd-search input{
  border-radius:8px !important; border-color:#e1e6f2 !important;
}
body.template-posts-directory .pd-controls .pd-search input:focus{
  border-color:#0056D6 !important;
  box-shadow:0 0 0 3px rgba(0,86,214,.18) !important;
  outline:none !important;
}
body.template-posts-directory .pd-controls .pd-chip{
  border-radius:6px !important; border-color:#e1e6f2 !important;
  transition: background .12s, border-color .12s, color .12s, box-shadow .12s !important;
}
body.template-posts-directory .pd-controls .pd-chip:hover{
  background:rgba(0,86,214,.06) !important; border-color:#b3c7f5 !important;
}
body.template-posts-directory .pd-controls .pd-chip.is-active{
  border-color:#0056D6 !important; background:rgba(0,86,214,.10) !important; color:inherit !important;
}

/* Tighten space above footer on the directory */
body.template-posts-directory .pd-container{ margin-bottom:.05rem !important; }
body.template-posts-directory .site-content{ padding-bottom:6px !important; }

/* Post – “Back to analytics” chip */
.post-back{ margin-top:1.25rem; background:transparent !important; border:0 !important; }
.post-back .back-chip{
  display:inline-flex !important; box-sizing:border-box !important;
  align-items:center; gap:.5rem; padding:8px 12px;
  width:auto !important; max-width:fit-content !important;
  border-radius:6px; border:1px solid #0056D6; background:rgba(0,86,214,.10);
  text-decoration:none; color:inherit; font-weight:400; line-height:1.2; box-shadow:none;
}
.post-back .back-chip:hover{ border-color:#b3c7f5; background:rgba(0,86,214,.12); }
.post-back .back-chip:focus-visible{ outline:none; border-color:#0056D6; box-shadow:0 0 0 3px rgba(0,86,214,.18); }

/* -----------------------------
   5) Samsung Internet – dedicated band (unchanged)
   ----------------------------- */
/* Default: hide Samsung band; show normal band */
.si-band{ display:none; }
/* On Samsung Internet: swap bands */
html.is-samsung .home-band{ display:none !important; }
html.is-samsung .si-band  { display:block !important; background:var(--band-bg) !important; color-scheme:light; }
html.is-samsung .si-inner{ max-width:1100px; margin:0 auto; padding:22px 16px; box-sizing:border-box; }
html.is-samsung .si-grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); column-gap:28px; row-gap:0; align-items:center; }
html.is-samsung .si-card{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-decoration:none; text-align:center; color:var(--band-fg);
  background:var(--band-bg); border:1px solid rgba(2,86,216,.18);
  border-radius:10px; padding:18px 16px; box-sizing:border-box;
}
html.is-samsung .si-ibox{ width:68px; height:68px; display:inline-flex; align-items:center; justify-content:center; }
html.is-samsung .si-icon{ display:block !important; width:auto !important; max-width:none !important; height:64px !important; object-fit:contain; }
html.is-samsung .si-label{ font-size:18px; font-weight:600; line-height:1.25; margin-top:8px; }
@media (max-width:560px){
  html.is-samsung .si-grid{ grid-template-columns:1fr; row-gap:14px; justify-items:center; }
  html.is-samsung .si-card{ width:min(420px, 92vw); margin:0 auto; }
  html.is-samsung .si-ibox{ width:56px; height:56px; }
  html.is-samsung .si-icon{ height:56px !important; }
}

/* -------------------------------
   HERO: ~30% shorter on desktop
   Tweak the 50vh value to adjust
   ------------------------------- */

/* desktop / large tablets */
@media (min-width: 560px) {
  .home-template .site-cover {
    /* ↓ change this to 48vh, 52vh, etc. if you want */
    height: 40vh !important;
    min-height: 40vh !important;
  }
}

/* desktop / large tablets */
@media (max-width: 560px) {
  .home-template .site-cover {
    /* ↓ change this to 48vh, 52vh, etc. if you want */
    height: 30vh !important;
    min-height: 30vh !important;
  }
}

/* ensure the image fills the new height */
.home-template .site-cover .cover-image,
.home-template .site-cover .jarallax-img,
.home-template .site-cover .u-object-fit {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ===== Shrink hero ↔ band gap on HOME ===== */

/* kill any margin below the hero */
.home-template .site-cover{
  margin-bottom: 0 !important;
}

/* remove theme padding above the page body right after the hero */
.home-template .site-cover + .site-content{
  padding-top: 0 !important;
}

/* make the band's top padding tiny (keep a little breathing room) */
.home-template .site-content > .home-band{
  margin-top: 0 !important;
  padding-top: clamp(4px, 0.6vw, 8px) !important;  /* tweak here if you want even tighter/looser */
}

/* ===== Bigger navigation logo (strong override) ===== */

/* tweak here */
:root{
  --logo-h: 64px;   /* desktop logo height; increase/decrease as needed */
  --logo-h-m: 50px; /* mobile logo height */
}

/* make sure the <picture> and <img> accept the size, beating theme defaults */
#gh-head .gh-head-brand .site-logo,
#gh-head .gh-head-brand .gh-head-logo,
#gh-head .gh-head-brand .site-logo-img{
  display: inline-block !important;
  height: var(--logo-h) !important;
  max-height: none !important;
  width: auto !important;
}

/* mobile size */
@media (max-width: 768px){
  #gh-head .gh-head-brand .site-logo,
  #gh-head .gh-head-brand .gh-head-logo,
  #gh-head .gh-head-brand .site-logo-img{
    height: var(--logo-h-m) !important;
  }
}

/* let the header row grow to fit the bigger logo */
#gh-head .gh-head-inner{
  min-height: calc(var(--logo-h) + 14px) !important;
  align-items: center !important;
}

/* optional: nudge the nav text down a touch so it aligns visually with the taller logo */
#gh-head .gh-head-menu{
  transform: translateY(2px);
}


/* === NAV sizing + vertical nudge (override) === */
:root{
  /* font size: min → fluid → max */
  --nav-fs-min: 16px;   /* was 15px */
  --nav-fs-fluid: 1.20vw;/* was 1.05vw */
  --nav-fs-max: 20px;   /* was 18px */
}
/* tweak this value to move the nav vertically (positive = down) */
:root{ --nav-nudge: 12px; }   /* try 10–14px to align with your logo */

#gh-head .gh-head-menu{
  transform: translateY(var(--nav-nudge)) !important;
}


/* ============================
   Samsung Internet – dedicated band
   ============================ */

/* Default: hide Samsung band; show normal band */
.si-band{ display:none; }

/* On Samsung Internet: swap bands */
html.is-samsung .home-band{ display:none !important; }
html.is-samsung .si-band  { display:block !important; background:var(--band-bg) !important; color-scheme:light; }

html.is-samsung .si-inner{
  max-width:1100px; margin:0 auto; padding:22px 16px; box-sizing:border-box;
}

html.is-samsung .si-grid{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  column-gap:28px; row-gap:0; align-items:center;
}

/* Card + content */
html.is-samsung .si-card{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-decoration:none; text-align:center;
  background:var(--band-bg);
  border:1px solid rgba(255,255,255,.35);   /* lighter border on blue */
  border-radius:10px; padding:18px 16px; box-sizing:border-box;
  color:#fff;                                /* << text is white */
}

html.is-samsung .si-ibox{ width:68px; height:68px; display:inline-flex; align-items:center; justify-content:center; }

/* the PNGs themselves are white; don't force a color */
html.is-samsung .si-icon{
  display:block !important;
  width:auto !important; max-width:none !important;
  height:64px !important; object-fit:contain;
}

html.is-samsung .si-label{
  margin-top:8px;
  font-size:18px; font-weight:600; line-height:1.25;
  color:#fff;                               /* << label white */
}

/* Stack on small screens */
@media (max-width:560px){
  html.is-samsung .si-grid{ grid-template-columns:1fr; row-gap:14px; justify-items:center; }
  html.is-samsung .si-card{ width:min(420px, 92vw); margin:0 auto; }
  html.is-samsung .si-ibox{ width:56px; height:56px; }
  html.is-samsung .si-icon{ height:56px !important; }
}

@font-face{
  font-family: "InterSB";
  src: url("/assets/fonts/Inter-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* Apple only: force SVG text to Inter SemiBold */
html.is-apple svg text,
html.is-apple svg tspan{
  font-family: "InterSB", -apple-system, "SF Pro Text", "Helvetica Neue", Arial, sans-serif !important;
  font-weight: 600 !important;
}

/* Inline SVGs from posts: keep responsive */
.post-template svg.inline-svg{ display:block; max-width:100%; height:auto; }