/* ThatsKrispy shared site header (v4 design) — replaces the Pixieset theme nav.
   Also carries the site-wide type foundation: this file is the only stylesheet
   loaded by all 21 pages, so the fonts live here and every page inherits them.
   Theme link rules (.color_scheme-2 a) repaint anchors, so every color here is
   !important. */

@font-face { font-family: "Satoshi"; font-weight: 400; font-style: normal; font-display: swap; src: url(/fonts/satoshi-400.woff2) format("woff2"); }
@font-face { font-family: "Satoshi"; font-weight: 500; font-style: normal; font-display: swap; src: url(/fonts/satoshi-500.woff2) format("woff2"); }
@font-face { font-family: "Satoshi"; font-weight: 700; font-style: normal; font-display: swap; src: url(/fonts/satoshi-700.woff2) format("woff2"); }
@font-face { font-family: "Satoshi"; font-weight: 900; font-style: normal; font-display: swap; src: url(/fonts/satoshi-900.woff2) format("woff2"); }

/* One Caslon italic under both legacy names. The clone pages and the custom
   pages each grew their own alias for the same file, so declaring both keeps
   old rules working instead of silently dropping them to Georgia. ("Caslon
   Text" is the separate roman face, declared in about.css where it is used.) */
@font-face { font-family: "Caslon Ital"; font-weight: 400; font-style: italic; font-display: swap; src: url(/fonts/i4.woff2) format("woff2"); }
@font-face { font-family: "LTC Caslon"; font-weight: 400; font-style: italic; font-display: swap; src: url(/fonts/i4.woff2) format("woff2"); }

:root {
  --tk-sans: "Satoshi", "Helvetica Neue", Arial, sans-serif;
  --tk-ital: "Caslon Ital", Georgia, serif;
}

/* ---------- site-wide type system ----------
   Satoshi carries everything; Caslon italic is the accent only. The Pixieset
   theme set all 19 of its font vars to Caslon at weight 400, which put a serif
   in the navigation, the buttons, and the form labels. Retargeting the vars
   converts every cloned page at once, and the weights below replace the 400
   the theme assumed for a serif. */
:root {
  --site-title_font-family: var(--tk-sans);
  --navigation_font-family: var(--tk-sans);
  --sub-navigation_font-family: var(--tk-sans);
  --secondary-navigation_font-family: var(--tk-sans);
  --overlay-navigation_font-family: var(--tk-sans);
  --overlay-sub-navigation_font-family: var(--tk-sans);
  --display-heading_font-family: var(--tk-sans);
  --display-subtitle_font-family: var(--tk-sans);
  --heading-1_font-family: var(--tk-sans);
  --heading-2_font-family: var(--tk-sans);
  --heading-3_font-family: var(--tk-sans);
  --heading-4_font-family: var(--tk-sans);
  --heading-5_font-family: var(--tk-sans);
  --heading-6_font-family: var(--tk-sans);
  --paragraph-1_font-family: var(--tk-sans);
  --paragraph-2_font-family: var(--tk-sans);
  --paragraph-3_font-family: var(--tk-sans);
  --button_font-family: var(--tk-sans);
  --form-label_font-family: var(--tk-sans);
  --pullquote_font-family: var(--tk-ital);

  --display-heading_font-weight: 900;
  --heading-1_font-weight: 900;
  --heading-2_font-weight: 900;
  --heading-3_font-weight: 700;
  --heading-4_font-weight: 700;
  --heading-5_font-weight: 700;
  --heading-6_font-weight: 700;
  --button_font-weight: 700;
  --form-label_font-weight: 700;

  /* Satoshi 900 needs the tracking pulled in at display sizes; Caslon did not. */
  --display-heading_letter-spacing: -0.025em;
  --heading-1_letter-spacing: -0.025em;
  --heading-2_letter-spacing: -0.02em;
}

/* Caslon italic stays the accent inside headings, matching the home page. */
h1 em, h2 em, h3 em,
.display-heading em, .heading-1 em, .heading-2 em {
  font-family: var(--tk-ital);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
}

