/*
Theme Name: 靈源禪寺 Lingyuan
Theme URI: https://lingyuantemple.com.hk/
Description: Standalone block theme for 靈源禪寺 (Lingyuan Chan Temple). Carries the temple's identity — crimson/gold on warm cream, serene serif typography, reverent spacing. Design tokens live in theme.json; this stylesheet adds what blocks can't express. Owns its own templates, parts, and patterns (no parent theme required).
Author: LGIL-LYT-2026-01
Version: 3.0.0
Requires at least: 6.4
Requires PHP: 8.1
Text Domain: lingyuan
*/

/*
 * Fonts. Bundled-local is preferred for production; @import is the pragmatic
 * first step and is replaced with self-hosted @font-face during the theme build.
 */
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Noto+Serif+TC:wght@300;400;500;600;700&display=swap');

/* ============================================================
   Mobile box model. Every custom temple section (and its descendants)
   must include padding INSIDE its width. Without this, the width:100vw
   full-bleed sections are content-box and overflow narrow screens by
   their own horizontal padding — content shifts/clips on phones and the
   whole page reads as misaligned. border-box makes 100vw honest.
   ============================================================ */
[class*="lyt-"],
[class*="lyt-"] *,
[class*="lyt-"] *::before,
[class*="lyt-"] *::after { box-sizing: border-box; }

/*
 * Design tokens — the single source of truth, mirrored in theme.json so the
 * Site Editor and Gutenberg use the same values. Names match the prototype's
 * :root so index.html and the theme stay in lockstep.
 */
:root {
  /* Crimson — significance, never decoration */
  --crimson:        #5C0F0F;   /* canonical brand crimson (primary) */
  --crimson-deep:   #3D0A0A;
  --crimson-bright: #8B1A1A;

  /* Gold — antique, candlelit (canonical per the approved index.html prototype).
     A rare, sacred accent. Decorative/large use only (low contrast on cream) */
  --gold:           #C9A84C;   /* canonical brand gold (v2) */
  --gold-soft:      #E8C97A;
  --gold-deep:      #9A7830;   /* legible-enough gold for small accents on cream */

  /* Night — the dark lacquered threshold (nav + footer chrome) */
  --night:          #1A0A00;
  --night-mid:      #3D1C02;

  /* Surfaces — warm cream, tinted warm; never pure white */
  --cream:          #FDF6E3;   /* page background */
  --cream-warm:     #F5E6C8;   /* raised surface / warm borders */
  --cream-deep:     #ECDFC2;   /* alternate band */
  --paper:          #FFFDF6;   /* warm near-white: cards, light text on dark */

  /* Ink — warm near-black; never pure black */
  --ink:            #2C1810;   /* headings + body */
  --ink-muted:      #6B4226;   /* secondary text */

  /* Lines + shadow, crimson-tinted */
  --line:           rgba(92, 15, 15, 0.14);
  --shadow:         rgba(60, 10, 10, 0.18);

  /* Fluid type scale — base enlarged for 50+ readers, ratio ~1.25 */
  --fs-sm:      clamp(0.9rem, 0.86rem + 0.18vw, 1rem);
  --fs-base:    clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --fs-lg:      clamp(1.25rem, 1.14rem + 0.5vw, 1.5rem);
  --fs-xl:      clamp(1.5rem, 1.3rem + 0.9vw, 2rem);
  --fs-2xl:     clamp(2rem, 1.6rem + 1.8vw, 3rem);
  --fs-3xl:     clamp(2.5rem, 1.9rem + 2.6vw, 4.25rem);
  --fs-display: clamp(3rem, 2rem + 5vw, 6rem);

  /* Spacing scale — reverence = breathing room */
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2.5rem;
  --space-xl:  clamp(3rem, 2rem + 4vw, 5rem);
  --space-2xl: clamp(4rem, 2.5rem + 6vw, 8rem);

  --measure: 68ch;   /* body line-length cap */
}

