/*
Theme Name: Zamseed
Theme URI: https://zamseed.co.zm
Author: BongoHive Consult
Author URI: https://bongohive.co.zm
Description: Custom WordPress theme for Zamseed - Zambia's trusted seed company since 1975. Features Elementor integration, custom widgets, and responsive design optimized for the agricultural sector.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 8.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: zamseed
Tags: custom-logo, custom-menu, featured-images, full-width-template, theme-options, translation-ready, elementor

Zamseed Theme - Climate Smart Seed for Zambian farmers.
*/

/* ==========================================================================
   CSS Variables - Design Tokens from React/Figma
   ========================================================================== */

:root {
    /* Primary Colors */
    --zs-primary: #2d5a27;
    --zs-primary-light: #4c8c44;
    --zs-primary-dark: #1e3d1a;
    --zs-secondary: #d35400;
    /* Figma "Color/Casablanca Dark". Was #f39c12 (orange): 14 widget rules
       already fell back to #c48c33 and only 3 to #f39c12, so every component
       meaning gold was rendering orange. */
    --zs-accent: #c48c33;
    --zs-accent-text: #9a6c1f;
    --zs-earth: #5d4037;

    /* Background Colors */
    --zs-bg: #faf9f6;
    --zs-warm: #fdfcf9;
    --zs-warm-deep: #f1ede5;
    --zs-green-soft: #eef4df;
    --zs-earth-soft: #ebe7df;
    --zs-dark-green: #0f2418;

    /* Text Colors */
    --zs-text: #1c1c1c;
    --zs-muted: #555555;
    --zs-border: rgba(0, 0, 0, 0.08);

    /* Card & UI */
    --zs-card: #ffffff;
    --zs-shadow: 0 18px 50px rgba(45, 90, 39, 0.12);
    --zs-shadow-sm: 0 10px 30px rgba(0, 0, 0, 0.04);

    /* Typography */
    --zs-font-serif: 'Cormorant Garamond', serif;
    --zs-font-sans: 'Inter', sans-serif;

    /* Spacing */
    --zs-container-max: 1200px;
    --zs-container-padding: 20px;
    --zs-section-padding: 92px;
    --zs-section-padding-mobile: 68px;

    /* Motion scale */
    --zs-ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
    --zs-ease-emphasised: cubic-bezier(0.16, 1, 0.3, 1);
    --zs-ease-hover: cubic-bezier(0.2, 0.8, 0.2, 1);
    --zs-motion-fast: 220ms;
    --zs-motion-medium: 520ms;
    --zs-motion-slow: 650ms;
    --zs-motion-ease: var(--zs-ease-standard);

    /* Transitions */
    --zs-transition: background-color var(--zs-motion-fast) var(--zs-ease-hover), color var(--zs-motion-fast) var(--zs-ease-hover), border-color var(--zs-motion-fast) var(--zs-ease-hover);
    --zs-transition-card: transform 260ms var(--zs-ease-hover), box-shadow 260ms var(--zs-ease-hover), border-color 260ms var(--zs-ease-hover);
}

/* ==========================================================================
   Base Styles
   ========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--zs-font-sans);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.6;
    color: var(--zs-text);
    background-color: var(--zs-bg);
}

/* ==========================================================================
   Typography
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--zs-font-serif);
    font-weight: 700;
    line-height: 1.1;
    margin-top: 0;
    color: var(--zs-text);
}

h1 {
    font-size: clamp(2.85rem, 5.25vw, 4.45rem);
    line-height: 1.05;
}

h2 {
    font-size: clamp(2.3rem, 4.5vw, 3.4rem);
    line-height: 1.08;
}

h3 {
    font-size: clamp(1.5rem, 2vw, 1.625rem);
    line-height: 1.15;
}

h4 {
    font-size: clamp(1.19rem, 1.5vw, 1.3rem);
    line-height: 1.2;
}

p {
    margin-top: 0;
    margin-bottom: 1rem;
}

.lead {
    font-size: 1.125rem;
    line-height: 1.65;
}

.eyebrow {
    font-family: var(--zs-font-sans);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--zs-primary);
}

a {
    color: var(--zs-primary);
    text-decoration: none;
    transition: var(--zs-transition);
}

a:hover {
    color: var(--zs-primary-light);
}

/* ==========================================================================
   Layout
   ========================================================================== */

.container {
    width: min(var(--zs-container-max), calc(100% - var(--zs-container-padding) * 2));
    margin-left: auto;
    margin-right: auto;
}

.section {
    padding: var(--zs-section-padding) 0;
}

.section--warm {
    background-color: var(--zs-warm);
}

.section--warm-deep {
    background-color: var(--zs-warm-deep);
}

.section--dark {
    background-color: var(--zs-dark-green);
    color: #ffffff;
}

.section--dark h1,
.section--dark h2,
.section--dark h3 {
    color: #ffffff;
}

/* Grid Patterns */
.grid {
    display: grid;
    gap: 28px;
}

.grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 50px;
    padding: 0 30px;
    font-family: var(--zs-font-sans);
    font-size: 0.875rem;
    font-weight: 700;
    text-decoration: none;
    border: 2px solid transparent;
    border-radius: 999px;
    cursor: pointer;
    transition: var(--zs-transition);
}

.btn:hover {
    transform: translateY(-2px);
}

.btn--primary {
    background-color: var(--zs-primary);
    color: #ffffff;
    box-shadow: 0 12px 28px rgba(45, 90, 39, 0.18);
}

.btn--primary:hover {
    background-color: var(--zs-primary-light);
    color: #ffffff;
}

.btn--secondary {
    background-color: transparent;
    border-color: var(--zs-primary);
    color: var(--zs-primary);
}

.btn--secondary:hover {
    background-color: var(--zs-primary);
    color: #ffffff;
}

.btn--light {
    background-color: #ffffff;
    border-color: #ffffff;
    color: var(--zs-primary);
}

.btn--light:hover {
    background-color: var(--zs-green-soft);
}

