/* Solaria Tesori header — quiet, light, editorial.
   Row 1: MENU (left) · logo (centre) · BOOK (right). Row 2: thin secondary nav.
   Homepage: transparent over the hero until scrolled, then the light header. */

/* Montserrat 500 (SIL OFL) under its own name so only the secondary nav uses it;
   body text declared 500 keeps rendering at 400 as before. */
@font-face {
  font-family: "Montserrat Nav";
  src: url(/assets/fonts/montserrat-vietnamese-500.woff2) format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: "Montserrat Nav";
  src: url(/assets/fonts/montserrat-latin-ext-500.woff2) format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Montserrat Nav";
  src: url(/assets/fonts/montserrat-latin-500.woff2) format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --hdr-bg: #ece3de;   /* same beige as the page background */
  --hdr-ink: #373635;
  --hdr-line: rgba(55, 54, 53, .18);
  --hdr-row1: 76px;
  --hdr-row1-stuck: 64px;
  --hdr-row2: 46px;
  --hdr-track: .16em;
}

/* ---------- Light (default) ---------- */
#header .header-bg-color,
#header .header-wrapper.stuck .header-bg-color { background-color: var(--hdr-bg) !important; }
#header .header-main,
#header .header-bottom { background-color: var(--hdr-bg) !important; }
#header div#masthead,
#header .header-bottom,
#header .header-wrapper.stuck div#masthead,
#header .header-wrapper.stuck .header-bottom { border-bottom: 1px solid var(--hdr-line) !important; }

#header .header-main { height: var(--hdr-row1) !important; }
#header .stuck .header-main { height: var(--hdr-row1-stuck) !important; }

/* Logo: one image per state, same proportions. */
#header #logo { width: auto !important; }
#header .tesori-logo { display: inline-flex; align-items: center; height: 100%; }
#header .tesori-logo img { display: block; width: auto; height: 52px; max-height: none !important; transition: height .2s ease; }
#header .stuck .tesori-logo img { height: 44px; }
#header .tesori-logo .logo-light { display: none; }

/* MENU trigger: the theme's icon-font glyph renders empty, so the desktop icon is drawn here. */
#header .hide-for-medium .nav-left > li.nav-icon { display: none !important; }
#header .tesori-menu-label {
  display: inline-flex !important; align-items: center; gap: 14px; min-height: 44px;
  color: var(--hdr-ink) !important;
  font-size: 12px !important; letter-spacing: var(--hdr-track); text-transform: uppercase !important; font-weight: 400 !important;
  padding: 0 !important;
}
#header .tesori-menu-label::before {
  content: ""; width: 24px; height: 13px; flex: none;
  background:
    linear-gradient(currentColor, currentColor) left top / 100% 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) left center / 100% 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) left bottom / 66% 1.5px no-repeat;
}

/* BOOK: outline, softly rounded, uppercase; fills on hover */
#header .bookho a {
  display: inline-flex !important; align-items: center; justify-content: center;
  min-height: 42px; padding: 0 24px !important; border-radius: 6px !important;
  background: transparent !important; color: var(--hdr-ink) !important; border: 1px solid var(--hdr-ink) !important;
  font-family: "Montserrat Nav", "Montserrat", sans-serif !important;
  font-size: 12px !important; font-weight: 500 !important; letter-spacing: .18em; text-transform: uppercase;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
#header .bookho a:hover, #header .bookho a:focus-visible { background: var(--hdr-ink) !important; color: #fff !important; }
#header .bookho svg { display: none !important; }

/* Row 2: secondary nav */
#header .header-bottom { min-height: var(--hdr-row2) !important; }
#header .header-bottom-nav.nav > li { margin: 0 24px !important; }
#header .header-bottom-nav.nav > li > a {
  color: var(--hdr-ink) !important; font-family: "Montserrat Nav", "Montserrat", sans-serif !important; font-size: 13px !important; font-weight: 500 !important; letter-spacing: .02em;
  padding: 14px 0 !important;
}
#header .header-bottom-nav.nav > li > a:hover { font-weight: 500 !important; }

/* Focus visibility */
#header a:focus-visible { outline: 2px solid #b4232a; outline-offset: 3px; }

/* ---------- Transparent over the homepage hero (not scrolled) ---------- */
#header.transparent .header-wrapper:not(.stuck) .header-bg-color,
#header.transparent .header-wrapper:not(.stuck) .header-main,
#header.transparent .header-wrapper:not(.stuck) .header-bottom { background-color: transparent !important; }
#header.transparent .header-wrapper:not(.stuck) div#masthead,
#header.transparent .header-wrapper:not(.stuck) .header-bottom { border-bottom-color: rgba(255, 255, 255, .35) !important; }
#header.transparent .header-wrapper:not(.stuck) .tesori-logo .logo-light { display: block; }
#header.transparent .header-wrapper:not(.stuck) .tesori-logo .logo-dark { display: none; }
#header.transparent .header-wrapper:not(.stuck) .icon-menu,
#header.transparent .header-wrapper:not(.stuck) .tesori-menu-label,
#header.transparent .header-wrapper:not(.stuck) .header-bottom-nav.nav > li > a { color: #fff !important; }
#header.transparent .header-wrapper:not(.stuck) .bookho a { background: transparent !important; color: #fff !important; border-color: rgba(255, 255, 255, .85) !important; }
#header.transparent .header-wrapper:not(.stuck) .bookho a:hover { background: #fff !important; color: var(--hdr-ink) !important; border-color: #fff !important; }
/* soft scrim so white text stays readable on bright hero photos */
#header.transparent .header-wrapper:not(.stuck)::before {
  content: ""; position: absolute; inset: 0 0 -40px 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(0, 0, 0, .38), rgba(0, 0, 0, 0));
}

/* ---------- Tablet & mobile (Flatsome switches at 850px) ---------- */
@media (max-width: 849px) {
  :root { --hdr-row1: 64px; --hdr-row1-stuck: 58px; }
  #header .tesori-logo img { height: 42px; }
  #header .stuck .tesori-logo img { height: 38px; }
  /* Same drawn icon as desktop; the theme glyph is unreliable. */
  #header .mobile-nav .icon-menu { display: none !important; }
  #header .mobile-nav .nav-icon > a {
    min-width: 44px; min-height: 44px; display: inline-flex !important; align-items: center;
    color: var(--hdr-ink) !important;
  }
  #header .mobile-nav .nav-icon > a::before {
    content: ""; width: 26px; height: 14px;
    background:
      linear-gradient(currentColor, currentColor) left top / 100% 1.5px no-repeat,
      linear-gradient(currentColor, currentColor) left center / 100% 1.5px no-repeat,
      linear-gradient(currentColor, currentColor) left bottom / 66% 1.5px no-repeat;
  }
  #header.transparent .header-wrapper:not(.stuck) .mobile-nav .nav-icon > a { color: #fff !important; }
  #header .bookho a { min-height: 38px; padding: 0 16px !important; font-size: 11px !important; border-radius: 5px !important; }
}

@media (prefers-reduced-motion: reduce) {
  #header *, #header *::after { transition: none !important; }
}

/* Off-canvas menu panel uses the same beige as the header. */
.off-canvas .mfp-content,
.off-canvas-left .mfp-content,
#main-menu.mobile-sidebar { background-color: var(--hdr-bg) !important; }