/*
Theme Name: Realink Classic
Theme URI: https://realinkletters.wpenginepowered.com
Author: Vicky
Description: Standalone theme for Real Ink Letters — the Anglican Care design system applied end to end. Old Glory Blue sticky nav, cream spacer band with Patriot Gold border, Soft Red CTAs, Merriweather headings, Midnight Navy footer, visible breadcrumbs. No parent theme, no plugins required. WooCommerce-ready.
Version: 1.1.2
Requires at least: 6.0
License: GNU General Public License v2 or later
Text Domain: realink-classic
Tags: e-commerce, custom-menu, custom-logo
*/

/* ============================================
   TOKENS — Anglican Care Brand Design System
   ============================================ */
:root {
  --ac-red: #B22234;
  --ac-blue: #0A3161;
  --ac-white: #FFFFFF;
  --ac-gold: #C4A747;
  --ac-cream: #F8F5F0;
  --ac-navy: #1B2A4A;
  --ac-grey: #6B7280;
  --ac-cta: #D44E5C;
  --ac-cta-hover: #B83A47;
  --ac-light-blue: #E8EEF5;
  --ac-font-heading: 'Merriweather', 'Lora', Georgia, serif;
  --ac-font-body: 'Inter', 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --ac-container-max: 1140px;
  --ac-measure: 70ch;
  --ac-border: 1px solid #e5e7eb;
  --ac-border-gold: 2px solid var(--ac-gold);
}

/* ============================================
   BASE
   ============================================ */
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--ac-font-body);
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--ac-navy);
  background: var(--ac-white);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }
a { color: var(--ac-blue); text-decoration: none; }
a:hover { color: var(--ac-cta); }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--ac-font-heading);
  color: var(--ac-blue);
  line-height: 1.25;
  margin: 0 0 0.75em;
}
h1 { font-size: clamp(2rem, 5vw, 2.9rem); font-weight: 700; }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.1rem); }
h3 { font-size: 1.3rem; }
p { margin: 0 0 1.25em; }

.wrap {
  max-width: var(--ac-container-max);
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ============================================
   HEADER — logo, nav, cart, account. One section,
   one breakpoint, no exceptions. Desktop = single
   row, never wraps. Mobile = everything (links +
   cart + account) collapses into one dropdown panel.
   ============================================ */
.site-header {
  background: var(--ac-blue);
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 2px 12px rgba(0,0,0,0.15);
}
.site-header__bar {
  max-width: var(--ac-container-max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 1.5rem;
}

/* logo */
.site-header__logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--ac-white);
  flex-shrink: 0;
  white-space: nowrap;
}
.site-header__logo:hover { color: var(--ac-white); }
.site-header__logo-text {
  display: block;
  font-family: var(--ac-font-heading);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.02em;
}
.site-header__logo-sub {
  display: block;
  font-size: 0.68rem;
  font-weight: 400;
  color: var(--ac-gold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* nav = links + actions, one flex row, never wraps on desktop */
.site-header__nav {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex: 1 1 auto;
  justify-content: flex-end;
  min-width: 0;
}
.site-header__links {
  display: flex;
  align-items: center;
  gap: 0.1rem;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-shrink: 0;
}
.site-header__links a {
  display: block;
  padding: 0.5rem 0.7rem;
  color: rgba(255,255,255,0.92);
  font-size: 0.9rem;
  font-weight: 500;
  border-radius: 4px;
  white-space: nowrap;
}
.site-header__links a:hover { color: var(--ac-gold); }
.site-header__links .current-menu-item > a,
.site-header__links .current_page_item > a { color: var(--ac-gold); }

/* highlighted "Order Letters" CTA (menu item 32 in the current menu) */
.site-header__links .menu-item-32 > a {
  background: var(--ac-cta);
  color: var(--ac-white) !important;
  font-weight: 600;
  border-radius: 6px;
}
.site-header__links .menu-item-32 > a:hover { background: var(--ac-cta-hover); }

/* cart + account, always inline with links on desktop */
.site-header__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  padding-left: 0.85rem;
  border-left: 1px solid rgba(255,255,255,0.2);
}
.site-header__cart {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0.4rem;
  color: rgba(255,255,255,0.92);
}
.site-header__cart:hover { color: var(--ac-gold); }
.site-header__cart svg { width: 20px; height: 20px; display: block; }
.site-header__cart-count {
  position: absolute;
  top: -3px;
  right: -3px;
  background: var(--ac-cta);
  color: var(--ac-white);
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
}
.site-header__account,
.site-header__signup {
  padding: 0.5rem 0.7rem;
  color: rgba(255,255,255,0.92);
  font-size: 0.9rem;
  font-weight: 500;
  border-radius: 4px;
  white-space: nowrap;
}
.site-header__account:hover, .site-header__signup:hover { color: var(--ac-gold); }
.site-header__signup {
  background: var(--ac-cta);
  color: var(--ac-white) !important;
  font-weight: 600;
  border-radius: 6px;
}
.site-header__signup:hover { background: var(--ac-cta-hover); color: var(--ac-white); }

/* hamburger toggle — hidden on desktop, only exists below the breakpoint */
.site-header__toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  flex-shrink: 0;
}
.site-header__toggle span {
  display: block;
  width: 24px;
  height: 2px;
  margin: 5px 0;
  background: var(--ac-white);
  border-radius: 2px;
}