.btn--sm {
    height: 42px;
    padding: 0 20px;
    font-size: 0.8125rem;
}

/* ==========================================================================
   Cards
   ========================================================================== */

.card {
    background-color: var(--zs-card);
    border: 1px solid var(--zs-border);
    border-radius: 16px;
    overflow: hidden;
    transition: var(--zs-transition-card);
}

.card:hover {
    box-shadow: var(--zs-shadow);
    transform: translateY(-4px);
}

.card__image {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.card__content {
    padding: 24px;
}

.card__title {
    margin-bottom: 8px;
}

.card__meta {
    font-size: 0.875rem;
    color: var(--zs-muted);
}

/* Chip/Tag */
.chip {
    display: inline-flex;
    align-items: center;
    height: 29px;
    padding: 0 14px;
    font-family: var(--zs-font-sans);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background-color: var(--zs-green-soft);
    color: var(--zs-primary);
    border-radius: 999px;
}

.chip--active {
    background-color: var(--zs-primary);
    color: #ffffff;
}

.chip--secondary {
    background-color: var(--zs-secondary);
    color: #ffffff;
}

/* ==========================================================================
   Forms
   ========================================================================== */

.form-group {
    margin-bottom: 20px;
}

.form-label {
    display: block;
    margin-bottom: 8px;
    font-size: 0.8125rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--zs-primary);
}

.form-input,
.form-textarea,
.form-select {
    width: 100%;
    height: 40px;
    padding: 11px 14px;
    font-family: var(--zs-font-sans);
    font-size: 1.125rem;
    color: var(--zs-text);
    background-color: var(--zs-warm);
    border: 2px solid var(--zs-border);
    border-radius: 12px;
    transition: var(--zs-transition);
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
    outline: none;
    border-color: var(--zs-primary);
}

.form-textarea {
    height: auto;
    min-height: 120px;
    resize: vertical;
}

/* ==========================================================================
   Header
   ========================================================================== */

/*
 * Admin-bar offset for the fixed header.
 *
 * The header is position:fixed at top:0 and the WordPress admin bar occupies
 * the same space with a far higher z-index, so while logged in the bar painted
 * over the logo (logo 28-52px, bar 0-46px). Nothing was clipping it — overflow
 * is visible — it was simply occluded. Scoped to .admin-bar so the public
 * header is untouched, and using WordPress's own breakpoint: the bar is 32px
 * from 783px up and 46px below that, where it also stops being fixed.
 */
.admin-bar .site-header {
    top: 32px;
}

@media screen and (max-width: 782px) {
    .admin-bar .site-header {
        top: 46px;
    }
}

/*
 * The header is position:fixed, so it is out of flow and reserves no space.
 * Nothing pads <main>, which is fine for the many templates whose first section
 * compensates itself (.hero has padding-top: 80px, and every Elementor page hero
 * carries its own offset) — but a page with no content at all, such as page 76
 * whose _elementor_data is `[]`, collapses <main> to zero height and paints the
 * footer underneath the header.
 *
 * min-height rather than padding-top: padding would double the offset on every
 * template that already compensates, whereas a floor only takes effect when the
 * page has nothing to push the footer down. 80px is the header height; the
 * .admin-bar case needs no variant because the bar pushes <html> down instead of
 * overlapping the document.
 */
.site-main {
    display: block;
    min-height: 80px;
}

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    height: 80px;
    background-color: rgba(255, 255, 255, 0.64);
    box-shadow: 0 8px 30px rgba(45, 90, 39, 0.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: background-color 220ms ease, box-shadow 220ms ease;
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    width: min(var(--zs-container-max), calc(100% - 48px));
    padding: 0;
}

.site-logo {
    display: flex;
    align-items: center;
}

/*
 * 64px in an 80px bar, up from 56px. Client feedback: the top-left mark reads
 * small next to the 160px footer logo. 64px is the most the bar takes while
 * keeping an even 8px above and below; anything larger crowds the rule.
 */
.site-logo img {
    height: 64px;
    width: auto;
}

.main-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
}

.main-nav__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 12px;
    border-radius: 999px;
    font-family: var(--zs-font-sans);
    /*
     * 13.5px, measured off the Figma header (`11140:10904`, captured in
     * docs/homepage-figma-review/figma-home-1440.png): the uppercase nav labels
     * have a 10px cap height, which at Inter's 0.727 cap ratio is ~13.75px. The
     * previous 0.75rem (12px) rendered the whole nav a step small against the
     * design.
     */
    font-size: 0.84375rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #555555;
    transition: color 200ms ease, background-color 200ms ease;
}

/*
 * Figma shows the active item (HOME) as accent-coloured text with no pill —
 * measured #c48c33 exactly. The pill is a hover affordance only, so the resting
 * active state now matches the design while hover keeps its feedback.
 */
