/*
Theme Name: Tormi Farms
Theme URI: https://tormifarms.org
Description: Tormi Farms, Shai Hills, Ghana. Astra child theme — Zakley Enterprises. Sister to the Thormi ministry theme; same structure, green colourway.
Author: Zakley Enterprises
Author URI: https://zakley.com
Template: astra
Version: 1.0.12
License: Proprietary
Text Domain: tormi-farms
*/

/* ============================================
   CUSTOM PROPERTIES
   Green colourway of RevMike's brand family.
   Under 50.1_BRANDS/_LOGO_SYSTEM.md the emblem
   is shared and COLOUR is the only local adjust,
   so this file is the ministry theme with a
   different :root and nothing else re-invented.
   The gold is kept deliberately - it is his
   through-line across every brand he owns.
   ============================================ */
:root {
  --site-primary: #14402C;      /* deep field green */
  --site-primary-soft: #1D5A3C;
  --site-accent: #D9B84C;       /* wheat gold */
  --site-accent-pale: #EFE4C8;
  --site-light-bg: #FBF9F4;
  --site-ink: #23262B;
  --site-ink-soft: #5B6270;
}

/* ============================================
   TYPE
   Lato, same as the ministry. The two names are
   one letter apart, so the family reads as one
   hand; colour is what tells them apart.
   ============================================ */
body,
.ast-container {
  color: var(--site-ink);
}

h1, h2, h3, h4,
.entry-title,
.site-title {
  font-family: 'Lato', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--site-primary);
  letter-spacing: -0.01em;
}

h1 { font-weight: 900; }
h2, h3 { font-weight: 700; }

/* The rule under a heading is the family device, carried from the ministry's
   printed booklet. Here it runs wheat gold on green. */
.entry-content h2::after {
  content: "";
  display: block;
  width: 3.25rem;
  height: 2px;
  margin-top: 0.6rem;
  background: var(--site-accent);
}

/* ============================================
   HEADER / FOOTER
   ============================================ */
.site-header,
.ast-primary-header-bar {
  background: var(--site-primary) !important;
}

/* ⚠⚠ Fixed 2026-10-08. These two rules used to be unscoped (.main-header-menu > li > a),
   so they also hit Astra's PHONE dropdown, which is WHITE: every item but the current one
   rendered white-on-white (1:1) and the current one accent on #F0F5FA. Live on both sites
   from launch until measured at 375px with the menu open. White text belongs to the dark
   DESKTOP bar only. */
.site-header .site-title a,
#ast-desktop-header .main-header-menu > li > a {
  color: #fff !important;
}

#ast-desktop-header .main-header-menu > li > a:hover,
#ast-desktop-header .main-header-menu > .current-menu-item > a {
  color: var(--site-accent) !important;
}

/* Phone dropdown: dark ink on white. The current page is marked by weight and an accent
   bar, not by accent-coloured text (accent on white is too faint to read). */
#ast-mobile-header .main-header-menu .menu-link,
#ast-mobile-header .main-header-menu .ast-menu-toggle {
  color: var(--site-ink) !important;
}
#ast-mobile-header .main-header-menu .menu-link:hover,
#ast-mobile-header .main-header-menu .menu-link:focus {
  color: var(--site-primary) !important;
  text-decoration: underline;
}
#ast-mobile-header .main-header-menu .current-menu-item > .menu-link {
  color: var(--site-primary) !important;
  font-weight: 700;
  box-shadow: inset 4px 0 0 var(--site-accent);
}
/* A long item ("THE HOLY SPIRIT vs FAMILIAR SPIRITS & FALLEN ANGELS") wrapped with the
   item spacing as its line gap, so its second line read as a separate item. And the open
   dropdown had no bottom edge, so the page text it covers ran straight into it. */
