/*
Theme Name: Lambton Catholic
Theme URI: https://lambtoncatholic.ca
Description: Brand theme for the Lambton County Catholic Family of Parishes — St. Joseph (Corunna), St. Philip (Petrolia), St. Christopher (Forest), and Our Lady Help of Christians (Watford). Child theme of Twenty Twenty-Five. Liturgical palette of navy, brass, wine, and parchment; Cormorant Garamond / Source Serif 4 / Libre Franklin.
Author: Lambton County Catholic Family of Parishes
Template: twentytwentyfive
Version: 1.0.0
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lambton-catholic
Tags: block-patterns, full-site-editing, church, editorial
*/

/* ------------------------------------------------------------
   Design tokens live in assets/tokens/ and are enqueued from
   functions.php. Only rules that theme.json cannot express
   belong in this file. Keep it short.
   ------------------------------------------------------------ */

/* Eyebrow — tracked uppercase label. Applied as a block style
   on the Paragraph block ("Eyebrow" in the Styles panel). */
.is-style-eyebrow {
  font-family: var(--font-ui);
  font-size: var(--text-eyebrow);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-accent);
  margin-bottom: var(--space-3);
}
.is-style-eyebrow.has-text-color { color: inherit; }

/* Badge — small chip. Block style on the Paragraph block. */
.is-style-badge {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  color: var(--brand-primary);
  background: var(--surface-raised);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  font-variant-numeric: tabular-nums;
}

/* Card — Group block style: white on parchment, hairline, warm lift. */
.is-style-card {
  background: var(--surface-card);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  padding: var(--space-5) var(--space-6);
  transition: box-shadow var(--duration-base) var(--ease-standard),
              transform var(--duration-base) var(--ease-standard);
}
.is-style-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }

/* Card with a parish accent rule along the top edge. */
.is-style-card-accent { border-top: 3px solid var(--brand-accent); }

/* Buttons — four block styles matching the design system. */
.wp-block-button .wp-block-button__link {
  font-family: var(--font-ui);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-semibold);
  border-radius: var(--radius-sm);
  padding: 12px 22px;
  transition: background var(--duration-fast) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard);
}
.wp-block-button .wp-block-button__link:active { transform: translateY(1px); }

.is-style-btn-primary .wp-block-button__link {
  background: var(--brand-primary); color: var(--text-on-dark); border: 1px solid var(--brand-primary);
}
.is-style-btn-primary .wp-block-button__link:hover { background: var(--brand-primary-hover); }

.is-style-btn-accent .wp-block-button__link {
  background: var(--brand-accent); color: var(--ink-900); border: 1px solid var(--brand-accent);
}
.is-style-btn-accent .wp-block-button__link:hover { background: var(--brand-accent-hover); }

.is-style-btn-secondary .wp-block-button__link {
  background: transparent; color: var(--brand-primary); border: 1px solid var(--border-default);
}
.is-style-btn-secondary .wp-block-button__link:hover { background: var(--surface-raised); }

.is-style-btn-ghost .wp-block-button__link {
  background: transparent; color: var(--brand-primary); border: 1px solid transparent;
}
.is-style-btn-ghost .wp-block-button__link:hover { background: var(--surface-raised); }

/* On dark sections, outline buttons invert. */
.has-navy-background-color .is-style-btn-secondary .wp-block-button__link,
.wp-block-cover .is-style-btn-secondary .wp-block-button__link {
  color: #fff; border-color: rgba(255, 255, 255, 0.5);
}

/* Mass time table — tabular figures, hairline rules, no zebra. */
.lc-mass-times {
  background: var(--surface-card);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}
.lc-mass-times__title {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: var(--weight-semibold);
  color: var(--text-strong);
  margin: 0;
  padding: var(--space-5) var(--space-5) var(--space-4);
  border-bottom: 2px solid var(--brand-accent);
}
.lc-mass-times__row {
  display: grid;
  grid-template-columns: 130px 110px 1fr;
  gap: var(--space-4);
  align-items: baseline;
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--border-hairline);
  font-family: var(--font-ui);
  font-size: var(--text-body-sm);
  color: var(--text-body);
}
.lc-mass-times__row:first-of-type { border-top: 0; }
.lc-mass-times__day { font-weight: var(--weight-semibold); color: var(--text-strong); }
.lc-mass-times__time { font-variant-numeric: tabular-nums; font-weight: var(--weight-semibold); color: var(--brand-primary); }
.lc-mass-times__note {
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--border-hairline);
  background: var(--surface-raised);
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  color: var(--text-muted);
}
@media (max-width: 600px) {
  .lc-mass-times__row { grid-template-columns: 1fr; gap: 2px; }
}

/* Parish crest — typographic monogram shield with lancet top. */
.lc-crest {
  display: inline-flex; flex-direction: column; align-items: center; gap: var(--space-3);
  text-decoration: none;
}
.lc-crest__shield {
  width: 92px; height: 112px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-arch);
  border: 2px solid currentColor;
  font-family: var(--font-display);
  font-size: 34px; font-weight: var(--weight-semibold);
  letter-spacing: 0.02em;
}
.lc-crest__name {
  font-family: var(--font-display);
  font-size: var(--text-h4);
  font-weight: var(--weight-semibold);
  color: var(--text-strong);
  text-align: center; line-height: var(--leading-snug);
}
.lc-crest__town {
  font-family: var(--font-ui);
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}
.lc-crest--joseph      { color: var(--parish-joseph); }
.lc-crest--philip      { color: var(--parish-philip); }
.lc-crest--christopher { color: var(--parish-christopher); }
.lc-crest--olhc        { color: var(--parish-olhc); }

/* Wordmark cross in a brass lancet frame — header and footer. */
.lc-mark {
  width: 42px; height: 42px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid var(--brand-accent);
  border-radius: var(--radius-arch);
  font-family: var(--font-display);
  font-size: 26px; line-height: 1;
  color: var(--brand-accent);
}

/* Sticky header — parchment at 92% with a gentle blur. */
.lc-header {
  position: sticky; top: 0; z-index: 20;
  background: rgba(250, 246, 238, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border-hairline);
}

/* Links */
a { color: var(--text-link); }
a:hover { color: var(--text-link-hover); }

/* Focus — brass ring everywhere, never the browser default. */
:where(a, button, input, select, textarea, .wp-block-button__link):focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

/* Forms — restyle whichever forms plugin is installed. */
input[type="text"], input[type="email"], input[type="tel"],
input[type="search"], select, textarea {
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: var(--text-body);
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  width: 100%;
}
::placeholder { color: var(--text-faint); }

/* Motion — honour the visitor's preference. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}