/* Theme kit: "Azulejo" (Rio Vista). After Rio Vista's Mediterranean Revival houses and its Spanish-named waterways
   (Rio Cordova, Rio Granada, Rio Valencia...): limewash parchment paper, sepia-black ink, azulejo cobalt and
   saffron glaze, with olive as a secondary text accent. Hand-painted-tile motifs: a repeating blue-and-saffron
   tile band under the header and above the footer, H2s with a single glazed "tile" square, cards with a tiled
   top edge, a square hero plate set in a tile frame, and a stats strip of glazed blue tiles.
   Marcellus (inscriptional Roman capitals) headings, Work Sans body.
   Loaded only on sites whose config sets themeKit.name = 'azulejo' (Base.astro); every rule is scoped to
   html[data-theme="azulejo"], so other sites are unaffected even if this file were loaded.
   Fonts: SIL Open Font License 1.1 (see fonts/OFL-*.txt), self-hosted from @fontsource. */
@font-face { font-family: 'Marcellus'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/marcellus-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Work Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/work-sans-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Work Sans'; font-style: italic; font-weight: 400; font-display: swap; src: url(fonts/work-sans-latin-400-italic.woff2) format('woff2'); }
@font-face { font-family: 'Work Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/work-sans-latin-600-normal.woff2) format('woff2'); }

html[data-theme="azulejo"] {
  --serif: 'Marcellus', 'Trajan Pro', Georgia, serif;
  --sans: 'Work Sans', 'Helvetica Neue', Arial, system-ui, sans-serif;
  --display: 'Marcellus', 'Trajan Pro', Georgia, serif;
  --radius: 3px; --radius-sm: 3px;
  --surface: #fffcf5;
  --olive: #4f5a1e;
  /* One 28px glazed tile: cobalt diamond on limewash, saffron center dot, cobalt corner quarter-dots. */
  --tile: radial-gradient(circle at 50% 50%, var(--coral) 0 3.5px, transparent 4px) 0 0 / 28px 28px,
          radial-gradient(circle at 0 0, var(--sun) 0 5px, transparent 5.5px) 0 0 / 14px 14px,
          conic-gradient(from 45deg at 50% 50%, var(--sun) 0 25%, var(--surface) 0 50%, var(--sun) 0 75%, var(--surface) 0) 0 0 / 28px 28px;
  --shadow: 0 1px 0 var(--line), 0 14px 24px -22px rgba(38, 33, 24, .5);
}
html[data-theme="azulejo"] body { background: var(--paper); font-family: var(--sans); font-size: 1.03rem; line-height: 1.72; }
html[data-theme="azulejo"] h1, html[data-theme="azulejo"] h2, html[data-theme="azulejo"] h3 { font-family: var(--display); font-weight: 400; letter-spacing: .01em; line-height: 1.16; }
html[data-theme="azulejo"] h1 { font-size: clamp(2.2rem, 4.6vw, 3.4rem); }
html[data-theme="azulejo"] .main h2 { position: relative; padding-left: 1.6rem; }
html[data-theme="azulejo"] .main h2::before { content: ""; position: absolute; left: 0; top: .32em; width: 14px; height: 14px; background: var(--sun); box-shadow: inset 0 0 0 3px var(--sun), inset 0 0 0 5px var(--coral); transform: rotate(45deg); }
html[data-theme="azulejo"] h3 { color: var(--ink); }
html[data-theme="azulejo"] .eyebrow { font: 600 .76rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--coral-deep); }
html[data-theme="azulejo"] .answer { font: 400 1.12rem/1.7 var(--sans); }
html[data-theme="azulejo"] a { text-underline-offset: .2em; text-decoration-thickness: 1px; }
html[data-theme="azulejo"] a:hover { text-decoration-color: var(--coral); text-decoration-thickness: 2px; }

/* Header: limewash bar sitting on a narrow tile band */
html[data-theme="azulejo"] .site-header { background: color-mix(in srgb, var(--paper) 97%, transparent); border-bottom: 0; box-shadow: none; }
html[data-theme="azulejo"] .site-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: -10px; height: 10px; background: var(--tile); background-position: 0 -9px; pointer-events: none; }
html[data-theme="azulejo"] .site-header__title { font: 400 1.22rem/1.1 var(--display); letter-spacing: .04em; }
html[data-theme="azulejo"] .primary-nav a { font-family: var(--sans); font-weight: 600; font-size: .88rem; letter-spacing: 0; }
@media (min-width: 1280px) { html[data-theme="azulejo"] .primary-nav a { font-size: .82rem; } }
@media (min-width: 1280px) and (max-width: 1339px) { html[data-theme="azulejo"] .primary-nav ul { gap: .45rem; } html[data-theme="azulejo"] .primary-nav a { font-size: .74rem; } html[data-theme="azulejo"] .primary-nav .btn--small { padding: .7rem .75rem; font-size: .74rem; letter-spacing: 0; } html[data-theme="azulejo"] .site-header__title { font-size: 1rem; letter-spacing: 0; } }
@media (min-width: 1340px) { html[data-theme="azulejo"] .primary-nav .btn--small { padding: .75rem 1rem; } }
html[data-theme="azulejo"] .primary-nav a:hover { border-bottom-color: var(--coral); }
html[data-theme="azulejo"] .primary-nav a[aria-current="page"] { border-bottom-color: var(--sun); color: var(--ink); }