/* ---- the ONE breakpoint. Above it: single row, no wrap, ever.
   Below it: links+actions collapse into a dropdown panel. ---- */
@media (max-width: 1220px) {
  .site-header__toggle { display: block; }
  .site-header__nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    background: var(--ac-blue);
    padding: 0.5rem 1.5rem 1rem;
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
  }
  .site-header__nav.is-open { display: flex; }
  .site-header__links {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 0;
  }
  .site-header__links a { padding: 0.75rem 0.25rem; }
  .site-header__links .menu-item-32 { margin: 0.4rem 0; }
  .site-header__links .menu-item-32 > a { display: inline-block; }
  .site-header__actions {
    width: 100%;
    border-left: none;
    border-top: 1px solid rgba(255,255,255,0.18);
    margin-top: 0.5rem;
    padding: 0.85rem 0.25rem 0;
  }
}


/* ============================================
   BREADCRUMBS
   ============================================ */
.crumbs {
  font-size: 0.85rem;
  color: var(--ac-grey);
  padding: 1.2rem 1.5rem 0;
  max-width: var(--ac-container-max);
  margin: 0 auto;
}
.crumbs a { color: var(--ac-blue); }
.crumbs a:hover { color: var(--ac-cta); text-decoration: underline; }

/* ============================================
   CONTENT
   ============================================ */
.site-main {
  padding: 2.5rem 0 4rem;
}
.entry-title { margin-bottom: 0.5em; }
.entry-content { max-width: 100%; }
.entry-content h2, .entry-content h3 { margin-top: 2em; }

.entry-content ul, .entry-content ol { padding-left: 1.4em; }
.entry-content li { margin-bottom: 0.4em; }
.entry-content blockquote {
  border-left: 3px solid var(--ac-gold);
  margin: 1.5em 0;
  padding: 0.5em 1.25em;
  background: var(--ac-cream);
  font-style: italic;
}