.current-menu-item > a .main-nav__link,
.current-menu-ancestor > a .main-nav__link {
    color: var(--zs-accent, #c48c33);
}

.main-nav__link:hover {
    color: var(--zs-accent, #c48c33);
    background-color: rgba(255, 255, 255, 0.36);
}

.header-ctas {
    display: flex;
    align-items: center;
    gap: 16px;
}

.header-ctas .btn {
    min-height: 42px;
    height: 42px;
    padding-inline: 20px;
    font-size: 0.8125rem;
}

/*
 * The outline CTA in the Figma header (`11140:10904`) is not the global
 * .btn--secondary: it has a solid white fill, a 1px #0a2f1a hairline and a
 * neutral #4e5153 label — measured, not eyeballed. .btn--secondary is a
 * transparent 2px pill in --zs-primary and is consumed by widgets on six other
 * pages, so the correction is scoped to the header chrome rather than applied to
 * the shared button. Hover keeps the global fill-on-hover behaviour.
 *
 * Note for the design owner: #0a2f1a and #4e5153 are not in the theme token set.
 */
.header-ctas .btn--secondary,
.mobile-nav__ctas .btn--secondary {
    background-color: #ffffff;
    border-width: 1px;
    border-color: #0a2f1a;
    color: #4e5153;
}

.header-ctas .btn--secondary:hover,
.header-ctas .btn--secondary:focus-visible,
.mobile-nav__ctas .btn--secondary:hover,
.mobile-nav__ctas .btn--secondary:focus-visible {
    background-color: var(--zs-primary);
    border-color: var(--zs-primary);
    color: #ffffff;
}

/* Text logo fallback (no custom logo and no logo.svg present) */
.site-logo__text {
    font-family: var(--zs-font-serif);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: var(--zs-primary);
    text-decoration: none;
}

.site-logo .custom-logo {
    height: 64px;
    width: auto;
    display: block;
}

/* Desktop navigation list */
.main-nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.main-nav__list li {
    margin: 0;
}

.main-nav__list > li {
    position: relative;
}

.main-nav .sub-menu {
    position: absolute;
    /*
     * Flush against the trigger, deliberately.
     *
     * This was `calc(100% + 8px)`, which left an 8px band that belonged to no
     * element in the <li> subtree — `document.elementFromPoint` in it returned
     * `.site-header__inner`, not the menu item. Moving the pointer down towards
     * the panel therefore left the item and fired `mouseleave`, which closed the
     * panel before the pointer could arrive, so the dropdown was unreachable by
     * mouse. The panel is also wider than its trigger, so a diagonal move
     * towards the item text left the trigger horizontally as well.
     *
     * `top: 100%` makes the panel's own border box start exactly at the
     * trigger's bottom edge, so no position between the two belongs to neither.
     * Do not reintroduce a gap here with `top`, `margin-top` or a `::before`
     * spacer: a pseudo-element's box is hit-tested by `elementFromPoint` but
     * does not put `:hover` on the element that generated it, so it cannot
     * bridge this. If the design needs visible separation, it has to come from
     * inside the panel's own box.
     */
    top: 100%;
    left: 0;
    z-index: 1001;
    min-width: 220px;
    list-style: none;
    margin: 0;
    padding: 8px;
    border: 1px solid rgba(45, 90, 39, 0.12);
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.96);
    box-shadow: 0 18px 38px rgba(28, 28, 28, 0.12);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-4px);
    transition:
        opacity 180ms ease,
        transform 180ms ease,
        visibility 0ms linear 180ms;
}

.main-nav__list > li:hover > .sub-menu,
.main-nav__list > li:focus-within > .sub-menu,
.main-nav__list > li.is-open > .sub-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition-delay: 0ms;
}

.main-nav .sub-menu li {
    margin: 0;
}

.main-nav .sub-menu a {
    display: block;
    padding: 10px 12px;
    border-radius: 6px;
    color: var(--zs-text);
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.35;
    text-decoration: none;
}

/*
 * wp_nav_menu()'s `link_before` wraps EVERY link in .main-nav__link, submenu
 * links included, so the top-level pill styling — uppercase, 800 weight,
 * letter-spacing, a 40px min-height and its own 12px padding — landed on
 * dropdown items and won over the rules above. "Our Team" rendered as a second
 * row of shouty nav labels in a needlessly tall panel. Neutralise the span
 * inside a panel and let the <a> above own the presentation.
 */
.main-nav .sub-menu .main-nav__link {
    display: block;
    min-height: 0;
    padding: 0;
    border-radius: 0;
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: normal;
    text-transform: none;
    color: inherit;
    background-color: transparent;
}

.main-nav .sub-menu a:hover,
.main-nav .sub-menu a:focus-visible {
    color: var(--zs-primary);
    background-color: rgba(45, 90, 39, 0.08);
}

.main-nav__link:focus-visible,
.mobile-nav__list a:focus-visible,
.menu-toggle:focus-visible {
    outline: 2px solid var(--zs-primary);
    outline-offset: 3px;
}

/* Mobile Menu Toggle */
.menu-toggle {
    display: none;
    padding: 8px;
    background: none;
    border: none;
    cursor: pointer;
}

.menu-toggle__bar {
    display: block;
    width: 24px;
    height: 2px;
    border-radius: 2px;
    background-color: var(--zs-text);
    transition: transform var(--zs-motion-fast) var(--zs-ease-hover), opacity var(--zs-motion-fast) var(--zs-ease-hover);
}

.menu-toggle__bar + .menu-toggle__bar {
    margin-top: 5px;
}

.menu-toggle.is-active .menu-toggle__bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.menu-toggle.is-active .menu-toggle__bar:nth-child(2) {
    opacity: 0;
}

.menu-toggle.is-active .menu-toggle__bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* Mobile navigation panel (hidden by default; opened via .is-active from JS) */
.mobile-nav {
    display: block;
    position: fixed;
    top: 80px;
    left: 0;
    right: 0;
    height: calc(100vh - 80px);
    height: calc(100dvh - 80px);
    z-index: 999;
    background-color: #ffffff;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-10px);
    transition:
        opacity 260ms var(--zs-ease-standard),
        transform 260ms var(--zs-ease-standard),
        visibility 0ms linear 260ms;
}

/*
 * The admin bar pushes the fixed header down (see .admin-bar .site-header
 * above), but the mobile panel kept its 80px offset, so while logged in it
 * opened underneath the header and overflowed the viewport by the bar's height.
 */
.admin-bar .mobile-nav {
    top: 112px;
    height: calc(100vh - 112px);
    height: calc(100dvh - 112px);
}

@media screen and (max-width: 782px) {
    .admin-bar .mobile-nav {
        top: 126px;
        height: calc(100vh - 126px);
        height: calc(100dvh - 126px);
    }
}

.mobile-nav.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition-delay: 0ms;
}

.mobile-nav__inner {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding-top: 24px;
    padding-bottom: 32px;
}

.mobile-nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.mobile-nav__list li {
    margin: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.mobile-nav__list a {
    display: block;
    padding: 14px 0;
    font-family: var(--zs-font-sans);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--zs-text);
    text-decoration: none;
}