/* Buttons: glazed cobalt with a saffron underglaze edge; hover sepia */
html[data-theme="azulejo"] .btn { color: #fff; border-radius: var(--radius-sm); font: 600 .92rem/1 var(--sans); letter-spacing: .03em; padding: 1rem 1.45rem; box-shadow: inset 0 -4px 0 var(--coral); }
html[data-theme="azulejo"] .btn:hover { color: #fff; transform: none; box-shadow: inset 0 -4px 0 var(--coral); }
html[data-theme="azulejo"] .btn--small { color: #fff !important; border-radius: var(--radius-sm); }
html[data-theme="azulejo"] .btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); box-shadow: none; }
html[data-theme="azulejo"] .btn--ghost:hover { background: var(--ink); color: #fff; box-shadow: none; }

/* Tables: limewash with a cobalt head rule and a saffron hairline */
html[data-theme="azulejo"] .table-wrap, html[data-theme="azulejo"] table { background: var(--surface); }
html[data-theme="azulejo"] .table-wrap { border: 1px solid var(--line); border-top: 0; box-shadow: inset 0 3px 0 var(--sun), inset 0 5px 0 var(--coral); }
html[data-theme="azulejo"] .prose table { border: 1px solid var(--line); border-top: 3px solid var(--sun); }
html[data-theme="azulejo"] th { background: var(--paper-alt); color: var(--ink); font: 600 .8rem/1.3 var(--sans); letter-spacing: .06em; text-transform: uppercase; }

/* Cards: a tiled top edge, square corners */
html[data-theme="azulejo"] .card { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 2rem 1.35rem 1.35rem; box-shadow: var(--shadow); overflow: hidden; }
html[data-theme="azulejo"] .card::before { content: ""; display: block; position: absolute; top: 0; left: 0; right: 0; height: 14px; background: var(--tile); border-radius: 0; width: auto; }
html[data-theme="azulejo"] .card h3, html[data-theme="azulejo"] .card h2 { margin-top: .4rem; }
html[data-theme="azulejo"] a.card:hover { border-color: var(--sun); transform: translateY(-2px); }
html[data-theme="azulejo"] .note { border-left: 6px solid var(--sun); box-shadow: inset 2px 0 0 var(--coral); background: var(--paper-alt); border-radius: var(--radius); }
html[data-theme="azulejo"] .from-blog, html[data-theme="azulejo"] .related-guides { border-left: 6px solid var(--olive); background: var(--paper-alt); border-radius: var(--radius); }
html[data-theme="azulejo"] .faq details { background: var(--surface); border-radius: var(--radius); border: 1px solid var(--line); border-left: 4px solid var(--sun); }
html[data-theme="azulejo"] .faq summary { font: 400 1.1rem/1.4 var(--display); }
html[data-theme="azulejo"] .faq summary::marker { color: var(--sun); }
html[data-theme="azulejo"] .lead, html[data-theme="azulejo"] .listing, html[data-theme="azulejo"] .post-list__item { background: var(--surface); border-radius: var(--radius); }
html[data-theme="azulejo"] .lead input, html[data-theme="azulejo"] .lead select, html[data-theme="azulejo"] .lead textarea, html[data-theme="azulejo"] .sort select { border-color: #7a7264; border-radius: var(--radius-sm); }
html[data-theme="azulejo"] .listing__price { font-family: var(--display); letter-spacing: .01em; }
html[data-theme="azulejo"] .seg { border-radius: var(--radius-sm); }
html[data-theme="azulejo"] .seg button[aria-selected="true"] { background: var(--sun); color: #fff; }
html[data-theme="azulejo"] .listing-dialog::backdrop { background: rgba(38, 33, 24, .72); }

/* CTA + footer: deep cobalt glaze, tile band on top */
html[data-theme="azulejo"] .wave { display: none; }
html[data-theme="azulejo"] .cta { background: var(--deep); border-radius: var(--radius); box-shadow: inset 0 0 0 6px var(--deep), inset 0 0 0 8px var(--coral); }
html[data-theme="azulejo"] .site-footer { position: relative; margin-top: 3.2rem; background: var(--deep); border-top: 0; padding-top: 3.4rem; }
html[data-theme="azulejo"] .site-footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 14px; background: var(--tile); }
html[data-theme="azulejo"] .site-footer .bmls-logo { background: #fff; padding: 3px 6px; border-radius: 2px; box-sizing: content-box; }
html[data-theme="azulejo"] .footer-h { font-family: var(--display); letter-spacing: .06em; }

/* ---------- Editorial hero (home.heroVariant = 'editorial'): limewash, tile border band, framed tile plate ---------- */
html[data-theme="azulejo"] .hx { background: var(--paper); color: var(--ink); position: relative; padding-top: 1.2rem; }
html[data-theme="azulejo"] .hx__grid { display: grid; gap: 0; max-width: 1160px; margin: 0 auto; padding: 0 1.25rem; }
@media (min-width: 960px) { html[data-theme="azulejo"] .hx__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 3.2rem; align-items: center; min-height: 560px; } }
html[data-theme="azulejo"] .hx__copy { padding: 2.2rem 0 1.6rem; display: flex; flex-direction: column; justify-content: center; }
@media (min-width: 960px) { html[data-theme="azulejo"] .hx__copy { padding: 3rem 0 3.2rem; } }
html[data-theme="azulejo"] .hx__kicker { display: flex; flex-wrap: wrap; gap: .3rem .9rem; font: 600 .78rem/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--olive); margin: 0 0 1.2rem; }
html[data-theme="azulejo"] .hx__kicker span + span::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: .9rem; background: var(--sun); transform: rotate(45deg); vertical-align: 1px; }
html[data-theme="azulejo"] .hx__title { font-family: var(--display) !important; font-weight: 400 !important; font-size: clamp(3rem, 7.4vw, 5.6rem) !important; margin: 0 0 1.2rem !important; line-height: .98 !important; letter-spacing: .01em !important; color: var(--ink) !important; }
html[data-theme="azulejo"] .hx__title span { display: inline-block; color: var(--sun); padding-bottom: .12em; background: linear-gradient(var(--coral), var(--coral)) 0 100% / 100% 6px no-repeat; }
html[data-theme="azulejo"] .hx .answer { max-width: 52ch; color: var(--ink); }
html[data-theme="azulejo"] .hx__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .9rem; }
/* Square plate in a 14px tile frame */
html[data-theme="azulejo"] .hx__plate { position: relative; margin: 0 auto 2.4rem; width: min(88vw, 440px); aspect-ratio: 1; background: var(--deep); color: var(--on-deep); overflow: hidden; border: 14px solid transparent; border-radius: 2px;
  background: linear-gradient(var(--deep), var(--deep)) padding-box, var(--tile) border-box; box-shadow: var(--shadow); }