/* pricing tables */
.entry-content table,
.woocommerce table {
  border-collapse: collapse;
  width: 100%;
  margin: 1.5em 0;
}
.entry-content table th {
  background: var(--ac-blue);
  color: var(--ac-white);
  font-family: var(--ac-font-body);
  font-weight: 600;
  padding: 0.7rem 1rem;
  text-align: left;
}
.entry-content table td {
  border-bottom: 1px solid var(--ac-light-blue);
  padding: 0.7rem 1rem;
}
.entry-content table tr:nth-child(even) td { background: #FDFCF9; }

/* page meta / blog */
.post-meta {
  font-size: 0.85rem;
  color: var(--ac-grey);
  margin-bottom: 1.5em;
}
.post-list-item {
  border-bottom: var(--ac-border);
  padding: 1.5rem 0;
}
.post-list-item h2 { margin-bottom: 0.35em; }
.post-list-item h2 a { color: var(--ac-blue); }
.post-list-item h2 a:hover { color: var(--ac-cta); }

/* ============================================
   BUTTONS — Soft Red primary CTAs
   ============================================ */
.button,
.entry-content a.button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
input[type="submit"],
button[type="submit"] {
  display: inline-block;
  background: var(--ac-cta);
  color: var(--ac-white) !important;
  padding: 0.85rem 1.75rem;
  border: none;
  border-radius: 6px;
  font-family: var(--ac-font-body);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
}
.button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
input[type="submit"]:hover {
  background: var(--ac-cta-hover);
}
.woocommerce a.button.alt,
.woocommerce button.button.alt { background: var(--ac-cta); }
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover { background: var(--ac-cta-hover); }

/* forms */
input[type="text"], input[type="email"], input[type="tel"],
input[type="password"], input[type="search"], input[type="url"],
textarea, select {
  font-family: var(--ac-font-body);
  font-size: 1rem;
  padding: 0.65rem 0.8rem;
  border: 1px solid #d5dbe3;
  border-radius: 6px;
  color: var(--ac-navy);
  background: var(--ac-white);
}
input:focus, textarea:focus, select:focus {
  outline: 2px solid var(--ac-gold);
  outline-offset: 1px;
}

/* ============================================
   FOOTER — Midnight Navy with gold
   ============================================ */
.ac-footer {
  background: var(--ac-navy);
  color: rgba(255,255,255,0.85);
  padding: 3rem 1.5rem 1.5rem;
  margin-top: clamp(3rem, 8vw, 6rem);
}
.ac-footer-inner {
  max-width: var(--ac-container-max);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: space-between;
  align-items: flex-start;
}
.ac-footer-brand { max-width: 320px; }
.ac-footer-brand .brand-name {
  font-family: var(--ac-font-heading);
  font-weight: 700;
  color: var(--ac-white);
  font-size: 1.15rem;
}
.ac-footer-brand .brand-tag {
  color: var(--ac-gold);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 0.4em;
}
.ac-footer .footer-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; }
.ac-footer .footer-links a { color: rgba(255,255,255,0.8); font-size: 0.9rem; }
.ac-footer .footer-links a:hover { color: var(--ac-gold); }
.ac-footer-bottom {
  max-width: var(--ac-container-max);
  margin: 2rem auto 0;
  border-top: 1px solid rgba(255,255,255,0.15);
  padding-top: 1.5rem;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.7);
}
.footer-legal { margin: 0; }

@media (max-width: 700px) {
  .ac-footer-inner { flex-direction: column; }
}


/* ============================================
   UTILITY CLASSES
   ============================================ */
.ri-alt { background: var(--ac-light-blue); padding: 3rem 1.5rem; }
.ri-cream { background: var(--ac-cream); padding: 3rem 1.5rem; }
.ri-band { background: var(--ac-navy); color: var(--ac-white); padding: 2rem 1.5rem; }
.ri-band h2, .ri-band h3 { color: var(--ac-white); }
.ri-gold-rule { border: none; border-top: 2px solid var(--ac-gold); width: 64px; margin: 1.5rem 0; }
a.ri-cta {
  display: inline-block;
  background: var(--ac-cta);
  color: var(--ac-white) !important;
  padding: 0.85rem 1.75rem;
  border-radius: 6px;
  font-weight: 600;
}
a.ri-cta:hover { background: var(--ac-cta-hover); }
.ri-disclaimer { color: var(--ac-grey); font-size: 0.85rem; }

