/* World of Smiles Pediatric Dentistry
   One stylesheet for the whole site.
   Desktop (1000px and wider) matches the old Wix site measurement for measurement:
   a 980px-wide column centered on the screen, with full-width color bands.
   Below 1000px everything reflows into a phone/tablet layout. */

:root {
  --teal: #008acd;        /* header + footer */
  --nav: #3c9fd6;         /* menu bar */
  --sky: #f0f5fb;         /* page background */
  --purple: #b2258c;
  --yellow: #e0bf22;
  --green: #52b74e;
  --blue: #008acd;
  --orange: #eb212e;
  --review: #008acd;
  --ink: #292929;
  --gray: #666;
  --white: #fff;

  --script: "Lobster", "Reklame Script", cursive;          /* curly headings */
  --avenir: "Avenir", "Avenir Next", "Nunito Sans", "Segoe UI", sans-serif;
  --din: "DIN Next", "Barlow", "Helvetica Neue", Arial, sans-serif;
  --open: "Open Sans", "Segoe UI", Arial, sans-serif;
  --helv: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --black: "Arial Black", "Arial Bold", Gadget, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 125px; }
@media (max-width: 999.98px) { html { scroll-padding-top: 90px; } }
body { overflow-wrap: break-word; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; margin: 0; background: var(--sky); color: var(--ink); font-family: var(--open); font-size: 16px; line-height: 1.4; }
img, svg { display: block; max-width: 100%; }
img { height: auto; -webkit-user-drag: none; -webkit-touch-callout: none; user-select: none; }  /* no long-press "Save image" on phones */
a { color: inherit; }
a[href^="tel:"] { white-space: nowrap; }  /* never split a phone number across two lines */
h1, h2, h3, h4, h5, h6, p, ul, ol, figure, address, blockquote { margin: 0; }
address { font-style: normal; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: #fff; padding: 8px 12px; }
.skip:focus { left: 8px; }
.script { font-family: var(--script); font-weight: 400; letter-spacing: -0.035em; line-height: 1.2;
  font-variant-ligatures: no-common-ligatures no-discretionary-ligatures no-contextual; font-feature-settings: "liga" 0, "calt" 0, "dlig" 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Yellow notes that mark things for Mom to decide. Remove before launch. */
.flag { background: #fff3a3; color: #5a4500; border: 2px dashed #b38f00; font: 700 13px/1.3 var(--open); padding: 6px 10px; border-radius: 6px; }
.w { width: 100%; max-width: 980px; margin: 0 auto; position: relative; }

/* ---------- Announcement bar (src/announcements.json) ---------- */
.notice { background: var(--yellow); color: #222; }
.notice-closed { background: var(--purple); color: #fff; }
.notice-info { background: var(--teal); color: #fff; }
.notice-in { max-width: 980px; margin: 0 auto; padding: 10px 16px; position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; }
.notice-in > svg { width: 22px; height: 22px; flex: none; }
.notice p { font: 700 16px/1.4 var(--open); text-align: center; }
.notice a { color: inherit; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; margin-left: 6px; }
.notice + .notice .notice-in { border-top: 1px solid rgba(0, 0, 0, .12); }
@media (max-width: 999.98px) { .notice p { font-size: 15px; text-align: left; } .notice-in { justify-content: flex-start; } }
/* "event" style: World of Smiles blue banner with dashed edges, a picture and a green button (Santa visit etc.) */
.notice-event { background: var(--blue); color: #fff; border-top: 5px dashed #000; border-bottom: 5px dashed #000; }
.notice-event .notice-in { padding-top: 12px; padding-bottom: 12px; gap: 16px; }
.notice-art { width: 56px; height: 56px; flex: none; }
.notice-art-tall { width: auto; height: 92px; margin: -10px 0; } /* the Santa hippo (Nov 7): a bit taller than the emoji art */
.notice-event p { font: 800 19px/1.35 var(--avenir); text-shadow: 0 1px 2px rgba(0, 0, 0, .25); }
.notice-event .notice-btn { display: inline-block; background: #52b74e; color: #000; text-decoration: none; text-shadow: none;
  font: 800 16px/1 var(--avenir); border: 2px solid #000; border-radius: 99px; padding: 8px 16px; margin-left: 12px; vertical-align: middle; }
.notice-event .notice-btn:hover { background: #fff; }
.notice-event + .notice .notice-in { border-top: 0; }
@media (max-width: 999.98px) {
  .notice-art { width: 44px; height: 44px; }
  .notice-art-tall { width: auto; height: 66px; margin: -6px 0; }
  .notice-event p { font-size: 16px; }
  .notice-event .notice-btn { display: table; margin: 8px 0 0; font-size: 15px; }
}

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--teal); }
.hdr-contact a { color: #fafafa; font: 700 13px/18px var(--open); }
.social { list-style: none; padding: 0; display: flex; }
/* English / Español button */
.lang-switch { display: flex; align-items: center; justify-content: center; gap: 5px; height: 28px; padding: 0 10px; border: 1.5px solid #fff;
  border-radius: 999px; color: #fff; font: 700 13px/1 var(--open); text-decoration: none; white-space: nowrap; }
.lang-switch svg { width: 16px; height: 16px; flex: none; }
.lang-switch:hover, .lang-switch:focus-visible { background: rgba(255, 255, 255, .18); }
.ls-short { display: none; }
.social a { display: block; }
.social svg { width: 100%; height: 100%; }

/* ---------- Footer ---------- */
.site-footer { background: var(--teal); color: #fafafa; font: 700 14px/19px var(--open); }
.site-footer a { color: #fafafa; }
.site-footer a.plain { text-decoration: none; }

/* ---------- Google reviews box (src/partials/reviews.html) ---------- */
.h-reviews ul { list-style: none; padding: 0; background: var(--review); display: grid; }
.h-reviews li { color: #fff; }
.h-who { display: flex; gap: 8px; align-items: center; font: 400 14px/1.2 var(--open); }
.h-who b { display: block; font-weight: 400; font-size: 14px; }
.h-who time { display: block; font-weight: 700; font-size: 11px; }
.h-av { width: 32px; height: 32px; border-radius: 50%; background: rgba(255, 255, 255, .85); color: var(--review); display: grid; place-items: center; font: 700 15px/1 var(--open); flex: none; }
.h-reviews blockquote { position: relative; margin: 14px 0 0; background: #e6f6fc; color: #333; font: 400 12px/1.55 var(--open); padding: 12px 10px; border-radius: 2px; }
.h-reviews blockquote::before { content: ""; position: absolute; left: 14px; top: -8px; border: 8px solid transparent; border-top: 0; border-bottom-color: #e6f6fc; }

/* ---------- SCHEDULE / CONTACT / FORMS strip (src/partials/actions.html) ---------- */
.act { display: block; color: var(--ink); text-decoration: none; text-align: center; }
.act-label { display: block; font: 700 30px/36px var(--helv); letter-spacing: .3px; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.act-icon { display: block; color: #000; }
.act-icon svg { width: 100%; height: 100%; }

/* ---------- Side menu of jump links (Discover, Explore, ...) ---------- */
.anchors { position: fixed; right: 20px; top: 50%; transform: translateY(-50%); z-index: 40; display: flex; flex-direction: column; align-items: flex-end; gap: 2.6px; }
.anchors a { display: flex; align-items: center; gap: 10px; height: 22px; text-decoration: none; color: #6e6e6e; font: 300 16px/22.4px "American Typewriter", "Courier Prime", "Courier New", serif; }
.anchors a::after { content: ""; width: 12px; height: 12px; border-radius: 50%; border: 2px solid #333; box-sizing: border-box; flex: none; }
.anchors a[aria-current]::after, .anchors a:hover::after { background: #333; }
.anchors span { padding-right: 0; }

/* ---------- Scaffolded pages (tools/scaffold.py): text blocks, pictures and videos ---------- */
.t { overflow-wrap: break-word; }
.t :is(h1, h2, h3, h4, h5, h6) { font: inherit; letter-spacing: inherit; color: inherit; }
.t .c { text-align: center; }
.t p.gap { height: max(1lh, 20.4px); }  /* Wix blank lines */
.t [class^="fs"] { line-height: normal; }
.t ul, .t ol { padding-left: 1.3em; }
.t a { color: inherit; text-decoration: none; }
.t a.u, .t u a, .t a:hover { text-decoration: underline; }
.gen .yt { border: 0; display: block; }
.social-color { justify-content: center; }
.social-color svg { padding: 6px; }
.embed-reviews .h-reviews .w { height: auto; padding: 0; max-width: none; }
.embed-reviews .h-reviews ul { width: 100% !important; margin: 0 !important; }
.btn { display: flex; align-items: center; justify-content: center; text-align: center; text-decoration: none; cursor: pointer; }
.btn:hover { filter: brightness(1.08); }
.gen img { object-fit: cover; }

/* ---------- Green arrow buttons (Discover tours, Explore gallery) and slideshow dots ---------- */
.slide-btn { position: absolute; top: calc(51px + 50%); width: 48px; height: 48px; transform: translateY(-50%); border-radius: 50%;
  background: #52b74e; border: 3px solid #000; box-shadow: 0 4px 0 #000; z-index: 2; }
.slide-btn::before { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; border: solid #000; border-width: 0 4px 4px 0; }
.slide-btn.next { right: 12px; }
.slide-btn.next::before { transform: translate(-65%, -50%) rotate(-45deg); }
.slide-btn.prev { left: 12px; }
.slide-btn.prev::before { transform: translate(-35%, -50%) rotate(135deg); }
.slide-btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.slide-btn:active { box-shadow: 0 1px 0 #000; transform: translateY(calc(-50% + 3px)); }
/* dots: which photo you're on */
.slide-dots { position: absolute; left: 0; right: 0; bottom: 12px; display: flex; justify-content: center; gap: 7px; z-index: 2; pointer-events: none; }
.slide-dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .75); box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .55); transition: background .25s, scale .3s; }
.slide-dots i.on { background: #52b74e; scale: 1.35; box-shadow: 0 0 0 1.5px #000; }

/* ---------- Pop-ups (SCHEDULE / CONTACT) ---------- */
.pop { border: 0; padding: 0; background: var(--sky); color: var(--ink); overflow: visible; }
.pop::backdrop { background: rgba(0, 0, 0, .5); }
.pop-close { position: absolute; width: 44px; height: 44px; color: #000; }
.pop-close svg { width: 100%; height: 100%; }
.pop-band.green, .pop-cols .green { background: var(--green); }
.pop-band.yellow, .pop-cols .yellow { background: var(--yellow); }
.pop-band.purple, .pop-cols .purple { background: var(--purple); }
.pop-btn { display: flex; align-items: center; justify-content: center; background: var(--teal); color: #fff;
  border-radius: 50px; font: 400 19px/26.6px var(--black); text-decoration: none; }
.pop-btn.is-dead { cursor: default; }
.pop-cols { display: grid; color: #fff; text-align: center; font: 400 15px/20px var(--open); }
.pop-cols h2 { font: 400 22px/1.35 var(--open); }
.pop-cols p + p { margin-top: 20px; }
.pop-cols a { color: #fff; text-decoration: none; }
.pop-art { position: relative; }
.pop-art > span { position: absolute; color: #000; }
.pop-art svg { width: 100%; height: 100%; }

.pop-existing .pop-band { color: #fff; text-align: center; font: 400 17px/22.1px "Bai Jamjuree", var(--open); position: relative; }
.pop-existing .pop-band a { color: #fff; text-decoration: none; }
.pop-existing h2 { font-size: 34px; line-height: 47.6px; }
.pop-existing .px-mail { font-size: 26px; line-height: 33.8px; }
.pop-holidays .ph-box { background: var(--yellow); text-align: center; }
.ph-lead { font: 800 40px/48px var(--avenir); color: #fff; }
.ph-days { font: 400 24px/32px var(--open); color: #333; }

/* Spanish band pop-ups (Citas / Formularios) */
.pop-es .pop-band { color: #fff; position: relative; font: 400 15px/20px var(--open); }
.pop-es .pop-band a { color: #fff; text-decoration: none; }
.pop-es h2 { font: 400 20px/27px var(--open); }
.pop-es .pe-mail { font-size: 23px; line-height: 31px; }
.pop-es .pe-btn { font-size: 15px; line-height: 21px; }

/* ======================================================================
   DESKTOP: 1000px and wider (pixel match with the Wix site)
   ====================================================================== */
@media (min-width: 1000px) {
  .gen .w > * { position: absolute; }
  .gen .w > .mrow { display: contents; }
  .gen .mrow > * { position: absolute; }
  .script.wrap { white-space: normal; }
  .gen .t.script.ctr { display: flex; flex-direction: column; align-items: center; }
  .gen .w > a > img { width: 100%; height: 100%; }
  /* Headings never wrap on desktop; centered ones stay centered on the same point as on Wix
     even when the free font is a few pixels wider than the original. */
  .script { white-space: nowrap; }
  .script.c, .pop-title { display: flex; flex-direction: column; align-items: center; }
  .hdr { height: 113px; }
  .hdr-logo { position: absolute; left: 70px; top: 7px; width: 100px; }
  .hdr-logo img { width: 100px; height: 100px; }
  /* practice name in the empty space under the menu bar (same header height as Wix) */
  .hdr-name { position: absolute; left: 197px; top: 69px; width: 585px; text-align: center; color: #fff; text-decoration: none;
    font-size: 27px; line-height: 34px; white-space: nowrap; text-shadow: 0 1px 2px rgba(0, 0, 0, .25); }
  .menu-btn { display: none; }
  .menu-list { position: absolute; z-index: 3; left: 197px; top: 20px; width: 585px; height: 38px; list-style: none; margin: 0;
    padding: 0 5px 0 10px; display: flex; gap: 10px; background: var(--nav); box-shadow: 0 2px 3px rgba(0, 0, 0, .7); }
  /* the little folded-ribbon corners under each end of the menu bar */
  .menu-list::before, .menu-list::after { content: ""; position: absolute; top: 38px; border-style: solid; }
  .menu-list::before { left: 0; border-width: 0 10px 10px 0; border-color: transparent #1b4f58 transparent transparent; }
  .menu-list::after { right: 0; border-width: 0 0 10px 10px; border-color: transparent transparent transparent #1b4f58; }
  .menu-list > li { width: 106px; position: relative; }
  .menu-list > li > a, .menu-list > li > span { display: block; text-align: center; font: 300 16px/38px var(--din); color: #000; text-decoration: none; cursor: pointer; }
  .menu-list > li > a:hover, .menu-more:hover > span, .menu-more:focus-within > span { color: #fff; }
  .menu-sub { display: none; position: absolute; top: 38px; left: 0; min-width: 106px; list-style: none; padding: 0; margin: 0;
    background: var(--nav); box-shadow: 0 2px 3px rgba(0, 0, 0, .7); }
  .menu-more:hover .menu-sub, .menu-more:focus-within .menu-sub { display: block; }
  .menu-sub a { display: block; padding: 0 14px; font: 300 16px/38px var(--din); color: #000; text-decoration: none; white-space: nowrap; }
  .menu-sub a:hover { color: #fff; }
  /* Menu bar as green buttons (Ender picked option C, 2026-10-10); the page you're on is white */
  .menu-list { background: none; box-shadow: none; padding: 0; gap: 9px; height: 40px; }
  .menu-list::before, .menu-list::after { display: none; }
  .menu-list > li { width: auto; flex: 1; }
  .menu-list > li > a, .menu-list > li > span { height: 36px; font: 800 15.5px/31px var(--avenir); color: #000; background: #52b74e;
    border: 2.5px solid #000; border-radius: 99px; box-shadow: 0 3px 0 #000; transition: translate .2s, box-shadow .2s, background-color .2s; }
  .menu-list > li > a:hover, .menu-more:hover > span { color: #000; translate: 0 -2px; box-shadow: 0 5px 0 #000; background: #8bc77c; }
  .menu-list > li > a[aria-current] { background: #fff; }
  .menu-list > li > a::after, .menu-list > li > span::after { display: none; }
  .menu-sub { top: 44px; background: #fff; border: 2.5px solid #000; border-radius: 16px; box-shadow: 0 4px 0 #000; overflow: hidden; }
  .menu-sub a { font: 700 15.5px/38px var(--avenir); }
  .menu-sub a:hover { color: #000; background: #e6fde2; }

  .menu-list > li > span[aria-current] { background: #fff; }
  .lang-switch { position: absolute; left: 211px; top: 72px; width: 92px; }  /* left of the practice name (Ender, 2026-10-09) */
  .hdr-social { position: absolute; left: 792px; top: 22px; gap: 7px; }
  .hdr-social a { width: 30px; height: 30px; }
  .hdr-contact a { position: absolute; display: block; white-space: nowrap; }
  .hdr-contact a:first-child { left: 789px; top: 61px; width: 167px; text-align: center; }
  .hdr-contact a:last-child { left: 788px; top: 85px; width: 188px; text-align: center; }

  .ftr { height: 78px; }
  .ftr-logo { position: absolute; left: 124px; top: 7px; width: 64px; }
  .ftr-addr { position: absolute; left: 207px; top: 10px; width: 147px; text-align: center; }
  .ftr-addr a { display: block; text-decoration: none; }
  .ftr-social { position: absolute; left: 387px; top: 12px; gap: 23px; }
  .ftr-social a { width: 52px; height: 52px; }
  .ftr-contact { position: absolute; left: 763px; top: 10px; width: 202px; text-align: center; }
  .ftr-contact a { display: block; }
  .ftr-contact a + a { margin-top: 0; }
  .ftr-contact a:nth-child(n+2) { padding-left: 34px; }
  .ftr-contact a:nth-child(3) { margin-top: 3px; }

  /* Strip positions. The default is the most common layout; pages that differed on Wix get their own line. */
  .acts { --h: 260px; --sx: 64px; --sy: 37px; --sml: 36px; --sgap: 17px; --cx: 400px; --cy: 37px; --cml: 9px; --pin: 53px; --phone: 54px;
    --fx: 784px; --fy: 36px; --fml: 7px; --fgap: 15px; }
  /* BEGIN strip positions (generated from the Wix captures by tools/acts.py) */
  .page-home .acts { --h: 268px; --sx: 64px; --sy: 37px; --sml: 36px; --sgap: 21px; --cx: 400px; --cy: 37px; --cml: 9px; --pin: 57px; --phone: 56px; --fx: 784px; --fy: 36px; --fml: 7px; --fgap: 19px; }
  .page-discover .acts { --h: 233px; --sx: 76px; --sy: 52px; --sml: 35px; --sgap: 21px; --cx: 409px; --cy: 30px; --cml: 10px; --pin: 66px; --phone: 67px; --fx: 773px; --fy: 56px; --fml: 12px; --fgap: 14px; }
  .page-explore .acts { --h: 260px; --sx: 64px; --sy: 37px; --sml: 36px; --sgap: 17px; --cx: 400px; --cy: 37px; --cml: 9px; --pin: 52px; --phone: 54px; --fx: 784px; --fy: 36px; --fml: 7px; --fgap: 15px; }
  .page-service .acts { --h: 260px; --sx: 64px; --sy: 37px; --sml: 36px; --sgap: 17px; --cx: 400px; --cy: 37px; --cml: 9px; --pin: 52px; --phone: 53px; --fx: 784px; --fy: 36px; --fml: 7px; --fgap: 15px; }
  .page-resource .acts { --h: 260px; --sx: 64px; --sy: 37px; --sml: 36px; --sgap: 17px; --cx: 400px; --cy: 37px; --cml: 9px; --pin: 53px; --phone: 52px; --fx: 784px; --fy: 36px; --fml: 7px; --fgap: 15px; }
  .page-connection .acts { --h: 260px; --sx: 64px; --sy: 37px; --sml: 36px; --sgap: 17px; --cx: 400px; --cy: 37px; --cml: 9px; --pin: 53px; --phone: 52px; --fx: 784px; --fy: 36px; --fml: 7px; --fgap: 15px; }
  /* blog: no strip (StopIteration) */
  /* forms-kids: no strip (StopIteration) */
  /* schedule: no strip (StopIteration) */
  .page-review .acts { --h: 231px; --sx: 64px; --sy: 8px; --sml: 36px; --sgap: 17px; --cx: 400px; --cy: 8px; --cml: 9px; --pin: 53px; --phone: 52px; --fx: 784px; --fy: 7px; --fml: 7px; --fgap: 15px; }
  .page-grown-ups .acts { --h: 260px; --sx: 64px; --sy: 37px; --sml: 36px; --sgap: 17px; --cx: 400px; --cy: 37px; --cml: 9px; --pin: 53px; --phone: 52px; --fx: 784px; --fy: 36px; --fml: 7px; --fgap: 15px; }
  /* ortho: no strip (StopIteration) */
  .page-welcome .acts { --h: 415px; --sx: 64px; --sy: 38px; --sml: 36px; --sgap: 17px; --cx: 400px; --cy: 38px; --cml: 9px; --pin: 53px; --phone: 52px; --fx: 784px; --fy: 37px; --fml: 7px; --fgap: 15px; }
  /* hogar: no strip (StopIteration) */
  /* lazo-de-lengua: no strip (StopIteration) */
  .page-copy-of-home .acts { --h: 260px; --sx: 64px; --sy: 37px; --sml: 36px; --sgap: 17px; --cx: 400px; --cy: 37px; --cml: 9px; --pin: 53px; --phone: 52px; --fx: 784px; --fy: 36px; --fml: 7px; --fgap: 15px; }
  .page-copy-of-discover .acts { --h: 236px; --sx: 76px; --sy: 52px; --sml: 35px; --sgap: 21px; --cx: 409px; --cy: 30px; --cml: 10px; --pin: 67px; --phone: 66px; --fx: 773px; --fy: 56px; --fml: 12px; --fgap: 14px; }
  /* copy-of-forms: no strip (StopIteration) */
  /* END strip positions */
  .h-reviews .w { height: 355px; padding-top: 5px; }
  .h-reviews ul { width: 980px; margin-left: 3px; min-height: 264px; grid-template-columns: repeat(3, 1fr); gap: 30px; padding: 14px 15px 20px; }
  .page-review .act-label, .page-grown-ups .act-label, .page-welcome .act-label { text-decoration: none; }
  .acts .w { height: var(--h); }
  .act { position: absolute; }
  .act-sched { left: var(--sx); top: var(--sy); width: 167px; }
  .act-sched .act-icon { width: 105px; height: 105px; margin: 0 0 var(--sgap) var(--sml); }
  .act-contact { left: var(--cx); top: var(--cy); width: 178px; }
  .act-contact .act-label { width: 145px; margin-left: var(--cml); }
  .act-pin { position: absolute; left: 0; top: var(--pin); width: 78px; height: 105px; }
  .act-phone { position: absolute; left: 84px; top: var(--phone); width: 94px; height: 119px; transform: rotate(18deg); }
  .act-forms { left: var(--fx); top: var(--fy); width: 110px; }
  .act-forms .act-icon { width: 107px; height: 108px; margin: 0 0 var(--fgap) var(--fml); text-align: left; }
  .page-home .site-footer { margin-top: 43px; }
  .site-footer { margin-top: 0; }

  .pop-schedule { width: 812px; height: 498px; }
  .pop-schedule .pop-top { height: 147px; position: relative; }
  .pop-cal { position: absolute; left: 43px; top: 35px; width: 77px; height: 77px; color: #000; }
  .pop-schedule .pop-title { position: absolute; left: 167px; top: 50px; width: 508px; font-size: 38px; line-height: 45.6px; color: #fff; text-align: center; }
  .pop-schedule .pop-close { right: 22px; top: 32px; }
  .pop-band.green { height: 164px; padding: 29px 0 0 74px; }
  .pop-band.yellow { height: 43px; margin-top: -8px; }
  .pop-band.purple { height: 155px; padding: 15px 0 0 82px; position: relative; }
  .pop-btn { width: 672px; height: 106px; }
  .pop-schedule .flag { position: absolute; left: 82px; bottom: 6px; }
  .pop-existing { width: 820px; height: 511px; }
  .pop-existing .pop-top { height: 142px; position: relative; }
  .pop-existing .pop-title { position: absolute; left: 168px; top: 27px; width: 535px; font-size: 38px; line-height: 45.6px; color: #fff; text-align: center; white-space: nowrap; }
  .pop-existing .pop-close { right: 22px; top: 32px; }
  .pop-existing .pop-band.green { height: 172px; padding: 0; }
  .pop-existing .pop-band.yellow { height: 20px; margin: 0; }
  .pop-existing .pop-band.purple { height: 181px; padding: 0; }
  .pop-existing .pop-band > * { position: absolute; }
  .pop-existing .green h2 { left: 362px; top: 14px; }
  .pop-existing .green .px-addr { left: 93px; top: 60px; width: 226px; }
  .pop-existing .green .px-phone { left: 486px; top: 56px; width: 180px; }
  .pop-existing .green .px-mail { left: 191px; top: 128px; width: 416px; }
  .pop-existing .purple h2 { left: 358px; top: 16px; }
  .pop-existing .purple .px-addr { left: 75px; top: 66px; width: 224px; }
  .pop-existing .purple .px-phone { left: 492px; top: 66px; width: 178px; }
  .pop-existing .purple .px-mail { left: 178px; top: 123px; width: 424px; }
  .pop-holidays { width: 820px; height: 478px; }
  .pop-holidays .pop-title { position: absolute; left: 19px; top: 10px; width: 714px; font-size: 62px; line-height: 74.4px; color: #000; text-align: center; }
  .pop-holidays .pop-close { right: 22px; top: 22px; }
  .pop-holidays .ph-box { position: absolute; left: 34px; top: 107px; width: 752px; height: 356px; }
  .ph-lead { position: absolute; left: 32px; top: 15px; width: 689px; }
  .ph-days { position: absolute; left: 236px; top: 141px; width: 281px; }
  .pop-holidays .flag { position: absolute; left: 32px; bottom: 8px; }
  .pop-es { width: 820px; height: 504px; }
  .pop-es .pop-top { height: 142px; position: relative; }
  .pop-es .pop-title { position: absolute; left: 150px; top: 49px; width: 520px; font-size: 38px; line-height: 45.6px; color: #fff; text-align: center; }
  #pop-es-forms .pop-title { font-size: 49px; line-height: 58.8px; top: 40px; }
  .pop-es .pop-close { right: 22px; top: 32px; }
  .pop-es .pop-band.green { height: 164px; padding: 0; }
  .pop-es .pop-band.yellow { height: 43px; margin: 0; padding: 0; }
  .pop-es .pop-band.purple { height: 155px; padding: 0; }
  .pop-es .pop-band > * { position: absolute; }
  .pop-es h2 { left: 0; width: 460px; top: 7px; text-align: center; }
  .pop-es .pe-addr { left: 14px; top: 55px; width: 203px; text-align: center; }
  .pop-es .pe-phone { left: 243px; top: 55px; width: 156px; text-align: center; }
  .pop-es .pe-mail { left: 46px; top: 116px; width: 320px; }
  .pop-es .purple .pe-mail { top: 108px; }
  .pop-es .pe-btn { right: 66px; top: 22px; width: 201px; height: 106px; }
  .pop-es .purple .pe-btn { right: 39px; top: 18px; width: 256px; }
  .pop-es .flag { right: 20px; bottom: 4px; left: auto; }
  .pe-hours-flag { position: absolute; left: 20px; bottom: 6px; }
  .pop-contact { width: 820px; height: 557px; }
  .pop-contact .pop-title { position: absolute; left: 0; right: 0; top: 25px; text-align: center; font-size: 62px; line-height: 74.4px; color: #000; }
  .pop-contact .pop-close { right: 18px; top: 28px; }
  .pop-cols { position: absolute; left: 11px; top: 162px; height: 356px; grid-template-columns: 273px 249px 276px; }
  .pop-cols > div:not(.pop-art) { padding-top: 6px; }
  .pop-cols h2 { margin-bottom: 26px; }
  .pop-pin { left: 21px; top: 36px; width: 113px; height: 151px; }
  .pop-phone { left: 92px; top: 141px; width: 136px; height: 171px; transform: rotate(18deg); }
}

/* ======================================================================
   PHONE + TABLET: under 1000px
   ====================================================================== */
@media (max-width: 999.98px) {
  .d-only { display: none; }
  .h-reviews { order: 9; }
  .h-reviews .w { padding: 0; }
  .h-reviews ul { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; padding: 22px 16px 26px; }
  .h-reviews blockquote { font-size: 15px; }
  .gen .w { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 26px 18px 30px; }
  .gen .w > .t { width: 100%; max-width: 42em; }
  .gen .w > .t.script { text-align: center; }
  .gen .w > img, .gen .w > a > img { width: auto; max-width: 100%; height: auto; }
  .gen .yt { width: 100%; max-width: 640px; height: auto; aspect-ratio: 16 / 9; }
  .gen .box { display: none; }
  .gen .mrow { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; width: 100%; }
  .gen .mrow > a > img, .gen .mrow > img { width: auto; max-width: 88px; height: auto; }
  .gen .btn { padding: 12px 22px; min-height: 48px; }
  .gen .social-color a { width: 44px !important; height: 44px !important; }
  .anchors { display: none; }
  .hdr { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 4px 12px; padding: 8px 16px; }
  .hdr-logo { width: 70px; grid-row: 1 / 3; }
  .hdr-name { display: none; }
  .hdr-contact { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; }
  .hdr-contact a { font-size: 13px; line-height: 20px; }
  .hdr-social { grid-column: 2; grid-row: 2; gap: 10px; }
  .hdr-social a { width: 26px; height: 26px; }
  .menu { grid-column: 3; grid-row: 1; }
  .lang-switch { grid-column: 3; grid-row: 2; height: 26px; padding: 0 7px; gap: 3px; font-size: 12px; justify-self: center; }
  .lang-switch svg { width: 14px; height: 14px; }
  .ls-long { display: none; } .ls-short { display: inline; }
  .menu-btn { width: 48px; height: 40px; display: grid; place-items: center; color: #fff; border-radius: 10px; }
  .menu-btn svg { width: 32px; height: 32px; }
  .menu-btn[aria-expanded="true"] { background: rgba(255, 255, 255, .15); }
  .menu-list { display: none; position: absolute; left: 0; right: 0; top: 100%; list-style: none; margin: 0; padding: 8px 16px 16px;
    background: var(--nav); box-shadow: 0 6px 10px rgba(0, 0, 0, .3); }
  .menu-btn[aria-expanded="true"] + .menu-list { display: block; }
  .menu-list a, .menu-list span { display: block; padding: 12px 4px; font: 400 20px/1.2 var(--din); color: #000; text-decoration: none;
    border-bottom: 1px solid rgba(0, 0, 0, .12); }
  .menu-more > span { display: none; }
  .menu-list a[aria-current] { font-weight: 700; box-shadow: inset 4px 0 0 #52b74e; padding-left: 12px; }
  .menu-sub { list-style: none; padding: 0; }
  .menu-sub li:last-child a { border-bottom: 0; }

  .ftr { display: grid; justify-items: center; gap: 14px; padding: 24px 16px 28px; text-align: center; }
  .ftr-logo { width: 64px; }
  .ftr-addr a { display: block; text-decoration: none; }
  .ftr-social { gap: 14px; }
  .ftr-social a { width: 44px; height: 44px; }
  .ftr-contact a { display: block; padding: 3px 0; }

  .acts .w { display: grid; grid-template-columns: repeat(3, 1fr); padding: 22px 12px 26px; gap: 8px; align-items: end; }
  .act { display: flex; flex-direction: column; align-items: center; gap: 8px; }
  .act-label { font-size: clamp(16px, 4.6vw, 26px); line-height: 1.2; text-decoration-thickness: 1.5px; }
  .act-sched .act-icon, .act-forms .act-icon { width: clamp(48px, 14vw, 80px); height: clamp(48px, 14vw, 80px); }
  .act-contact { display: grid; grid-template-columns: auto auto; justify-content: center; column-gap: 2px; }
  .act-contact .act-label { grid-column: 1 / -1; grid-row: 2; }
  .act-pin { width: clamp(30px, 9vw, 52px); height: clamp(42px, 12vw, 70px); }
  .act-phone { width: clamp(34px, 10vw, 58px); height: clamp(44px, 13vw, 74px); transform: rotate(18deg); }

  .pop { width: min(560px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow: auto; }
  .pop-close { right: 6px; top: 6px; }
  .pop-schedule .pop-top { position: relative; display: flex; align-items: center; gap: 12px; padding: 16px 56px 16px 16px; }
  .pop-cal { width: 52px; flex: none; color: #000; }
  .pop-schedule .pop-title { font-size: 26px; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
  .pop-band { padding: 18px 16px; }
  .pop-band.yellow { padding: 10px; }
  .pop-btn { min-height: 64px; padding: 10px 18px; font-size: 17px; text-align: center; }
  .pop-schedule .flag { margin-top: 10px; }
  .pop-contact .pop-title { font-size: 34px; text-align: center; padding: 18px 52px 14px; color: #000; }
  .pop-existing .pop-top { position: relative; display: flex; align-items: center; gap: 12px; padding: 16px 56px 16px 16px; }
  .pop-existing .pop-title { font-size: 22px; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
  .pop-existing .pop-title br { display: none; }
  .pop-existing .pop-band > * + * { margin-top: 8px; }
  .pop-existing .px-mail { font-size: 18px; line-height: 1.4; }
  .pop-es .pop-top { position: relative; display: flex; align-items: center; gap: 12px; padding: 16px 56px 16px 16px; }
  .pop-es .pop-title { font-size: 24px; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
  .pop-es .pop-band > * + * { margin-top: 8px; }
  .pop-es .pe-mail { font-size: 18px; }
  .pop-es .pe-btn { display: flex; min-height: 54px; }
  .pe-hours-flag { margin: 0 16px 16px; }
  .pop-holidays .pop-title { font-size: 30px; text-align: center; padding: 18px 52px 12px; color: #000; }
  .pop-holidays .ph-box { padding: 18px 16px 22px; }
  .ph-lead { font-size: 24px; line-height: 1.25; }
  .ph-days { margin-top: 14px; font-size: 20px; line-height: 1.5; }
  .pop-holidays .flag { margin-top: 12px; }
  .pop-cols { grid-template-columns: 1fr; }
  .pop-cols > div:not(.pop-art) { padding: 18px 16px 22px; }
  .pop-cols h2 { margin-bottom: 12px; }
  .pop-art { display: none; }
}

/* Very small phones (320-370px wide): tighten the header so the email address and buttons fit */
@media (max-width: 370px) {
  .hdr { gap: 4px 8px; padding: 8px 10px; }
  .hdr-logo { width: 56px; }
  .hdr-logo img { width: 56px; height: 56px; }
  .hdr-contact a { font-size: 12px; }
  .hdr-social { gap: 8px; }
  .hdr-social a { width: 24px; height: 24px; }
  .menu-btn { width: 44px; }
  .lang-switch { padding: 0 5px; }
}

/* Guide pages (/guides/...): plain answer-first articles, new pages that never existed on Wix */
.guide { padding: 40px 16px 56px; }
.guide .w { max-width: 760px; margin: 0 auto; background: #fff; border: 3px dashed #000; border-radius: 22px; padding: 28px clamp(18px, 4vw, 44px) 34px; }
.guide h1 { font-size: clamp(34px, 6vw, 50px); text-align: center; margin: 0 0 8px; white-space: normal !important; }
.guide .lede { font: 600 19px/1.55 var(--open); color: #222; }
.guide h2 { font: 800 24px/1.3 var(--avenir); color: #008acd; margin: 30px 0 8px; }
.guide p, .guide li { font: 400 17px/1.65 var(--open); color: #333; }
.guide ul, .guide ol { padding-left: 1.3em; }
.guide li + li { margin-top: 4px; }
.guide a { color: #00657b; font-weight: 600; }
.guide .call { background: #f0f5fb; border-radius: 14px; padding: 14px 18px; margin-top: 28px; }
.guide .flag { margin: 0 0 18px; }

/* ---------- Santa visit page (/santa) ---------- */
.santa { padding: 40px 16px 56px; }
.santa .w { max-width: 760px; background: var(--blue); color: #fff; border: 6px dashed #000; border-radius: 26px;
  padding: 26px clamp(18px, 4vw, 44px) 34px; text-align: center; }
.santa .flag { text-align: left; margin-bottom: 14px; }
.santa h1 { font-size: clamp(44px, 9vw, 72px); color: #fff; text-shadow: 0 3px 0 #000; margin: 0 0 6px; white-space: normal !important; }
.santa-lede { font: 700 clamp(18px, 2.6vw, 22px)/1.45 var(--avenir); max-width: 560px; margin: 0 auto; }
.santa-photo { width: min(420px, 100%); aspect-ratio: 4 / 3; margin: 24px auto; background: #fff; border: 6px solid #000;
  border-radius: 22px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.santa-photo img { width: 55%; height: auto; }
.santa-photo img.photo { width: 100%; height: 100%; object-fit: cover; }
.santa-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 0; }
.santa-facts div { background: #fff; color: var(--ink); border: 3px solid #000; border-radius: 16px; padding: 12px 10px; }
.santa-facts dt { font: 800 13px/1 var(--avenir); text-transform: uppercase; letter-spacing: .08em; color: var(--blue); }
.santa-facts dd { margin: 6px 0 0; font: 800 18px/1.35 var(--avenir); }
.santa-facts a { color: inherit; }
.santa-invite { font: 800 20px/1.4 var(--avenir); margin-top: 22px; }
.santa-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 18px; }
.santa-btn { background: #52b74e; color: #000; border: 3px solid #000; border-radius: 99px; padding: 12px 22px;
  font: 800 17px/1 var(--avenir); text-decoration: none; }
.santa-btn.alt { background: #fff; }
.santa-btn:hover { filter: brightness(1.05); transform: translateY(-1px); }
@media (max-width: 640px) { .santa-facts { grid-template-columns: 1fr; } }

/* Phones: long notices start folded (site.js adds the button) */
.fold-btn { display: none; }
@media (max-width: 999.98px) {
  .folded:not(.unfolded) { max-height: 190px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
  .fold-btn { display: block; margin: -6px auto 0; padding: 11px 18px; border: 2px solid var(--teal); border-radius: 99px; background: #fff;
    color: #00657b; font: 700 15px/1.3 var(--open); text-align: center; max-width: 100%; }
}

/* Vietnamese draft (/vi): Avenir (a Mac system font) is missing some Vietnamese letters, so those pages use Nunito Sans,
   which ships with its Vietnamese letters (fonts.css). English and Spanish keep Avenir. */
html[lang="vi"] { --avenir: "Nunito Sans", "Avenir Next", Avenir, "Segoe UI", sans-serif; }

/* Google maps: Google's white place card (top left) is cropped off; the map, the pin and Google's own credit line
   (bottom) stay. "Expand" / "Open in Google Maps" buttons sit outside the map. (Ender, 2026-10-11) */
.gmap-crop { position: relative; overflow: hidden; display: block; }
.gmap-crop > iframe { position: absolute; left: 0; top: -104px; width: 100%; height: calc(100% + 104px); border: 0; display: block; }

/* Never let text run off the page (Mom + Ender, Oct 25): long words, links and e-mail addresses wrap, tables/pre scroll inside their box */
p, li, dd, dt, h1, h2, h3, h4, summary, figcaption, blockquote, td, th, a { overflow-wrap: break-word; }
.cx-prose, .cx-card, .guide .w { min-width: 0; overflow-wrap: break-word; }
.cx-prose [dir="rtl"], .cx-legal p { unicode-bidi: plaintext; }
.santa-photo.santa-ad { width: min(460px, 100%); aspect-ratio: 4 / 5; border: 0; border-radius: 0; background: none; box-shadow: 0 6px 0 rgba(0,0,0,.25); }