.mobile-nav__list a:hover {
    color: var(--zs-primary);
}

.mobile-nav__list .sub-menu {
    list-style: none;
    margin: 0;
    padding: 0 0 0 16px;
}

.mobile-nav__list .sub-menu li {
    border-bottom: 0;
}

.mobile-nav__list .sub-menu a {
    padding: 10px 0;
    font-size: 0.875rem;
    color: rgba(28, 28, 28, 0.78);
}

.mobile-nav__ctas {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
    background-color: #111111;
    color: #ffffff;
    padding: 66px 0 0;
}

.footer__grid {
    display: grid;

    /*
     * Proportional, not fixed — the original 478px 187px 187px 226px plus three
     * 80px gaps needed 1318px and overflowed the 1200px container.
     *
     * The ratios and gap below are re-derived from the Figma footer
     * (`11140:12707`, captured in docs/homepage-figma-review/figma-home-1440.png).
     * Measured column start offsets inside the 1200px container are 0, 559, 767
     * and 974, and the Contact column is 226px wide. Only the starts are
     * observable, so the gap is pinned by the one hard constraint in the design:
     * "Farmer Resources" is 176px wide and does not wrap, which caps the gap at
     * ~31px. At 32px the tracks resolve to 523 / 180 / 180 / 221 and the columns
     * start at 0, 555, 767, 979 — within 5px of Figma everywhere.
     *
     * The previous 2.56 : 1 : 1 : 1.21 with an 80px gap put the Company column
     * 53px to the left of the design.
     */
    grid-template-columns:
        minmax(0, 2.91fr)
        minmax(0, 1fr)
        minmax(0, 1fr)
        minmax(0, 1.23fr);
    gap: clamp(24px, 2.4vw, 32px);
    padding-bottom: 50px;
}

.footer__brand {
    max-width: 478px;
}

.footer__logo {
    width: 160px;
    height: 160px;
    margin-bottom: 24px;
    overflow: hidden;
}

.footer__logo a,
.footer__logo img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.footer__logo-text {
    color: #fff;
    /*
     * Was var(--font-heading) — a token from assets/css/main.css, which is a
     * different (and unenqueued) design system. It resolved to nothing here, so
     * the text-logo fallback silently rendered in Inter instead of the serif.
     */
    font-family: var(--zs-font-serif);
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 700;
    line-height: 1.1;
    text-decoration: none;
}

.footer__description {
    color: rgba(255, 255, 255, 0.7);
    /*
     * Figma wraps this paragraph at ~375px inside a 523px track, sets a 23px
     * line pitch on 16px text and leaves 34px before the social row. Without a
     * measure it ran the full column width, and the inherited 1.6 body leading
     * pushed the social row 12px below the design.
     */
    max-width: 400px;
    line-height: 1.45;
    margin-bottom: 28px;
}

.footer__social {
    display: flex;
    /*
     * Wraps rather than compressing. The row held one icon for as long as
     * Facebook and Instagram were pulled, so nothing had ever pushed it; it is
     * back to two and will take more, and the brand column is the narrowest it
     * gets at the 761px breakpoint.
     */
    flex-wrap: wrap;
    gap: 10px;
}

.footer__social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    color: #ffffff;
    transition: var(--zs-transition);
}

.footer__social-link:hover {
    background-color: var(--zs-primary);
    transform: translateY(-2px);
}

.footer__heading {
    font-family: var(--zs-font-serif);
    font-size: 1.5625rem;
    font-weight: 700;
    line-height: 1.15;
    text-transform: none;
    letter-spacing: 0;
    color: #ffffff;
    /*
     * Figma column rhythm (`11140:12707`): heading cap top at y+70, first link
     * ink top at y+127, link ink pitch 39px. 20px/12px produced ~120px and 34px
     * — the whole link stack sat high and tight against the design.
     */
    margin-bottom: 28px;
}

.footer__links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer__links li {
    margin-bottom: 16px;
}

.footer__links li:last-child {
    margin-bottom: 0;
}

.footer__links a {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.875rem;
    line-height: 1.6;
}

.footer__links a:hover {
    color: #ffffff;
}

.footer__contact-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.875rem;
}

/*
 * The phone and e-mail entries are anchors, and nothing scoped their colour, so
 * they inherited the global `a { color: var(--zs-primary) }` — dark green text
 * on the #111 footer, a contrast failure and visibly wrong against Figma, which
 * renders them in the same 70%-white as the address line.
 */
.footer__contact-item a {
    color: rgba(255, 255, 255, 0.7);
}

.footer__contact-item a:hover,
.footer__contact-item a:focus-visible {
    color: #ffffff;
}

.footer__contact-icon {
    flex-shrink: 0;
    width: 15px;
    color: var(--zs-accent, #c48c33);
}

.footer__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    /*
     * Figma puts the rule at y+439 and the footer edge at y+519, i.e. 80px of
     * bottom bar around a 22px line — 28px above and below. 16px made the whole
     * footer ~34px shorter than the 519px design frame.
     */
    padding: 28px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.5);
}

/*
 * Figma separates the two legal links with a thin vertical rule rather than
 * whitespace alone. Rendered as a border on the flex gap so it appears only
 * between links — which matters because either link is omitted when its page
 * does not exist (see footer.php).
 */
.footer__legal {
    display: flex;
    align-items: center;
}

.footer__legal a {
    color: rgba(255, 255, 255, 0.5);
    padding-left: 22px;
    margin-left: 22px;
    border-left: 1px solid rgba(255, 255, 255, 0.22);
    line-height: 1.4;
}

.footer__legal a:first-child {
    padding-left: 0;
    margin-left: 0;
    border-left: 0;
}

.footer__legal a:hover {
    color: #ffffff;
}