/* kill the theme header + its overlay menu */
.element-header-menu, .overlay-menu__wrapper, .overlay-menu__tint { display: none !important; }

.tkh, .tkh * { box-sizing: border-box; font-family: "Satoshi", "Helvetica Neue", Arial, sans-serif; }
.tkh {
  position: sticky; top: 0; z-index: 9999;
  display: flex; align-items: center; gap: 2rem;
  background: rgba(246, 245, 241, 0.92);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid #e5e2da; padding: 0 4vw; height: 4.25rem;
  transition: box-shadow 0.3s;
}
.tkh.scrolled { box-shadow: 0 14px 34px -24px rgba(16, 16, 16, 0.35); }
.tkh a { text-decoration: none !important; }
.tkh-mark { display: inline-flex; align-items: center; white-space: nowrap; }
.tkh-logo { display: block; height: 3.4rem; width: auto; transition: opacity 0.2s; }
.tkh-mark:hover .tkh-logo { opacity: 0.75; }
.tkh-nav { display: flex; align-items: center; gap: 1.9rem; margin: 0 auto; }
.tkh-nav > a, .tkh-drop > summary {
  font-weight: 500; font-size: 0.98rem; color: #3c3a36 !important;
  padding: 0.2rem 0; position: relative; transition: color 0.2s; line-height: 1.4;
}
.tkh-nav > a:hover, .tkh-drop > summary:hover { color: #141414 !important; }
.tkh-nav > a.active { color: #141414 !important; font-weight: 700; }
.tkh-nav > a.active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -0.35rem;
  height: 2px; background: #d92323; border-radius: 2px;
}
.tkh-drop { position: relative; }
.tkh-drop > summary { list-style: none; cursor: pointer; color: #3c3a36; }
.tkh-drop > summary::-webkit-details-marker { display: none; }
.tkh-drop > summary::after {
  content: ""; display: inline-block; margin-left: 0.45rem; width: 0.42rem; height: 0.42rem;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px); transition: transform 0.2s;
}
.tkh-drop[open] > summary::after { transform: rotate(225deg) translateY(-1px); }
.tkh-drop > summary.active { color: #141414 !important; font-weight: 700; }
.tkh-drop > summary.active::before {
  content: ""; position: absolute; left: 0; right: 1rem; bottom: -0.35rem;
  height: 2px; background: #d92323; border-radius: 2px;
}
.tkh-drop-menu {
  position: absolute; top: calc(100% + 0.9rem); left: 50%; transform: translateX(-50%);
  background: #fffdf8; border: 1px solid #e5e2da; border-radius: 16px;
  box-shadow: 0 30px 60px -24px rgba(16, 16, 16, 0.32); padding: 0.65rem;
  display: grid; grid-template-columns: repeat(2, minmax(10.5rem, 1fr)); gap: 1px 0.35rem;
  z-index: 10000; animation: tkhDropIn 0.22s cubic-bezier(0.22, 0.61, 0.36, 1);
}
@keyframes tkhDropIn { from { opacity: 0; transform: translate(-50%, -6px); } to { opacity: 1; transform: translate(-50%, 0); } }
.tkh-drop-menu a {
  display: flex; align-items: center; gap: 0.55rem;
  padding: 0.52rem 0.8rem; border-radius: 10px; font-weight: 500; font-size: 0.94rem;
  color: #3c3a36 !important;
}
.tkh-drop-menu a::before {
  content: ""; width: 0.4rem; height: 0.4rem; border-radius: 1px;
  background: #d5d1c7; flex: none; transition: background 0.15s, transform 0.15s;
}
.tkh-drop-menu a:hover { background: #f3f2ee; color: #141414 !important; }
.tkh-drop-menu a:hover::before { background: #d92323; transform: rotate(45deg); }
@media (prefers-reduced-motion: reduce) { .tkh-drop-menu { animation: none; } }
.tkh-right { display: flex; align-items: center; gap: 1.3rem; white-space: nowrap; }
.tkh-phone { font-weight: 700; font-size: 0.95rem; color: #141414 !important; font-variant-numeric: tabular-nums; }
.tkh-phone:hover { color: #d92323 !important; }
.tkh-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.58rem 1.2rem; border-radius: 10px; background: #d92323;
  color: #fff !important; font-weight: 700; font-size: 0.88rem;
  transition: background 0.25s, transform 0.25s;
}
.tkh-btn:hover { background: #141414; transform: translateY(-1px); }

/* burger + mobile overlay */
.tkh-burger {
  display: none; flex-direction: column; justify-content: center; gap: 0.32rem;
  width: 2.75rem; height: 2.75rem; padding: 0.6rem;
  background: transparent; border: 0; cursor: pointer;
}
.tkh-burger span { display: block; height: 2px; background: #141414; border-radius: 2px; transition: transform 0.25s, opacity 0.25s; }
html.tkh-open .tkh-burger span:nth-child(1) { transform: translateY(0.34rem) rotate(45deg); }
html.tkh-open .tkh-burger span:nth-child(2) { transform: translateY(-0.34rem) rotate(-45deg); }
.tkh-sheet {
  position: fixed; inset: 4.25rem 0 0 0; z-index: 9998; display: none;
  background: #f6f5f1; overflow-y: auto; padding: 1.6rem 6vw 3rem;
}
html.tkh-open .tkh-sheet { display: block; }
html.tkh-open { overflow: hidden; }
.tkh-sheet, .tkh-sheet * { box-sizing: border-box; font-family: "Satoshi", "Helvetica Neue", Arial, sans-serif; }
.tkh-sheet a { text-decoration: none !important; }
.tkh-sheet > a {
  display: block; padding: 0.9rem 0; border-bottom: 1px solid #e5e2da;
  font-weight: 700; font-size: 1.25rem; color: #141414 !important;
}
.tkh-sheet > a.active { color: #d92323 !important; }
.tkh-sheet-group { border-bottom: 1px solid #e5e2da; padding: 0.9rem 0; }
.tkh-sheet-group > p { margin: 0 0 0.4rem; font-weight: 700; font-size: 1.25rem; color: #141414; }
.tkh-sheet-group a {
  display: inline-block; padding: 0.34rem 0.75rem; margin: 0.18rem 0.25rem 0.18rem 0;
  border: 1px solid #d5d1c7; border-radius: 9px;
  font-weight: 500; font-size: 0.92rem; color: #3c3a36 !important;
}
.tkh-sheet-group a:hover { border-color: #141414; color: #141414 !important; }
.tkh-sheet-cta { margin-top: 1.4rem; display: flex; flex-direction: column; gap: 0.7rem; }
.tkh-sheet-cta .tkh-btn { justify-content: center; padding: 0.85rem 1.2rem; font-size: 1rem; }
.tkh-sheet-cta .tkh-phone { text-align: center; font-size: 1.05rem; }

@media (max-width: 1020px) {
  .tkh { justify-content: space-between; }
  .tkh-nav { display: none; }
  .tkh-burger { display: flex; }
}
@media (max-width: 560px) { .tkh-right .tkh-phone { display: none; } }

/* ---------------------------------------------------------------- EN/ES language switch
   Injected into .tkh-right by js/i18n.js rather than pasted into 22 files. Sits before
   the phone number so it survives the 560px breakpoint that hides the phone. */
.langsw { display: inline-flex; flex: none; border: 1px solid #d5d0c4; border-radius: 999px;
  overflow: hidden; background: #fffdf8; margin-right: 4px; }
.langsw button { font-family: var(--tk-sans, "Satoshi", Arial, sans-serif); font-size: 11px;
  font-weight: 700; letter-spacing: .06em; padding: 5px 9px; border: 0; background: none;
  color: #6f6a60; cursor: pointer; line-height: 1.4; transition: background .2s, color .2s; }
.langsw button + button { border-left: 1px solid #ebe7dd; }
.langsw button[aria-pressed="true"] { background: #232323; color: #fffdf8; }
.langsw button:hover:not([aria-pressed="true"]) { color: #232323; }
[data-lang][hidden] { display: none !important; }
@media (max-width: 400px) { .langsw button { padding: 5px 7px; font-size: 10.5px; } }