/* Base — applied by theme.json too; kept here for the prototype + safety */
body {
  background: var(--cream);
  color: var(--ink);
  font-family: 'Noto Serif TC', 'EB Garamond', Georgia, serif;
  font-size: var(--fs-base);
  line-height: 1.8;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   Header & footer — brand the block-theme template parts site-wide.
   (Carries the same intent as docs/wordpress/site-additional.css,
   but shipped in the theme so no manual Additional CSS paste is needed.)
   ============================================================ */

/* Header: warm paper background, serif nav, crimson hover */
header.wp-block-template-part { font-family: var(--lyt-serif, 'Noto Serif TC', serif); }
header.wp-block-template-part > .wp-block-group.has-background {
  background-color: var(--cream) !important;
  border-bottom: 1px solid var(--line);
}
header.wp-block-template-part .wp-block-navigation { font-size: 1.02rem; font-weight: 500; letter-spacing: .06em; }
header.wp-block-template-part .wp-block-navigation__container { gap: 1.7em; }
header.wp-block-template-part .wp-block-navigation a,
header.wp-block-template-part .wp-block-navigation .wp-block-navigation-item__content { color: var(--ink) !important; text-decoration: none; }
header.wp-block-template-part .wp-block-navigation a:hover,
header.wp-block-template-part .wp-block-navigation .current-menu-item > a { color: var(--crimson) !important; }
header.wp-block-template-part .wp-block-navigation .wp-block-navigation-submenu__container {
  background-color: var(--cream) !important; border: 1px solid var(--line);
}

/* Footer: deep crimson anchor with cream text + gold hovers */
footer.wp-block-template-part { font-family: var(--lyt-serif, 'Noto Serif TC', serif); }
footer.wp-block-template-part,
footer.wp-block-template-part > .wp-block-group { background-color: var(--crimson) !important; }
footer.wp-block-template-part,
footer.wp-block-template-part p,
footer.wp-block-template-part li,
footer.wp-block-template-part a,
footer.wp-block-template-part h2, footer.wp-block-template-part h3, footer.wp-block-template-part h4,
footer.wp-block-template-part .wp-block-site-title a { color: var(--cream) !important; }
footer.wp-block-template-part a { text-decoration: none; }
footer.wp-block-template-part a:hover { color: var(--gold) !important; }
footer.wp-block-template-part .wp-block-separator,
footer.wp-block-template-part hr { border-color: rgba(201, 168, 76, .3) !important; }

/* Keyboard focus, brand gold */
a:focus-visible, button:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

/* Custom header template part — list-as-nav, brand voice */
.lyt-header { border-bottom: 1px solid rgba(201, 168, 76, .45); box-shadow: 0 1px 0 rgba(201, 168, 76, .45); }
.lyt-header .lyt-nav { list-style: none; padding: 0; margin: 0; display: flex; gap: 2em; }
.lyt-header .lyt-nav li { margin: 0; }
.lyt-header .lyt-nav a { color: var(--ink) !important; text-decoration: none; transition: color .2s; }
.lyt-header .lyt-nav a:hover,
.lyt-header .lyt-nav .current-menu-item a { color: var(--crimson) !important; }
.lyt-header .wp-block-site-title a { color: var(--crimson) !important; text-decoration: none; }
@media (max-width: 768px) { .lyt-header .lyt-nav { gap: 1.2em; flex-wrap: wrap; } }

/* ============================================================
   Pass 6 — News / archive surfaces. Default WP blocks (page title,
   calendar widget, latest posts, latest comments) are off-brand.
   Brand them so any page using these blocks reads as part of the
   Incense-Lit Sanctuary.
   ============================================================ */

/* Page titles — center, gold kicker treatment, generous spacing */
.wp-block-post-title {
  text-align: center;
  color: var(--crimson) !important;
  font-family: 'Noto Serif TC', serif !important;
  font-weight: 700;
  letter-spacing: 0.1em;
  font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
  margin: clamp(2rem, 4vw, 3rem) 0 clamp(1.5rem, 3vw, 2.5rem) !important;
}

/* Hide the inherited WP page title on pages whose content has its own
   branded title block — avoids the duplicate "供奉確認"/"關於本廟"/etc. */
body:has(.lyt-shop-page) .wp-block-post-title,
body:has(.lyt-fortune-page) .wp-block-post-title,
body:has(.lyt-page) .wp-block-post-title,
body:has(.lyt-about-header) .wp-block-post-title,
body:has(.lyt-fortune-header) .wp-block-post-title,
body:has(.lyt-offerings) .wp-block-post-title { display: none !important; }

/* Calendar widget + its previous/next-month nav stubs — quiet, off-brand */
.wp-block-calendar,
.wp-calendar-nav,
.wp-calendar-table { display: none !important; }

/* When a columns block contained the calendar, flatten to single column so
   the remaining content (post list) flows centered, not shoved right. */
.wp-block-columns:has(> .wp-block-column > .wp-block-calendar),
.wp-block-columns:has(> .wp-block-calendar) {
  display: block !important;
}
.wp-block-columns:has(> .wp-block-column > .wp-block-calendar) > .wp-block-column,
.wp-block-columns:has(> .wp-block-calendar) > .wp-block-column {
  flex-basis: auto !important;
  width: 100% !important;
  max-width: 100% !important;
}
/* And hide the column that contained ONLY the calendar */
.wp-block-column:has(> .wp-block-calendar:only-child),
.wp-block-column:has(> nav > .wp-block-calendar:only-child) {
  display: none !important;
}

/* Latest posts — brand the cards */
.wp-block-latest-posts,
.wp-block-latest-posts__list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.wp-block-latest-posts > li,
.wp-block-latest-posts__list > li {
  padding: clamp(1rem, 2vw, 1.5rem) 0;
  border-top: 1px solid var(--line);
  list-style: none !important;
}
.wp-block-latest-posts > li:first-child,
.wp-block-latest-posts__list > li:first-child { border-top: none; }
.wp-block-latest-posts__post-title,
.wp-block-latest-posts > li > a:first-child {
  color: var(--crimson) !important;
  font-family: 'Noto Serif TC', serif !important;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  display: block;
  margin-bottom: 0.5rem;
}
.wp-block-latest-posts__post-title:hover,
.wp-block-latest-posts > li > a:first-child:hover {
  color: var(--crimson-bright) !important;
}
.wp-block-latest-posts__post-excerpt,
.wp-block-latest-posts__post-date {
  color: var(--ink-muted) !important;
  font-size: 0.95rem;
  line-height: 1.9;
}
.wp-block-latest-posts__post-date {
  display: block;
  font-size: 0.88rem;
  letter-spacing: 0.1em;
  margin-bottom: 0.5rem;
  color: var(--gold-deep) !important;
}

/* Latest comments — hide; not used on a temple site */
.wp-block-latest-comments { display: none !important; }

/* Author bylines + gravatars — off-brand on a reverent temple site.
   Hide the "by {author} {date}" meta line that shows under post titles. */
.wp-block-post-author,
.wp-block-post-author-name,
.wp-block-post-author-biography,
.wp-block-avatar,
.wp-block-post-comments-form,
.entry-meta,
.entry-byline,
.byline,
.post-meta,
img.avatar,
.avatar,
.gravatar,
img[src*="gravatar.com"],
img[src*="secure.gravatar.com"] {
  display: none !important;
}

/* Bullet treatment — quiet circle, slightly tinted toward cinnabar */
.wp-block-list:not(.lyt-footer-nav):not(.lyt-nav) li::marker {
  color: var(--gold-deep);
}

/* Brand the a8c/blog-posts block (used on the home news section) */
.wp-block-a8c-blog-posts h2 a,
.wp-block-a8c-blog-posts h3 a {
  color: var(--crimson) !important; text-decoration: none;
}
.wp-block-a8c-blog-posts h2 a:hover,
.wp-block-a8c-blog-posts h3 a:hover { color: var(--crimson-bright) !important; }

/* Default search inputs / buttons — brand them */
.wp-block-search__button,
.wp-block-search__inside-wrapper button {
  background: var(--gold) !important;
  color: var(--crimson-deep) !important;
  border: 2px solid var(--gold) !important;
  letter-spacing: 0.08em;
}

/* Custom footer template part — brand nav lists */
.lyt-footer .lyt-footer-nav { list-style: none; padding: 0; margin: 0; }
.lyt-footer .lyt-footer-nav li { margin: 0; }
.lyt-footer .lyt-footer-nav a { color: var(--cream) !important; text-decoration: none; letter-spacing: 0.06em; transition: color .2s; }
.lyt-footer .lyt-footer-nav a:hover { color: var(--gold) !important; }
.lyt-footer h4 { color: var(--gold) !important; }

/* ============================================================
   Full-bleed the custom full-width sections (hero/stats/cards/map, the About
   wrapper, donation offerings, and the cart/checkout shell) out of the theme's
   constrained content column.

   Approach: pull each section out by exactly the root padding so it spans the
   true content width (.wp-site-blocks). This deliberately AVOIDS `width:100vw`,
   which (a) includes the vertical scrollbar width and overflows phones by ~15px,
   and (b) combined with `calc(50% - 50vw)` left a ~24px rightward shift from the
   root padding. width:auto + negative root-padding margins is scrollbar-safe and
   shift-free on every screen. The inner content re-centers via its own max-width.
   ============================================================ */
html, body { overflow-x: hidden; }
.wp-block-post-content > .lyt-hero,
.wp-block-post-content > .lyt-stats-bar,
.wp-block-post-content > .lyt-guide,
.wp-block-post-content > .lyt-map-section,
.wp-block-post-content > .lyt-page,
.wp-block-post-content > .lyt-fortune-page,
.wp-block-post-content > .lyt-offerings,
.wp-block-post-content > .lyt-shop-page {
  width: auto;
  max-width: none;
  margin-left: calc(-1 * var(--wp--style--root--padding-left, 24px));
  margin-right: calc(-1 * var(--wp--style--root--padding-right, 24px));
}

/* ============================================================
   Pass 1 — header anchor + kill the empty cream band above the hero.
   PRODUCT.md / DESIGN.md: header should anchor the page like the cinnabar
   footer anchors the bottom; the top-of-page should meet the hero/banner
   cleanly, not float on uncomposed gap.
   ============================================================ */

/* 1. Header chrome — paper field + hairline gold rule (anchors the top) */
header.wp-block-template-part > .wp-block-group {
  background-color: var(--cream) !important;
  border-bottom: 1px solid rgba(201, 168, 76, .45);
  box-shadow: 0 1px 0 rgba(201, 168, 76, .45);
}

/* 2. Collapse the empty band — when the first content child is a full-bleed
      section, the post-content wrapper should not add its global top padding. */
.wp-block-post-content.has-global-padding {
  padding-top: 0 !important;
}
/* But keep horizontal padding for non-bleed content */
.wp-block-post-content.has-global-padding > :not(.lyt-hero):not(.lyt-stats-bar):not(.lyt-guide):not(.lyt-map-section):not(.lyt-page):not(.lyt-fortune-page) {
  padding-left: var(--wp--style--root--padding-left, 1rem);
  padding-right: var(--wp--style--root--padding-right, 1rem);
}
/* 2b. Three stacked containers each add ~19px margin-top that don't collapse
        (flow-root). When the page begins with a full-bleed lyt-* section,
        zero all three margins. Selector note: the page's actual first DOM
        child is an invisible <style> block from wp:html, so :first-child
        won't match the visible hero — use :has() instead. */
main:has(.lyt-hero),
main:has(.lyt-page),
main:has(.lyt-fortune-page) { margin-top: 0 !important; }

.wp-block-post-content:has(> .lyt-hero),
.wp-block-post-content:has(> .lyt-page),
.wp-block-post-content:has(> .lyt-fortune-page) { margin-top: 0 !important; }

/* The full-bleed sections themselves never need a top margin */
.wp-block-post-content > .lyt-hero,
.wp-block-post-content > .lyt-page,
.wp-block-post-content > .lyt-fortune-page,
.wp-block-post-content > .lyt-stats-bar,
.wp-block-post-content > .lyt-guide,
.wp-block-post-content > .lyt-map-section { margin-top: 0 !important; }

/* ============================================================
   Offering modal — Popup Maker (theme-274) + Contact Form 7
   Brand-styles the 供奉 form: cream paper card, crimson/gold,
   serif type, styled inputs + submit + close.  [2026-06-13]
   ============================================================ */
.pum-theme-274.pum-overlay { background: rgba(26,10,0,.72) !important; }

.pum-theme-274 .pum-container.popmake {
  background: var(--lyt-paper, #FFFDF6) !important;
  border: 1px solid var(--lyt-gold, #C9A84C) !important;
  border-top: 4px solid var(--lyt-gold, #C9A84C) !important;
  border-radius: 4px !important;
  box-shadow: 0 24px 70px rgba(36,8,8,.45) !important;
  padding: clamp(26px,4vw,48px) clamp(20px,4vw,40px) !important;
  font-family: 'Noto Serif TC','EB Garamond',serif !important;
}

.center-donation-form { text-align: left; }
.center-donation-form h2 {
  color: var(--lyt-crimson, #5C0F0F) !important;
  font-family: inherit !important; font-weight: 600 !important;
  letter-spacing: .08em !important;
  font-size: clamp(1.4rem, 1.2rem + 1vw, 1.85rem) !important;
  text-align: center !important; margin: 0 0 1.6rem !important;
}
.center-donation-form .form-row { margin-bottom: 1.15rem; }
.center-donation-form label {
  display: inline-block; color: var(--lyt-ink, #2C1810);
  font-weight: 500; letter-spacing: .03em; margin-bottom: .4rem; font-size: 1rem;
}
.center-donation-form input[type=text],
.center-donation-form input[type=email],
.center-donation-form input[type=number],
.center-donation-form textarea {
  width: 100% !important; box-sizing: border-box !important;
  background: #fff !important; border: 1px solid #D4B896 !important;
  border-radius: 2px !important; padding: .72rem .9rem !important;
  font-family: inherit !important; font-size: 1.05rem !important;
  color: var(--lyt-ink, #2C1810) !important;
  transition: border-color .2s, box-shadow .2s !important;
}
.center-donation-form input:focus,
.center-donation-form textarea:focus {
  outline: none !important; border-color: var(--lyt-crimson, #5C0F0F) !important;
  box-shadow: 0 0 0 3px rgba(92,15,15,.12) !important;
}
.center-donation-form .donation-submit-button,
.pum input.wpcf7-submit {
  display: inline-block !important;
  background: var(--lyt-gold, #C9A84C) !important;
  color: var(--lyt-night, #1A0A00) !important;
  border: 2px solid var(--lyt-gold, #C9A84C) !important;
  border-radius: 2px !important; font-family: inherit !important;
  font-weight: 700 !important; letter-spacing: .1em !important;
  font-size: 1.05rem !important; padding: .9rem 2.6rem !important;
  margin-top: .6rem !important; cursor: pointer !important;
  transition: background .2s, transform .2s !important;
}
.center-donation-form .donation-submit-button:hover,
.pum input.wpcf7-submit:hover {
  background: var(--lyt-gold-soft, #E8C97A) !important;
  border-color: var(--lyt-gold-soft, #E8C97A) !important;
  transform: translateY(-1px) !important;
}
.pum-theme-274 .pum-close {
  background: transparent !important; color: var(--lyt-crimson, #5C0F0F) !important;
  border: 1px solid rgba(92,15,15,.3) !important; border-radius: 2px !important;
  width: auto !important; height: auto !important; padding: .35rem .85rem !important;
  font-family: 'Noto Serif TC', serif !important; font-size: .92rem !important;
  letter-spacing: .08em !important; line-height: 1.4 !important;
  top: 14px !important; right: 14px !important;
  box-shadow: none !important; text-shadow: none !important;
}
.pum-theme-274 .pum-close:hover {
  background: var(--lyt-crimson, #5C0F0F) !important; color: var(--lyt-cream, #FDF6E3) !important;
}
.center-donation-form .wpcf7-not-valid-tip {
  color: var(--lyt-crimson-bright, #8B1A1A) !important;
  font-family: inherit !important; font-size: .9rem !important;
}
.center-donation-form .wpcf7-response-output {
  border: 1px solid var(--lyt-gold, #C9A84C) !important;
  color: var(--lyt-ink, #2C1810) !important;
  background: var(--lyt-cream, #FDF6E3) !important;
  border-radius: 2px !important; font-family: inherit !important;
  padding: .8rem 1rem !important;
}

/* ============================================================
   A11y — gold-deep (#9A7830) is only 3.8:1 on cream and fails
   WCAG AA for small text. Force section kickers and small gold
   labels to the darker gold-text (#6E571B ≈ 6.4:1). !important
   so this beats the per-page inline .lyt-kicker rules.  [2026-06-13]
   ============================================================ */
:root { --gold-text: #6E571B; }
[class*="kicker"],
.lyt-sec-head .lyt-kicker,
.lyt-off-head .lyt-off-kicker,
.section-tag,
.wp-block-latest-posts__post-date {
  color: var(--gold-text, #6E571B) !important;
}