/*
 * Nothing scoped a focus ring inside the footer, so every link here fell back
 * to the user agent's default. On the #111 ground that ring is close to
 * invisible, and the site's own --zs-primary (dark green) would be no better —
 * hence white, which is the only high-contrast option against this background.
 */
.footer__logo a:focus-visible,
.footer__social-link:focus-visible,
.footer__links a:focus-visible,
.footer__contact-item a:focus-visible,
.footer__legal a:focus-visible,
.footer__copyright a:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 3px;
}

/* ==========================================================================
   Hero Section
   ========================================================================== */

.hero {
    position: relative;
    min-height: 600px;
    padding-top: 80px;
    display: flex;
    align-items: center;
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

.hero__overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(45, 90, 39, 0.85), rgba(15, 36, 24, 0.9));
}

.hero__content {
    position: relative;
    z-index: 1;
    max-width: 700px;
    color: #ffffff;
}

.hero__eyebrow {
    margin-bottom: 16px;
    color: var(--zs-accent);
}

.hero__title {
    color: #ffffff;
    margin-bottom: 24px;
}

.hero__description {
    font-size: 1.125rem;
    line-height: 1.65;
    margin-bottom: 32px;
    color: rgba(255, 255, 255, 0.9);
}

.hero__ctas {
    display: flex;
    gap: 16px;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

/* Above the mobile breakpoint, keep the mobile panel/toggle hidden even if
   the menu was left open before a resize. */
@media (min-width: 761px) {
    .menu-toggle,
    .mobile-nav,
    .mobile-nav.is-active {
        display: none;
    }
}

@media (max-width: 1080px) {
    .site-header__inner {
        padding: 0 40px;
    }

    /*
     * Between 761px (where the nav is replaced by the burger) and 1080px the
     * 40px inner padding above leaves ~648px for six nav items, which is less
     * than the ~664px the Figma-sized labels need. Tightening the per-item
     * padding and gap here keeps the row on one line instead of wrapping into
     * the 80px header.
     */
    .main-nav__list {
        gap: 4px;
    }

    .main-nav__link {
        padding: 0 8px;
        font-size: 0.8125rem;
    }

    .footer__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px;
    }

    .grid--4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 760px) {
    :root {
        --zs-section-padding: var(--zs-section-padding-mobile);
        --zs-container-padding: 14px;
    }

    .site-header__inner {
        padding: 0 20px;
    }

    .main-nav {
        display: none;
    }

    .menu-toggle {
        display: block;
    }

    .header-ctas {
        display: none;
    }

    .grid--2,
    .grid--3,
    .grid--4 {
        grid-template-columns: 1fr;
    }

    /*
     * The footer's mobile problem was never overflow — document.scrollWidth
     * tracks the viewport exactly at every width down to 360. It was height:
     * four full-width stacked blocks carrying desktop rhythm produced a 1209px
     * footer on a 360px phone, more than three viewport-heights of it, with the
     * 50px grid gutter and the 66px cap opening visible dead bands.
     *
     * Company and Farmer Resources are short link lists, so they pair up here
     * and the two full-bleed blocks — brand and contact — span the row. The
     * spacing below is the same rhythm scaled to the smaller measure, not a
     * different design.
     */
    .footer__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 32px 24px;
        padding-bottom: 32px;
    }

    .footer__brand,
    .footer__grid > .footer__column:last-child {
        grid-column: 1 / -1;
    }

    .site-footer {
        padding-top: 48px;
    }

    .footer__brand,
    .footer__description {
        max-width: none;
    }

    .footer__logo {
        width: 116px;
        height: 116px;
        margin-bottom: 20px;
    }

    .footer__description {
        margin-bottom: 24px;
    }

    .footer__heading {
        font-size: 1.375rem;
        margin-bottom: 18px;
    }

    /*
     * "Farmer Resources" needs two lines in a ~154px track and "Company" needs
     * one, so the two link stacks started at different heights. Reserving the
     * taller of the two on both keeps the lists on a shared top edge. Scoped
     * away from the contact column, which spans the row and never wraps.
     */
    .footer__grid > .footer__column:not(:last-child) .footer__heading {
        min-height: 2.3em;
    }

    .footer__links li {
        margin-bottom: 12px;
    }

    /*
     * 38px clears the 24px minimum on its own, but this is the one breakpoint
     * where the icons are actually thumbed. Grown with padding on the link, so
     * the glyph keeps its drawn size and only the hit area changes.
     */
    .footer__social-link {
        width: 44px;
        height: 44px;
    }

    .footer__bottom {
        flex-direction: column;
        gap: 12px;
        padding: 24px 0 28px;
        text-align: center;
    }

    .footer__legal {
        flex-wrap: wrap;
        justify-content: center;
    }

    .hero {
        min-height: 500px;
    }

    .hero__ctas {
        flex-direction: column;
    }

    .btn {
        width: 100%;
    }
}

/* ==========================================================================
   Animations
   ========================================================================== */