#ast-mobile-header .main-header-menu .menu-link {
  line-height: 1.35;              /* gap WITHIN a wrapped item */
  padding-top: 0.8em;             /* gap BETWEEN items: Astra spaced them by line-height, */
  padding-bottom: 0.8em;          /* so it moves to padding (rows measured 43px at 375px) */
}
#ast-mobile-header .ast-mobile-header-content {
  border-bottom: 3px solid var(--site-accent);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
}

/* Header mark (functions.php adds it via the astra_logo filter) sits beside the text
   title, never instead of it. 40px desktop, 32px on phones. "Tormi Farms" is short and
   stays on one line at 375px (checked); the ministry theme needed a smaller phone title. */
.ast-site-identity {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.site-mark {
  display: inline-flex;
  flex: 0 0 auto;
  line-height: 0;
}
.site-mark img {
  width: 40px;
  height: 40px;
  display: block;
}
/* Mobile menu button. Astra paints it with its global blue (#046BD2), which measured
   2.24:1 on this green - below the 3:1 WCAG 1.4.11 floor for a control.
   Brand accent instead: wheat #D9B84C on green #14402C = 6.06:1 (measured, WCAG formula).
   Covers the open (hamburger) and close (X) icons, and hover/focus. */
[data-section="section-header-mobile-trigger"] .ast-button-wrap .ast-mobile-menu-trigger-minimal,
[data-section="section-header-mobile-trigger"] .ast-button-wrap .ast-mobile-menu-trigger-minimal:hover,
[data-section="section-header-mobile-trigger"] .ast-button-wrap .ast-mobile-menu-trigger-minimal:focus {
  color: var(--site-accent) !important;
}
[data-section="section-header-mobile-trigger"] .ast-button-wrap .mobile-menu-toggle-icon .ast-mobile-svg,
[data-section="section-header-mobile-trigger"] .ast-button-wrap .ast-mobile-svg {
  fill: var(--site-accent) !important;
}

@media (max-width: 921px) {
  .ast-site-identity { gap: 0.6rem; }
  .site-mark img { width: 32px; height: 32px; }
}

.site-footer,
.ast-small-footer {
  background: var(--site-primary);
  color: rgba(255, 255, 255, 0.82);
}

/* ⚠ Astra 4.x builds the footer from ROWS, each with its own background, and those
   rows paint OVER .site-footer. Colouring only .site-footer leaves a white bar
   carrying the white text inherited from it - an invisible copyright line. That is
   exactly what shipped on both these sites until the render-check caught it.
   .ast-small-footer above is the OLD Astra selector; it is kept for tolerance but it
   is not what this theme's parent actually renders. */
.site-primary-footer-wrap,
.site-below-footer-wrap {
  background: var(--site-primary) !important;
}

.site-below-footer-wrap,
.site-primary-footer-wrap,
.site-below-footer-wrap .ast-builder-html-element,
.site-primary-footer-wrap .ast-builder-html-element {
  color: rgba(255, 255, 255, 0.82);
}

.site-footer a,
.ast-small-footer a,
.site-below-footer-wrap a,
.site-primary-footer-wrap a { color: var(--site-accent); }

/* ============================================
   GOOGLE MAP  [tormi_map]
   Full-width, no horizontal scroll on a phone.
   ============================================ */
.tormi-map {
  margin: 1.75rem 0;
}

.tormi-map iframe {
  display: block;
  width: 100%;
  max-width: 100%;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(20, 64, 44, 0.18);
}

.tormi-map-caption {
  margin: 0.55rem 0 0;
  font-size: 0.9rem;
  color: var(--site-ink-soft);
}

@media (max-width: 768px) {
  .tormi-map iframe { height: 320px; }
}

/* ============================================
   SISTER-SITE CROSS-LINK  (ledger #370)
   Sits inside the footer, so it is light-on-dark
   like the rest of it. Contrast is measured after
   deploy, not assumed from the hex.
   ============================================ */
/* Round 3 (Gene, on his phone): it hugged the bottom edge - measured 1px from the end of the
   page. It got real room above and below.
   Round 4 (Ginny): the copyright line must be LAST, so the block now prints at the TOP of the
   footer (functions.php). Same room around the button; the hairline moves under it, between
   button and copyright; the home-bar inset moves to the copyright row, which is now last. */
.site-sister-link {
  text-align: center;
  padding: 2rem 1rem 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  background: var(--site-primary);
  font-size: 0.95rem;
  line-height: 1.4;
}
.site-below-footer-wrap {
  padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)) !important;
}