/* ============================================
   FAQ ACCORDION
   ============================================ */
.entry-content details.faq-item {
  border-bottom: var(--ac-border);
  padding: 0.25rem 0;
}
.entry-content details.faq-item summary {
  font-family: var(--ac-font-heading);
  color: var(--ac-blue);
  font-size: 1.2rem;
  font-weight: 700;
  cursor: pointer;
  padding: 1rem 2rem 1rem 0;
  position: relative;
  list-style: none;
}
.entry-content details.faq-item summary::-webkit-details-marker { display: none; }
.entry-content details.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 0.9rem;
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--ac-gold);
  transition: transform 0.15s ease;
}
.entry-content details.faq-item[open] summary::after {
  content: "−";
}
.entry-content details.faq-item p {
  padding: 0 0 1.25rem;
  margin: 0;
  color: var(--ac-navy);
}

/* ============================================
   Hide legacy WooCommerce sidebar leakage on product pages
   ============================================ */
#sidebar[role="complementary"] { display: none !important; }

/* ============================================
   FOOTER — legal row
   ============================================ */
.ac-footer-legal-row {
  max-width: var(--ac-container-max);
  margin: 0.75rem auto 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.25rem;
}
.ac-footer-legal-row a { color: rgba(255,255,255,0.65); font-size: 0.8rem; }
.ac-footer-legal-row a:hover { color: var(--ac-gold); }

/* ============================================
   WOOCOMMERCE CONTAINER CONSISTENCY
   WooCommerce renders its own #primary/#main wrapper
   instead of our .wrap — give it the exact same width,
   side padding, and breadcrumb treatment as every other
   page so the shop/product pages don't look like a
   different site.
   ============================================ */
#primary.content-area {
  max-width: var(--ac-container-max);
  margin: 0 auto;
  padding: 0 1.5rem;
}
.woocommerce-breadcrumb {
  font-size: 0.85rem;
  color: var(--ac-grey);
  padding: 1.2rem 0 0;
  margin: 0 0 1rem;
}
.woocommerce-breadcrumb a { color: var(--ac-blue); }
.woocommerce-breadcrumb a:hover { color: var(--ac-cta); text-decoration: underline; }

/* ============================================
   HOMEPAGE HERO — machine-writing video bg
   ============================================ */
.ril-hero {
  position: relative;
  min-height: 86vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background-color: var(--ac-navy);
  background-size: cover;
  background-position: center;
}
.ril-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ril-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(27,42,74,0.82) 0%, rgba(27,42,74,0.55) 45%, rgba(27,42,74,0.75) 100%);
}
.ril-hero__content {
  position: relative;
  z-index: 2;
  padding: 6rem 1.5rem;
}
.ril-hero__title {
  font-family: var(--ac-font-heading);
  font-size: clamp(2.2rem, 5.2vw, 3.7rem);
  font-weight: 700;
  line-height: 1.14;
  color: var(--ac-white);
  margin: 0 0 1.4rem;
  max-width: 21ch;
}
.ril-hero__title em {
  font-style: normal;
  color: var(--ac-gold);
}
.ril-hero__sub {
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
  line-height: 1.65;
  color: rgba(255,255,255,0.92);
  max-width: 38rem;
  margin: 0 0 2.4rem;
}
.ril-hero__cta {
  display: inline-block;
  background: var(--ac-cta);
  color: var(--ac-white);
  font-weight: 600;
  font-size: 1.05rem;
  padding: 0.95rem 2rem;
  border-radius: 6px;
  text-decoration: none;
  transition: background 0.15s ease;
}
.ril-hero__cta:hover { background: var(--ac-cta-hover); color: var(--ac-white); }

/* reduced motion: keep the poster still, don't autoplay the video */
@media (prefers-reduced-motion: reduce) {
  .ril-hero__video { display: none; }
}