@keyframes heroTextIn {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-hero {
    animation: heroTextIn 0.65s ease both;
}

/* ==========================================================================
   Shared reveal animation system (see assets/js/widgets/widget-reveal.js)

   Elements are visible by default. widget-reveal.js only adds
   .zs-reveal-armed — the hidden pre-reveal state — to a [data-zs-reveal]
   element once it has confirmed IntersectionObserver support, that
   reduced motion isn't preferred, and that it isn't running inside the
   Elementor editor. If JS never runs at all, no element is ever armed,
   so content is never hidden for no-JS users or a failed observer.
   ========================================================================== */

[data-zs-reveal].zs-reveal-armed {
    opacity: 0;
    transition: opacity var(--zs-reveal-duration, var(--zs-motion-slow)) var(--zs-reveal-ease, var(--zs-motion-ease)) var(--zs-reveal-delay, 0ms),
                transform var(--zs-reveal-duration, var(--zs-motion-slow)) var(--zs-reveal-ease, var(--zs-motion-ease)) var(--zs-reveal-delay, 0ms),
                filter var(--zs-reveal-duration, var(--zs-motion-slow)) var(--zs-reveal-ease, var(--zs-motion-ease)) var(--zs-reveal-delay, 0ms);
    will-change: opacity, transform, filter;
}

[data-zs-reveal="fade-up"].zs-reveal-armed { transform: translateY(var(--zs-reveal-distance, 18px)); }
[data-zs-reveal="fade-down"].zs-reveal-armed { transform: translateY(calc(var(--zs-reveal-distance, 18px) * -1)); }
[data-zs-reveal="slide-left"].zs-reveal-armed { transform: translateX(var(--zs-reveal-distance, 18px)); }
[data-zs-reveal="slide-right"].zs-reveal-armed { transform: translateX(calc(var(--zs-reveal-distance, 18px) * -1)); }
[data-zs-reveal="fade-in"].zs-reveal-armed { transform: none; }
[data-zs-reveal="scale-in"].zs-reveal-armed { transform: scale(0.985); }
[data-zs-reveal="blur-in"].zs-reveal-armed {
    transform: translateY(calc(var(--zs-reveal-distance, 18px) * 0.5));
    filter: blur(4px);
}

[data-zs-reveal].zs-revealed {
    opacity: 1;
    transform: none;
    filter: none;
    will-change: auto;
}

[data-zs-reveal-hover="1"] {
    transition: transform 260ms var(--zs-ease-hover), box-shadow 260ms var(--zs-ease-hover);
}

[data-zs-reveal-hover="1"]:hover,
[data-zs-reveal-hover="1"]:focus-visible {
    transform: translateY(-4px);
}

/* Never let a reveal-in-progress state make a widget hard to edit. */
.elementor-editor-active [data-zs-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

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

    [data-zs-reveal] {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
    }
}

/* ==========================================================================
   Editorial routes (single.php, page.php, index.php, archive.php, search.php)

   These templates shipped with a full BEM class vocabulary and no stylesheet.
   A grep across style.css and assets/css/** found ZERO rules for
   .single-post__*, .post-meta, .reading-time, .post-navigation__*,
   .social-share__*, .breadcrumbs, .page-header, .archive-*, .search-*,
   .no-results, .pagination, .search-form__* or .screen-reader-text — so every
   route that is not an Elementor page rendered as unstyled HTML. That is post 1
   (/hello-world/), all 217 zs_dealer singles, all 9 zs_variety singles, the
   /dealer/ archive, every search result page and the 404 breadcrumb.

   assets/css/main.css does define a few of these, but it is a different and
   contradictory design system (--zamseed-green: #2d5016, Georgia headings) and
   is enqueued only by inc/class-theme.php, which is never required or
   instantiated. Nothing here depends on it.

   Additive only: no existing selector is redefined.
   ========================================================================== */

/* Screen-reader-only text used by the pagination arrows and the search form.
   Without this the words "Previous"/"Next"/"Search" render as visible labels. */
.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link:focus {
    position: fixed;
    top: 8px;
    left: 8px;
    z-index: 100000;
    width: auto;
    height: auto;
    margin: 0;
    padding: 12px 20px;
    clip: auto;
    clip-path: none;
    overflow: visible;
    border-radius: 8px;
    background-color: var(--zs-primary);
    color: #ffffff;
    font-family: var(--zs-font-sans);
    font-weight: 700;
}

/*
 * Clear the fixed 80px header. Each of these is the outermost element inside
 * <main> for its template, so the offset is applied once and cannot stack with
 * the .hero / Elementor heroes that already reserve their own space.
 */
.site-content,
.page-content,
.single-post,
.archive-page,
.search-results {
    padding-top: 80px;
}

/* --- Breadcrumbs (inc/template-functions.php::zamseed_breadcrumbs) -------- */

.breadcrumbs {
    margin-bottom: 20px;
}

.breadcrumbs__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: var(--zs-font-sans);
    font-size: 0.8125rem;
    color: var(--zs-muted);
}

.breadcrumbs__item a {
    color: var(--zs-muted);
}

.breadcrumbs__item a:hover {
    color: var(--zs-primary);
}

.breadcrumbs__separator {
    display: inline-flex;
    align-items: center;
    color: rgba(0, 0, 0, 0.25);
}

.breadcrumbs__separator svg {
    width: 14px;
    height: 14px;
}

.breadcrumbs__item--current {
    font-weight: 600;
    color: var(--zs-text);
}

/* --- Generic page / archive / search headers ----------------------------- */

.page-header,
.archive-header,
.search-header,
.single-post__header {
    padding-top: 56px;
    padding-bottom: 56px;
}

.page-header__title,
.archive-title,
.search-title {
    margin: 0 0 12px;
    font-family: var(--zs-font-serif);
    font-size: clamp(2.3rem, 4.5vw, 3.4rem);
    line-height: 1.08;
    color: var(--zs-text);
}

.search-title span {
    color: var(--zs-primary);
}

.page-header__subtitle,
.archive-description,
.search-count {
    max-width: 720px;
    margin: 0;
    color: var(--zs-muted);
}

.page-title {
    margin: 0;
    font-family: var(--zs-font-serif);
}

.search-form-wrapper {
    max-width: 520px;
}

/* --- Post grids ---------------------------------------------------------- */

.posts-grid,
.search-grid {
    align-items: start;
}

.page-content__body .entry-content,
.single-post__body .entry-content {
    font-size: 1.0625rem;
    line-height: 1.75;
    color: var(--zs-text);
}

.entry-content > *:last-child {
    margin-bottom: 0;
}

.entry-content h2,
.entry-content h3,
.entry-content h4 {
    margin-top: 2em;
    margin-bottom: 0.5em;
}

.entry-content img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
}

.entry-content ul,
.entry-content ol {
    margin: 0 0 1rem;
    padding-left: 1.25rem;
}

.entry-content li {
    margin-bottom: 0.4rem;
}

