/* The theme's own rules for WordPress (not part of the v16 mockup's CSS). Loaded last. */

/* WordPress wraps the whole page in .wp-site-blocks and spaces its children apart;
   v16's header, sections and footer sit directly on the page. */
.wp-site-blocks{padding:0}
.wp-site-blocks>*{margin-block:0}

/* The catalog photos are links to each design's page (v16 had buttons): same look. */
a.arch.lb-open{display:block;cursor:zoom-in;color:inherit}
.cat a.arch,.strip a.arch{width:calc(100% - 14px)}

/* One design's own page (v16 had none; it shows the photo the way the catalog does, larger). */
.cat.one>figure{flex-basis:min(100%,460px)}
.item-nav{display:flex;flex-wrap:wrap;gap:4px 28px;margin-top:34px}

/* Review Focus 1, a fix on top of v16: with the phone's text at 200 percent (about 195 px of
   layout width) v16's Call button kept the number on one line and pushed the Text button off
   the screen. Both buttons now share the bar equally and the number may wrap. Normal text
   sizes are not affected. */
.bar{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:260px){.bar .bl small{white-space:normal}.bar .btn{min-width:0}}

/* Same check, home hero: v16's hero column could not shrink below its widest unbreakable line,
   so at 200 percent text the name, the lede and the buttons ran off the right edge. On phones
   the column may now shrink; at that width the name gets the size v16 gives page headings. */
@media (max-width:899px){.hero .grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:260px){.hero h1{font-size:48px}.thumbs .facts{white-space:normal}}

/* The request form (inc/requests.php): the honeypot field people never see, the error lines,
   and the thank-you that takes the form's place. */