@media (min-width: 960px) { html[data-theme="azulejo"] .hx__plate { margin: 2.4rem 0; width: 100%; max-width: 460px; justify-self: end; } }
html[data-theme="azulejo"] .hx__plate svg { position: absolute; inset: 0; width: 100%; height: 100%; }
html[data-theme="azulejo"] .hx__plate figcaption { position: absolute; left: 8%; right: 8%; bottom: 4%; text-align: center; font: 400 .72rem/1.3 var(--sans); letter-spacing: .04em; color: var(--on-deep); margin: 0; }
/* Stats: a row of glazed cobalt tiles */
html[data-theme="azulejo"] .hx__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-width: 1160px; margin: 0 auto; padding: 0 1.25rem 2.6rem; }
@media (min-width: 760px) { html[data-theme="azulejo"] .hx__stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
html[data-theme="azulejo"] .hx__stat { margin: 0; padding: 1.2rem 1.1rem 1.1rem; background: var(--deep); color: var(--on-deep); border-radius: 2px; box-shadow: inset 0 0 0 4px var(--deep), inset 0 0 0 5px var(--coral); }
html[data-theme="azulejo"] .hx__stat dt { font: 600 .7rem/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--on-deep-link); }
html[data-theme="azulejo"] .hx__stat dd { margin: .5rem 0 0; font: 400 clamp(1.55rem, 3vw, 2.1rem)/1 var(--display); color: var(--on-deep); }
html[data-theme="azulejo"] .hx__stat dd small { display: block; font: 400 .8rem/1.35 var(--sans); color: var(--on-deep); margin-top: .45rem; }
/* Prose tables fill the column on wider screens (global CSS keeps them display:block for mobile scrolling). */
@media (min-width: 720px) {
  html[data-theme="azulejo"] .prose table { display: table; width: 100%; border-collapse: separate; border-spacing: 0; }
}

/* Preview-only [VERIFY] marks: let long ones wrap so they never widen the page on phones. */
html[data-theme="azulejo"] mark.verify { white-space: normal; display: inline; line-height: 1.5; box-decoration-break: clone; -webkit-box-decoration-break: clone; }

/* About Glen: azulejo = limewash panel with a tiled top edge; photo set in a tile frame. */
html[data-theme="azulejo"] .about-glen { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding-top: 2.6rem; overflow: hidden; }
html[data-theme="azulejo"] .about-glen::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 14px; background: var(--tile); }
html[data-theme="azulejo"] .about-glen .about-glen__photo img { border-radius: 0; border: 10px solid transparent; border-image: none; background: var(--tile); background-origin: border-box; padding: 0; box-shadow: inset 0 0 0 1px var(--deep); }
html[data-theme="azulejo"] .about-glen__line { font-family: var(--serif); font-size: 1.05rem; letter-spacing: .06em; }
html[data-theme="azulejo"] .about-glen__media .about-glen__line { border-left-color: var(--sun); }
html[data-theme="azulejo"] .about-glen-contact__card { box-shadow: inset 0 0 0 4px var(--surface), inset 0 0 0 5px var(--coral), var(--shadow); }