.entry-content blockquote {
    margin: 2rem 0;
    padding: 4px 0 4px 24px;
    border-left: 3px solid var(--zs-accent);
    font-family: var(--zs-font-serif);
    font-size: 1.35rem;
    line-height: 1.4;
    color: var(--zs-text);
}

/* --- Single post --------------------------------------------------------- */

.single-post__categories {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.single-post__title {
    margin: 0 0 16px;
}

.single-post__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
}

.single-post__featured-image {
    margin-top: -40px;
    margin-bottom: 8px;
}

.single-post__image {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 16px;
    box-shadow: var(--zs-shadow-sm);
}

.single-post__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
}

.single-post__tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 32px;
    font-size: 0.875rem;
}

.single-post__tags-label {
    font-weight: 700;
    color: var(--zs-muted);
}

.single-post__share {
    margin-top: 32px;
}

.post-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
    font-family: var(--zs-font-sans);
    font-size: 0.875rem;
    color: var(--zs-muted);
}

.post-meta__date,
.post-meta__author,
.post-meta__categories,
.reading-time {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--zs-font-sans);
    font-size: 0.875rem;
    color: var(--zs-muted);
}

.post-meta a,
.reading-time a {
    color: var(--zs-muted);
}

.post-meta a:hover {
    color: var(--zs-primary);
}

.post-meta svg,
.reading-time svg {
    flex-shrink: 0;
    color: var(--zs-accent);
}

/* --- Post navigation ----------------------------------------------------- */
/*
 * inc/template-tags.php::zamseed_post_navigation() emits .post-navigation__*.
 * The Elementor widget (class-zamseed-widget-post-navigation.php) emits
 * .zs-post-nav__* and has its own stylesheet, but it is unreachable — there is
 * no Theme Builder single template — so the reachable markup had no CSS at all.
 * Deliberately mirrors the widget's visual contract so the two do not drift.
 */

.post-navigation {
    margin-top: 48px;
    padding-top: 32px;
    border-top: 1px solid var(--zs-border);
}

.post-navigation__inner {
    display: flex;
    gap: 24px;
}

.post-navigation__link {
    display: flex;
    flex: 1 1 0;
    min-width: 0;
    flex-direction: column;
    gap: 6px;
    text-decoration: none;
}

.post-navigation__link--next {
    text-align: right;
    margin-left: auto;
}

.post-navigation__label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--zs-font-sans);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--zs-accent-text);
}

.post-navigation__link--next .post-navigation__label {
    justify-content: flex-end;
}

.post-navigation__label svg {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
}

.post-navigation__title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-family: var(--zs-font-serif);
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--zs-text);
    transition: color 200ms var(--zs-ease-hover);
}

.post-navigation__link:hover .post-navigation__title {
    color: var(--zs-primary);
}

.post-navigation__link:focus-visible {
    outline: 2px solid var(--zs-primary);
    outline-offset: 4px;
    border-radius: 4px;
}

@media (max-width: 600px) {
    .post-navigation__inner {
        flex-direction: column;
        gap: 20px;
    }

    .post-navigation__link--next {
        text-align: left;
        margin-left: 0;
    }

    .post-navigation__link--next .post-navigation__label {
        justify-content: flex-start;
    }
}

/* --- Social share -------------------------------------------------------- */
/*
 * inc/template-functions.php::zamseed_social_share() emits .social-share__*.
 * Same story as post-navigation: the styled Elementor widget uses
 * .zs-social-share__* and cannot be reached, so the live share row had no CSS.
 * Matches the widget's "circle" skin so both implementations look identical.
 */

.social-share {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.social-share__label {
    font-family: var(--zs-font-sans);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--zs-muted);
}

.social-share__links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.social-share__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--zs-green-soft);
    color: var(--zs-primary);
    text-decoration: none;
    transition: background-color 200ms var(--zs-ease-hover), color 200ms var(--zs-ease-hover);
}

.social-share__link svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.social-share__link:hover,
.social-share__link:focus-visible {
    background-color: var(--zs-primary);
    color: #ffffff;
}

.social-share__link:focus-visible {
    outline: 2px solid var(--zs-primary);
    outline-offset: 2px;
}

/* --- Related posts ------------------------------------------------------- */

.related-posts {
    background-color: var(--zs-warm);
}

/* --- Pagination ---------------------------------------------------------- */

.pagination {
    margin-top: 48px;
}

.pagination .nav-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid var(--zs-border);
    font-family: var(--zs-font-sans);
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--zs-text);
    background-color: var(--zs-card);
    transition: var(--zs-transition);
}

.pagination .page-numbers:hover {
    border-color: var(--zs-primary);
    color: var(--zs-primary);
}

.pagination .page-numbers.current {
    background-color: var(--zs-primary);
    border-color: var(--zs-primary);
    color: #ffffff;
}

.pagination .page-numbers.dots {
    border-color: transparent;
    background: none;
}

/* --- Search form --------------------------------------------------------- */

.search-form__inner {
    display: flex;
    align-items: stretch;
    gap: 10px;
}

.search-form__input {
    flex: 1 1 auto;
    height: 50px;
    font-size: 1rem;
}

.search-form__submit {
    flex: 0 0 auto;
    padding: 0 22px;
}

/* --- Empty states -------------------------------------------------------- */

/*
 * Two shapes share this class: template-parts/content-none.php wraps its copy in
 * .no-results__content, search.php does not. Constrain both without touching the
 * vertical padding, which .section already supplies in every case.
 */