.km-hp{position:absolute!important;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.km-request{position:relative}
.km-request .km-err{display:block;font-style:normal;font-weight:600;color:#9B1C1C}
.km-request [aria-invalid="true"]{border-color:#9B1C1C}
.km-alert{margin:0;padding:14px 16px;border:2px solid #9B1C1C;border-radius:12px;background:#FFF4F0;color:var(--ink);font-weight:600}
.km-sent{max-width:620px;padding:22px 20px;border:2px solid var(--deep);border-radius:16px;background:#FFFDF8}
.km-sent p{margin:0 0 12px}
.km-sent .lead{color:var(--deep)}
.km-sent .acts{display:flex;flex-wrap:wrap;gap:12px;margin:18px 0 6px}
.km-request button[disabled]{opacity:.7;cursor:wait}
.km-nw{white-space:nowrap}

/* ---------- round 2 fixes (visitor test, docs/ux/acceptance-local.md) ---------- */

/* phones: "Tìm mẫu / Find a design" inside the menu shows (only the header's own copy is hidden) */
.top .menupanel .iconbtn[data-open-search]{display:inline-flex}
html:not(.js) .top .menupanel .iconbtn[data-open-search]{display:none}

@media (max-width:260px){.bar .btn svg{display:none}}

/* the photo viewer on phones: Previous and Next buttons with words under the photo, as well as swiping */
.lb-word{display:none}
@media (max-width:600px){
  .lightbox{grid-template-columns:1fr 1fr;grid-template-rows:minmax(0,1fr) auto;align-content:center;row-gap:12px}
  .lightbox figure{grid-column:1/-1;grid-row:1}
  .lightbox img{max-height:calc(100vh - 330px)}
  .lb-prev,.lb-next{display:flex;grid-row:2;width:auto;height:auto;min-height:48px;border-radius:999px;align-items:center;justify-content:center;gap:8px;padding:8px 14px;font:600 16px 'Be Vietnam Pro',sans-serif}
  .lb-prev{grid-column:1}
  .lb-next{grid-column:2}
  .lb-word{display:inline}
}

/* the line under the hero's Call and Text, and the pickup line on a design's own page */
.hero .hero-note{margin:14px 0 0;font-size:17px;max-width:46ch}
.pagehero .hours.where{margin-top:16px;max-width:52ch}

/* form: the required fields say so */
.form label small.req{color:var(--ink-soft)}

/* framed museum pieces read as decoration, not as designs for sale */
.art-frame .art-what{display:block;font-style:normal;font-weight:600;color:#7A6E60;margin-bottom:2px}

/* small words: "mẫu này / this design" under prices at 16px, and the hero's "Xem mẫu này" link a full tap target */
.cat .amt small{font-size:16px}
.archcap a{display:inline-flex;align-items:center;min-height:44px}

/* the big phone number stays on one line at large text sizes */
.contact .phone,.pagehero .phone{white-space:nowrap}
@media (max-width:400px){.contact .phone,.pagehero .phone{font-size:clamp(30px,11vw,52px)}}

/* ---------- language switch (theme 0.11.0): the Tiếng Việt · English pill and the globe menu ----------
   km_lang_box() in inc/render.php. <nav class="langs"> holds two parts side by side:
   1. the pill (.lang-toggle): two links. Without scripts the current name has the gold background.
      motion.js measures the current name, puts the gold highlight (.lt-knob) under it (class kn-ready),
      and on a tap slides it to the tapped name (.is-to). On a page in another language (class is-off)
      no name is highlighted; a tap grows the highlight under the tapped name.
   2. the globe (<details class="lang-more">): its button (.lm-btn) opens a short list of every language
      (.lm-menu). On a page in a language outside the pill (class is-cur) the button shows that
      language's short name on gold. Works without scripts (it is a <details>); motion.js adds Escape,
      closing on a tap elsewhere, aria-expanded and the closing animation. */
.top .langs{display:flex;align-items:stretch;gap:8px;min-width:0}
.langs .lang.lang-toggle,.menupanel .menu-lang .langs .lang.lang-toggle{position:relative;display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:auto;align-items:stretch;padding:0;margin:0;width:auto;min-height:40px;border:1.5px solid var(--gold);border-radius:999px;overflow:hidden}
.lang-toggle .lt-knob{position:absolute;top:0;bottom:0;left:0;width:var(--kw,0);transform:translateX(var(--kx,0));background:var(--gold);border-radius:999px;opacity:0;pointer-events:none}
.lang-toggle.kn-ready .lt-knob{opacity:1}
.lang-toggle.kn-moving .lt-knob{transition:transform .38s cubic-bezier(.65,0,.35,1),width .38s cubic-bezier(.65,0,.35,1)}
/* from a page in another language: the highlight grows in under the tapped name */
.lang-toggle.kn-new .lt-knob{animation:knGrow .38s cubic-bezier(.2,.8,.2,1) both}
@keyframes knGrow{from{opacity:0;transform:translateX(var(--kx,0)) scaleX(.4)}}
.lang-toggle .lt-opt{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;padding:8px 14px;white-space:nowrap;overflow:hidden;color:var(--gold);text-decoration:none;border-radius:999px;transition:color .3s}
.lang-toggle .lt-opt.is-on{background:var(--gold);color:var(--deep)}
.lang-toggle.kn-ready .lt-opt.is-on{background:transparent}
.lang-toggle .lt-t{display:block}
.lang-phone .langs .lang.lang-toggle,.menupanel .langs .lang.lang-toggle{min-height:48px;font-size:16px}
.lang-toggle .lt-opt:focus-visible{outline:2px solid var(--gold);outline-offset:-4px}
/* tapping a name: the highlight slides to it, the two names swap colors and roll up */
.lang-toggle.is-switching .lt-opt.is-on{color:var(--gold)}
.lang-toggle.is-switching .lt-opt.is-to{color:var(--deep)}
@media (prefers-reduced-motion:no-preference){
  .lang-toggle.is-switching .lt-opt.is-on .lt-t,.lang-toggle.is-switching .lt-opt.is-to .lt-t{animation:ltRoll .4s cubic-bezier(.65,0,.35,1) both}
  .lang-toggle.is-switching .lt-opt.is-to .lt-t{animation-delay:.04s}
  @keyframes ltRoll{0%{transform:none;opacity:1}45%{transform:translateY(-110%);opacity:0}46%{transform:translateY(110%);opacity:0}100%{transform:none;opacity:1}}
}
/* in the top bar on computers the pill stays compact, so the color switch keeps its room */
.util .langs .lang.lang-toggle{min-height:34px}
.util .lang-toggle .lt-opt{padding:5px 11px}
/* phones: the row under the header and the top of the open menu; the pill takes the room the globe leaves */
.lang-phone,.menu-lang{display:flex;gap:8px;align-items:stretch}
@media (min-width:900px){.lang-phone{display:none}} /* computers have the pill in the top bar */
.lang-phone .langs,.menu-lang .langs{flex:1 1 auto}
.lang-phone .langs .lang-toggle,.menu-lang .langs .lang-toggle{flex:1 1 auto;min-width:0}
.lang-phone .lang a,.menupanel .lang a{display:flex;align-items:center;justify-content:center;min-height:48px;padding:8px 6px;font-size:16px}
@media (max-width:380px){.lang-phone .lang-toggle .lt-opt,.menupanel .menu-lang .lang-toggle .lt-opt{padding:8px 4px}}
.menu-lang{padding:12px 0 4px}
.menupanel .menu-lang .lang{display:grid;width:auto;margin:0;text-align:center}
.menupanel .menu-lang .lang a{border-bottom:0;font:700 16px/1.2 'Be Vietnam Pro',sans-serif;text-transform:none;justify-content:center}
/* the language pill inside the open phone menu: the menu's rule for its grey italic glosses
   (".menupanel a span") also caught the pill's words, leaving "Tiếng Việt" pale and italic on gold */
.menupanel .lang-toggle .lt-opt,.menupanel .lang-toggle .lt-t{font-style:normal;font-weight:700;color:inherit}
.menupanel .lang-toggle .lt-opt{color:var(--gold)}
.menupanel .lang-toggle .lt-opt.is-on{color:var(--deep)}
.menupanel .lang-toggle.is-switching .lt-opt.is-on{color:var(--gold)}
.menupanel .lang-toggle.is-switching .lt-opt.is-to{color:var(--deep)}
/* the name being left turns gold while it rolls away (v16's rules keep [aria-current] dark) */
.lang-toggle.is-switching .lt-opt.is-on[aria-current]{color:var(--gold)}

/* the globe button and its menu */
.lang-more{position:relative;flex:none;display:flex}
.lang-more>summary{list-style:none}
.lang-more>summary::-webkit-details-marker{display:none}
.top .lm-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:40px;min-height:40px;padding:0 9px;border:1.5px solid var(--gold);border-radius:999px;background:transparent;color:var(--gold);font:700 16px/1 'Be Vietnam Pro',sans-serif;white-space:nowrap;cursor:pointer;user-select:none;transition:background .3s,color .3s}
.lm-btn svg{flex:none;width:20px;height:20px;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.lang-more[open]>.lm-btn svg{transform:rotate(-24deg)}
.lm-btn:hover{background:rgba(232,184,106,.14)}
.lm-btn:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.top .lang-more.is-cur>.lm-btn{background:var(--gold);color:var(--deep)}
.lm-vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.top .lang-phone .lm-btn,.top .menu-lang .lm-btn{min-width:48px;min-height:48px}
.top .util .lm-btn{min-width:34px;min-height:34px;padding:0 7px}
.util .lm-btn svg{width:18px;height:18px}
.lm-menu{position:absolute;right:0;top:calc(100% + 8px);z-index:80;min-width:210px;padding:6px;background:var(--deep);border:1.5px solid var(--gold);border-radius:16px;box-shadow:0 18px 34px rgba(0,0,0,.32);transform-origin:top right}
.lm-menu ul{list-style:none;margin:0;padding:0}
.top .lang-more .lm-opt{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:48px;padding:8px 14px;border:0;border-radius:10px;color:var(--on);text-decoration:none;text-transform:none;font:700 17px/1.2 'Be Vietnam Pro',sans-serif;white-space:nowrap}
.top .lang-more .lm-opt span{font:inherit;color:inherit}
.top .lang-more .lm-opt:hover{background:rgba(232,184,106,.14);color:var(--gold)}
.top .lang-more .lm-opt:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.top .lang-more .lm-opt.is-on{color:var(--gold)}
/* a tick beside the current language */
.lang-more .lm-opt.is-on::after{content:"";flex:none;width:12px;height:7px;margin-top:-4px;border-left:2.5px solid currentColor;border-bottom:2.5px solid currentColor;transform:rotate(-45deg)}
@media (prefers-reduced-motion:no-preference){
  .lang-more[open]>.lm-menu{animation:lmIn .24s cubic-bezier(.2,.8,.2,1) both}
  .lang-more.is-closing>.lm-menu{animation:lmOut .16s cubic-bezier(.4,0,1,1) both}
  .lang-more[open] .lm-menu li{animation:lmItem .3s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0) * 30ms + 40ms)}
  .lang-more.is-closing .lm-menu li{animation:none}
  @keyframes lmIn{from{opacity:0;transform:translateY(-8px) scale(.96)}}
  @keyframes lmOut{to{opacity:0;transform:translateY(-6px) scale(.97)}}
  @keyframes lmItem{from{opacity:0;transform:translateY(-4px)}}
}
/* phones: a wider menu, so every name is a long, easy tap */
@media (max-width:899px){.lang-phone .lm-menu,.menu-lang .lm-menu{min-width:min(260px,calc(100vw - 28px))}}
/* ---------- end of the language switch (the 繁 / 简 switch beside it is in zh.css) ---------- */

/* "I speak Vietnamese and English" near Call and Text, on the pages in a language Kim Anh does not speak */
.speak{max-width:56ch;margin:16px 0 0;padding-left:14px;border-left:3px solid var(--gold);font-size:17px;line-height:1.7;color:inherit}
/* the thin top bar runs out of room on laptop widths: the place line (also in the hero) gives way first */
@media (max-width:1299px){.util .where{display:none}}

/* ---------- theme 0.9.0 ---------- */

/* Signed in to WordPress: its black admin bar is 32px tall and fixed on computers, 46px and fixed on
   tablets, and 46px but scrolling away with the page under 600px. The sticky header sits under it
   instead of sliding beneath it, and the open phone menu stays inside the screen. */
.admin-bar .top{top:32px}
.admin-bar figure[id],.admin-bar .grouphead[id],.admin-bar section[id]{scroll-margin-top:172px}
@media (max-width:782px){
  .admin-bar .top{top:46px}
  .admin-bar .menupanel{max-height:calc(100vh - 186px)}
  .admin-bar figure[id],.admin-bar .grouphead[id],.admin-bar section[id]{scroll-margin-top:196px}
}
@media (max-width:600px){
  .admin-bar .top{top:0}
  .admin-bar figure[id],.admin-bar .grouphead[id],.admin-bar section[id]{scroll-margin-top:150px}
}

/* Sympathy page: each kind shows three designs and a "See N more" button (km_cat_folded). Only
   when scripts run; without them every design shows and the button is hidden. */
html.js .cat[data-fold]:not(.open)>figure:nth-child(n+4){display:none}
html:not(.js) .fold-row{display:none}
.fold-row{display:flex;justify-content:center;margin:34px 0 0}
.seemore{background:transparent;cursor:pointer}
.seemore svg{width:20px;height:20px;transition:transform .35s var(--ease)}
.seemore[aria-expanded="true"] svg{transform:rotate(180deg)}

/* Sympathy guide: a few examples of each kind, as small arches that open the design */
.r-pics{grid-column:1/-1;list-style:none;margin:14px 0 4px;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;max-width:520px}
.r-pics a{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-decoration:none;color:var(--ink)}
.r-pics .arch{display:block;width:calc(100% - 10px);margin:5px 5px 10px;outline-offset:4px}
.r-pics b{font-family:var(--disp);font-weight:800;font-size:22px;line-height:1;color:var(--deep)}
.r-pics span:not(.arch){font-size:16px;font-weight:600;color:var(--ochre-ink)}
.r-pics a:hover b,.r-pics a:focus-visible b{text-decoration:underline;text-underline-offset:4px}
@media (min-width:900px){.r-pics{grid-column:2/-1;margin-top:18px;gap:22px}}

/* small phones (375px): the bottom bar's Call button ran its number 3px into its own padding */
@media (max-width:400px){.bar .btn{gap:6px;padding:8px}}

/* small phones (320 to 400px, theme 0.11.0): the bottom bar's Call button needs about 150px for the icon and
   "(714) 276-3544", and at 320px its half of the bar was 137px, so the last digit was cut off in every
   language. Call now takes the room its number needs and Text, whose single word needs less, takes the rest. (At 200 percent
   text, under 261px of layout, both halves stay equal and the number may wrap: rules above.) */
@media (min-width:261px) and (max-width:400px){.bar{grid-template-columns:minmax(0,max-content) minmax(0,1fr)}}
/* and under 340px the bar's own edges are a little narrower, so "Mensaje" (Spanish Text) fits beside it */
@media (min-width:261px) and (max-width:340px){.bar{gap:8px;padding-left:10px;padding-right:10px}}

/* Spanish (theme 0.11.0): longer words than English. A page name with a word over 10 letters gets the
   "longer" size (km_pagehero), and headings may break a long word with a hyphen rather than run out. */
.pagehero h1.longer{font-size:clamp(44px,12.5vw,112px)}
html[lang="es"] :is(h1,h2,h3){hyphens:auto;-webkit-hyphens:auto}
/* the occasion tiles on a 320px phone: "Condolencias" is one word wider than its half of the row */
@media (max-width:360px){html[lang="es"] .occ h3{font-size:23px}}