/* An outlined button in the accent, so it reads as something to tap (Gene: it "doesn't
   look clickable"). Accent on the field and field on the accent are the same pair, so
   both states keep the measured ratio. Min 44px tall. Focus gets its own white ring,
   because a dotted accent outline was nearly invisible on the dark footer. */
.site-sister-link a.site-sister-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 44px;
  max-width: 100%;
  padding: 0.6rem 1.4rem;
  border: 2px solid var(--site-accent);
  border-radius: 3px;
  color: var(--site-accent);
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.site-sister-link a.site-sister-button:hover,
.site-sister-link a.site-sister-button:focus-visible {
  background: var(--site-accent);
  color: var(--site-primary);
}
.site-sister-link a.site-sister-button:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}
.site-sister-arrow {
  transition: transform 0.15s ease;
}
.site-sister-link a.site-sister-button:hover .site-sister-arrow {
  transform: translateX(3px);
}
@media (prefers-reduced-motion: reduce) {
  .site-sister-link a.site-sister-button,
  .site-sister-arrow { transition: none; }
}

/* ============================================
   BUTTONS
   ============================================ */
.ast-button,
.wp-block-button__link,
button,
input[type="submit"] {
  background: var(--site-primary);
  border-color: var(--site-primary);
  color: #fff;
  border-radius: 3px;
  letter-spacing: 0.02em;
}

.ast-button:hover,
.wp-block-button__link:hover,
button:hover,
input[type="submit"]:hover {
  background: var(--site-accent);
  border-color: var(--site-accent);
  color: var(--site-primary);
}

/* ============================================
   NOTE / PULL-QUOTE BLOCK
   The ministry's equivalent panel comes from its
   printed booklet. The farm has no printed
   antecedent, so this is the family device
   carried across rather than anything claimed
   to be from Tormi's own material.
   ============================================ */
blockquote,
.tormi-note {
  background: var(--site-accent-pale);
  border-left: 3px solid var(--site-accent);
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
  font-style: italic;
  color: var(--site-ink);
}

/* ============================================
   FORMS (Contact Form 7 - estate standard)
   ============================================ */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea {
  width: 100%;
  padding: 0.6rem 0.7rem;
  border: 1px solid #d5d9e0;
  border-radius: 3px;
  background: #fff;
}

.wpcf7 input:focus,
.wpcf7 textarea:focus {
  outline: none;
  border-color: var(--site-accent);
  box-shadow: 0 0 0 2px rgba(217, 184, 76, 0.28);
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
  .entry-content h2::after { width: 2.5rem; }
}

/* ⚠⚠ Fixed 20260928_1810. The 2026-09-27 pass above coloured the two footer WRAPS and
   .ast-builder-html-element - but NOT .ast-footer-copyright, which Astra colours
   independently with its own slate default rgb(51,65,85). So the copyright line that the
   comment above is about was STILL wrong, just dark-on-dark instead of white-on-white:
   measured 1.13 on tormifarms and 1.65 on thormi against a 4.5 AA floor.
   ⭐ Measure the element the reader sees, not the elements you changed. */
.ast-footer-copyright,
.ast-footer-copyright *,
.site-below-footer-wrap .ast-footer-copyright,
.site-primary-footer-wrap .ast-footer-copyright {
  color: rgba(255, 255, 255, 0.82);
}
.ast-footer-copyright a,
.ast-footer-copyright a:visited { color: var(--site-accent); }