.no-results__content,
.search-content .no-results,
.site-content .no-results {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

.no-results__icon {
    color: var(--zs-accent);
    opacity: 0.6;
}

.no-results__title,
.no-results h2 {
    margin: 20px 0 12px;
}

.no-results__description,
.no-results p {
    color: var(--zs-muted);
}

.no-results__suggestions ul {
    display: inline-block;
    margin: 0;
    padding-left: 1.1rem;
    text-align: left;
    color: var(--zs-muted);
}

.no-results__buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

/* --- Sidebar / widget areas ---------------------------------------------- */

.widget {
    margin-bottom: 32px;
}

.widget-title {
    margin-bottom: 12px;
    font-family: var(--zs-font-serif);
    font-size: 1.25rem;
}

/* --- Comments ------------------------------------------------------------ */

.comment-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.comment-item {
    margin-bottom: 24px;
}

.comment-body {
    padding: 20px;
    border: 1px solid var(--zs-border);
    border-radius: 16px;
    background-color: var(--zs-card);
}

.comment-author {
    display: flex;
    align-items: center;
    gap: 12px;
}

.comment-avatar {
    border-radius: 50%;
}

.comment-author-name {
    font-weight: 700;
}

.comment-date {
    display: block;
    font-size: 0.8125rem;
    color: var(--zs-muted);
}

.comment-content {
    margin-top: 12px;
}

.comment-actions {
    margin-top: 12px;
    font-size: 0.875rem;
}

.comment-awaiting-moderation {
    color: var(--zs-accent-text);
    font-style: italic;
}

@media (min-width: 961px) {
    /* Only widen to two columns when the blog sidebar actually has widgets;
       an empty aside would otherwise steal 320px of measure from the article. */
    .single-post__grid:has(.single-post__sidebar > *) {
        grid-template-columns: minmax(0, 1fr) 320px;
    }
}

@media (max-width: 760px) {
    .site-content,
    .page-content,
    .single-post,
    .archive-page,
    .search-results {
        padding-top: 80px;
    }

    .page-header,
    .archive-header,
    .search-header,
    .single-post__header {
        padding-top: 36px;
        padding-bottom: 36px;
    }

    .single-post__featured-image {
        margin-top: -20px;
    }

    .search-form__inner {
        flex-direction: column;
    }

    .search-form__submit {
        width: 100%;
    }
}

/* ==========================================================================
   Utility Classes
   ========================================================================== */

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 2rem; }

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }

/* 404 Page */
.error-404 {
    background: linear-gradient(134deg, #fdfcf9 0%, #f1ede5 100%);
    min-height: 100vh;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.error-404__bg-image {
    position: absolute;
    top: -236px;
    left: 50%;
    transform: translateX(-40%);
    width: 1685px;
    height: 1288px;
    opacity: 0.14;
    pointer-events: none;
}

.error-404__bg-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.error-404__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 876px;
    background: linear-gradient(149deg, rgba(255, 255, 255, 0.97) 0%, rgba(241, 237, 229, 0.9) 100%);
    pointer-events: none;
}

.error-404__glow {
    position: absolute;
    pointer-events: none;
    border-radius: 50%;
}

.error-404__glow--green {
    top: 0;
    left: 0;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle at center, rgba(45, 90, 39, 0.06) 0%, transparent 70%);
}

.error-404__glow--gold {
    top: 456px;
    right: 0;
    width: 420px;
    height: 420px;
    background: radial-gradient(circle at center, rgba(196, 140, 51, 0.09) 0%, transparent 70%);
}

.error-404__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 680px;
    width: 100%;
    padding: 80px 24px;
}

.error-404__hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    height: 224px;
}

.error-404__number {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 700;
    font-size: 200px;
    line-height: 1;
    letter-spacing: -8px;
    color: rgba(45, 90, 39, 0.07);
    user-select: none;
}

.error-404__logo {
    position: absolute;
    width: 64px;
    height: 64px;
    opacity: 0.9;
}

.error-404__logo img,
.error-404__logo a {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.error-404__subtitle {
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: 11px;
    line-height: 16.5px;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: #c48c33;
    text-align: center;
    margin: 0 0 16px;
}

.error-404__heading {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 700;
    font-size: clamp(32px, 4.5vw, 54px);
    line-height: 1.05;
    color: #2d5a27;
    text-align: center;
    margin: 0 0 16px;
}

.error-404__divider {
    width: 48px;
    height: 3px;
    border-radius: 9999px;
    background-image: linear-gradient(to right, #c48c33, rgba(196, 140, 51, 0.2));
    margin-bottom: 24px;
}

.error-404__description {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.625;
    color: #555;
    text-align: center;
    max-width: 440px;
    margin: 0 0 40px;
}

.error-404__actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 56px;
}

.error-404__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 0 28px;
    border-radius: 9999px;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    text-decoration: none;
    transition: transform 150ms ease, box-shadow 150ms ease;
}

.error-404__btn:hover,
.error-404__btn:focus-visible {
    transform: translateY(-2px);
}

.error-404__btn--primary {
    background-color: #2d5a27;
    color: #fff;
    box-shadow: 0 12px 14px rgba(45, 90, 39, 0.18);
}

.error-404__btn--secondary {
    background-color: transparent;
    color: #2d5a27;
    border: 2px solid #2d5a27;
}

.error-404__explore-label {
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: 12px;
    line-height: 18px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: #c48c33;
    text-align: center;
    margin: 0 0 16px;
}

.error-404__explore {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.error-404__pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    border-radius: 9999px;
    background-color: #eef4df;
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: 13px;
    line-height: 19.5px;
    color: #2d5a27;
    text-decoration: none;
    transition: background-color 150ms ease;
}

.error-404__pill:hover,
.error-404__pill:focus-visible {
    background-color: #ddeab8;
}

@media (max-width: 767px) {
    .error-404__bg-image {
        width: 900px;
        height: 700px;
        top: -100px;
        transform: translateX(-50%);
    }

    .error-404__overlay {
        height: 600px;
    }

    .error-404__glow--green {
        width: 300px;
        height: 300px;
    }

    .error-404__glow--gold {
        width: 250px;
        height: 250px;
        top: 350px;
    }

    .error-404__number {
        font-size: 120px;
        letter-spacing: -4px;
    }

    .error-404__hero {
        height: 150px;
    }

    .error-404__logo {
        width: 48px;
        height: 48px;
    }

    .error-404__description {
        font-size: 16px;
    }

    .error-404__actions {
        margin-bottom: 40px;
    }
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}