/* Kingdom Living — supplemental styles (block theme).
   Core design tokens live in theme.json; this file adds polish + a11y helpers. */

/* Self-hosted fonts (add woff2 files to assets/fonts/, then uncomment):
@font-face { font-family:'Cormorant Garamond'; src:url('../fonts/CormorantGaramond-SemiBold.woff2') format('woff2'); font-weight:600; font-display:swap; }
@font-face { font-family:'Inter'; src:url('../fonts/Inter-Regular.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Inter'; src:url('../fonts/Inter-SemiBold.woff2') format('woff2'); font-weight:600; font-display:swap; }
*/

:root {
  --kl-burgundy:#5C1A2E; --kl-burgundy-2:#7B2439; --kl-gold:#B08D3F; --kl-gold-ink:#8A6D25;
  --kl-beige:#EADDC7; --kl-champagne:#F3E9D8; --kl-ivory:#FBF7F0; --kl-charcoal:#2E2A2B; --kl-navy:#23324D;
}

/* Visible focus states everywhere (WCAG 2.2 AA) */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible,
.wp-block-button__link:focus-visible {
  outline: 3px solid var(--kl-gold-ink);
  outline-offset: 2px;
}

/* Skip link */
.skip-link { position:absolute; left:-999px; top:0; z-index:1000; background:var(--kl-burgundy); color:#fff; padding:.6rem 1rem; }
.skip-link:focus { left:0; }

/* Announcement bar */
.kl-announcement { background:var(--kl-burgundy); color:var(--kl-ivory); text-align:center; font-size:.95rem; }
.kl-announcement a { color:var(--kl-ivory); text-decoration:underline; }
.kl-header-row,
.kl-content-main {
  box-sizing:border-box;
  padding-left:max(1rem, env(safe-area-inset-left));
  padding-right:max(1rem, env(safe-area-inset-right));
}

/* Pin both sides of the hero contrast so global heading/link tokens cannot
   turn burgundy-on-burgundy inside the Cover block. */
.kl-hero {
	position:relative;
	isolation:isolate;
	overflow:hidden;
	background:linear-gradient(135deg, #3d1020 0%, var(--kl-burgundy) 54%, var(--kl-burgundy-2) 100%);
	background-image:
	  linear-gradient(90deg, rgba(61,16,32,.94) 0%, rgba(92,26,46,.86) 47%, rgba(92,26,46,.76) 100%),
	  var(--kl-hero-image, linear-gradient(135deg, #3d1020, var(--kl-burgundy-2)));
	background-position:center;
	background-size:cover;
	color:var(--kl-ivory);
}
.kl-hero .wp-block-cover__background { background:transparent!important; }
.kl-hero .wp-block-cover__inner-container { position:relative; z-index:1; width:min(100% - 2rem, 58rem); }
.kl-hero h1, .kl-hero p { color:var(--kl-ivory); }
.kl-hero .wp-block-button__link { background:var(--kl-ivory); color:var(--kl-burgundy)!important; }
.kl-hero .is-style-outline .wp-block-button__link { background:transparent; border-color:var(--kl-ivory); color:var(--kl-ivory)!important; }
.kl-hero .wp-block-button__link:hover { background:#fff; color:var(--kl-burgundy-2)!important; }
.kl-hero .is-style-outline .wp-block-button__link:hover { background:rgba(255,255,255,.12); color:#fff!important; }

/* Devotional photography complements the journal catalogue. */
.kl-visual-story { padding-inline:max(1rem, env(safe-area-inset-left)); }
.kl-section-intro { max-width:42rem; margin-inline:auto; }
.kl-visual-grid { gap:1.5rem; margin-top:2.25rem; }
.kl-visual-grid > .wp-block-column { min-width:0; }
.kl-devotional-card { overflow:hidden; padding:0 0 1rem; background:#fff; border:1px solid var(--kl-beige); border-radius:16px; }
.kl-devotional-card h3 { margin:1.25rem 1.25rem .6rem; font-size:1.45rem; }
.kl-devotional-card p { margin:0 1.25rem; }
.kl-image-card { margin:0; overflow:hidden; background:var(--kl-champagne); }
.kl-image-card img { display:block; width:100%; height:auto; aspect-ratio:3 / 2; object-fit:cover; }
.kl-article-grid .wp-block-post { min-width:0; padding:1.25rem; border:1px solid var(--kl-beige); border-radius:16px; background:#fff; }
.kl-article-grid .wp-block-post-featured-image { margin:0 0 1.2rem; overflow:hidden; border-radius:10px; }
.kl-article-grid .wp-block-post-featured-image img { width:100%; height:auto; aspect-ratio:3 / 2; object-fit:cover; }
.kl-article-grid .wp-block-post-title { margin-top:0; }
@media (max-width: 781px) {
  .kl-hero { min-height:62vh!important; background-position:62% center; }
  .kl-visual-grid { gap:1.25rem; }
}

.kl-catalogue-unavailable { margin:2rem auto; max-width:42rem; padding:1.4rem; border:1px solid var(--kl-beige); border-radius:12px; background:#fff; text-align:center; }
.kl-catalogue-unavailable p { margin:.25rem 0; }

/* Footer links sit on burgundy, so the global burgundy link token is not
   readable here. Keep the existing light footer treatment, underlines and a
   high-contrast keyboard ring explicit rather than relying on inheritance. */
.kl-site-footer a { color:var(--kl-ivory); }
.kl-site-footer p a { text-decoration:underline; text-underline-offset:.16em; }
.kl-site-footer a:hover { color:#fff; }
.kl-site-footer a:focus-visible { color:#fff; outline-color:var(--kl-ivory); }

/* Cards */
.kl-card { background:#fff; border:1px solid var(--kl-beige); border-radius:12px; }

/* Digital badge */
.kl-badge { display:inline-block; background:var(--kl-gold-ink); color:#fff; border-radius:999px; padding:.15rem .7rem; font-size:.8rem; letter-spacing:.03em; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* Readable checkout on phones */
@media (max-width: 480px) {
  .kl-header-row { flex-wrap:nowrap!important; gap:.65rem; }
  .kl-header-row .wp-block-site-logo { flex:0 1 7.5rem; }
  .kl-header-row .wp-block-site-logo img { width:auto; max-width:7.5rem; height:auto; }
  .kl-header-row > .wp-block-group { flex-wrap:nowrap!important; gap:.35rem; margin-left:auto; }
  .kl-header-row .wp-block-navigation { order:2; }
  .kl-header-row .wp-block-buttons { order:1; }
  .kl-header-row .wp-block-button__link { padding:.65rem .75rem; white-space:nowrap; font-size:.84rem; }
  .woocommerce form .form-row { width:100% !important; }
}

/* Price placeholder styling */
.kl-price-tbc { color:var(--kl-gold-ink); font-weight:600; }

/* --- Affiliate helpers (used by Kingdom Living Core plugin) --- */
.kl-aff-link { text-decoration: underline; }
.kl-aff-button { display:inline-block; background:var(--kl-burgundy); color:var(--kl-ivory)!important; border-radius:10px; padding:.8rem 1.6rem; font-weight:600; text-decoration:none; }
.kl-aff-button:hover { background:var(--kl-burgundy-2); }
.kl-aff-banner { margin:1.5rem 0; text-align:center; }
.kl-aff-tag { display:inline-block; margin-top:.35rem; font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--kl-gold-ink); }
.kl-aff-disclosure { background:var(--kl-champagne); border-left:4px solid var(--kl-gold-ink); padding:.6rem .9rem; border-radius:8px; font-size:.9rem; }

/* Public header finish: keep the existing identity and mobile menu behavior. */
.kl-site-header .kl-announcement { max-width:none; margin-block:0; padding-inline:1rem; }
.kl-site-header .kl-header-row { max-width:76rem; margin:0 auto; gap:1.5rem; }
.kl-header-row .wp-block-site-logo { flex:0 0 auto; }
.kl-header-row > .wp-block-group { margin-block:0; }
.kl-header-row .wp-block-button__link { min-height:44px; display:inline-flex; align-items:center; }
.kl-site-header a { text-underline-offset:.18em; }
@media (min-width:960px) { .kl-header-row { flex-wrap:nowrap!important; } .kl-header-row > .wp-block-group { flex-wrap:nowrap!important; } }
@media (prefers-reduced-motion:no-preference) and (hover:hover) { .kl-card { transition:box-shadow .18s ease; } .kl-card:hover { box-shadow:0 12px 28px rgba(46,42,43,.1); } }