/**
 * Prairie Landing Golf Club - Theme Styles
 *
 * Design system enforcement and accessibility features
 * layered on top of Hello Elementor + Elementor Pro.
 *
 * Follows the PLGC Website Style Guide (28 Jan 2026).
 *
 * @package PLGC
 */

/* ============================================================
   CSS Custom Properties — Design Tokens
   Single source of truth matching the style guide.
   ============================================================ */
:root {
    /* Brand Colors */
    --plgc-black: #000000;
    --plgc-yellow: #FFAE40;
    --plgc-white: #FFFFFF;
    --plgc-dark-green: #567915;
    --plgc-light-green: #8C9B5A;
    --plgc-very-light-green: #E5F0D0;
    --plgc-light-blue: #C2D7FF;
    --plgc-dark-blue: #102B60;
    --plgc-light-yellow: #FDBC69;
    --plgc-light-grey: #F2F2F2;
    --plgc-medium-grey: #E7E4E4;
    --plgc-dark-green-tone: #233C26;
    --plgc-medium-green-tone: #2D5032;

    /* Typography */
    --plgc-font-heading: 'Libre Baskerville', Georgia, 'Times New Roman', serif;
    --plgc-font-body: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* Focus Ring (Style Guide Section 8) */
    --plgc-focus-color: var(--plgc-dark-green);
    --plgc-focus-width: 0.125rem;
    --plgc-focus-offset: 0.125rem;

    /* Transitions (Style Guide Section 10) */
    --plgc-transition-fast: 150ms ease-in-out;
    --plgc-transition-default: 250ms ease-in-out;
    --plgc-transition-slow: 350ms ease-in-out;
}

/* ============================================================
   Base Typography
   ============================================================ */
body {
    font-family: var(--plgc-font-body);
    font-size: 1rem;
    line-height: 2;
    color: var(--plgc-black);
}

h1, h2 {
    font-family: var(--plgc-font-heading);
}

h3, h4, h5, h6 {
    font-family: var(--plgc-font-body);
}

h1 {
    font-size: 3rem;
    line-height: 1.333;
    font-weight: 700;
}

h2 {
    font-size: 2.25rem;
    line-height: 1.333;
    font-weight: 400;
}

h3 {
    font-size: 1.5rem;
    line-height: 1.333;
    font-weight: 600;
}

h4 {
    font-size: 1.25rem;
    line-height: 1.35;
    font-weight: 600;
}

/* ============================================================
   Skip Link (WCAG 2.4.1 - Bypass Blocks)
   ============================================================ */
.plgc-skip-link {
    position: absolute;
    top: -100%;
    left: 0;
    z-index: 999999;
    padding: 0.75rem 1.5rem;
    background-color: var(--plgc-yellow);
    color: var(--plgc-black);
    font-family: var(--plgc-font-body);
    font-weight: 600;
    font-size: 0.9375rem;
    text-decoration: none;
    border-radius: 0 0 0.25rem 0;
}

.plgc-skip-link:focus {
    top: 0;
    outline: var(--plgc-focus-width) solid var(--plgc-focus-color);
    outline-offset: var(--plgc-focus-offset);
}

/* ============================================================
   Focus States (WCAG 2.4.7 - Focus Visible)
   Style Guide Section 8
   ============================================================ */
:focus-visible {
    outline: var(--plgc-focus-width) solid var(--plgc-focus-color);
    outline-offset: var(--plgc-focus-offset);
}

:focus:not(:focus-visible) {
    outline: none;
}

/* Elementor buttons — V3 + V4 */
.elementor-button:focus-visible,
.elementor-button-wrapper a:focus-visible,
[class*="e-button"]:focus-visible,
.e-con a[role="button"]:focus-visible {
    outline: var(--plgc-focus-width) solid var(--plgc-focus-color);
    outline-offset: var(--plgc-focus-offset);
}

/* Elementor form inputs */
.elementor-field:focus-visible {
    outline: var(--plgc-focus-width) solid var(--plgc-focus-color);
    outline-offset: var(--plgc-focus-offset);
    border-color: var(--plgc-dark-green);
}

/* ============================================================
   Links (Style Guide Section 4)
   WCAG 1.4.1 - Use of Color: underline required
   ============================================================ */

/* Links on light backgrounds */
a {
    color: var(--plgc-black);
    text-decoration: underline;
    transition: color var(--plgc-transition-fast);
}

a:hover,
a:focus {
    color: var(--plgc-dark-green);
}

/* Links on dark backgrounds */
.elementor-section[data-settings*="background_color"],
[style*="background-color: #000"],
[style*="background-color: #233C26"],
[style*="background-color: #2D5032"] {
    /* Handled by specific class selectors below */
}

/* Dark background link overrides — use Elementor's color classes */
.elementor-widget-container [style*="color: #FFFFFF"] a,
.e-con[style*="--e-con-bg-color: #000000"] a,
.e-con[style*="--e-con-bg-color: #233C26"] a,
.e-con[style*="--e-con-bg-color: #2D5032"] a {
    color: var(--plgc-white);
    text-decoration: underline;
}

/* Focus ring on dark backgrounds — yellow for visibility */
.e-con[style*="--e-con-bg-color: #000000"] :focus-visible,
.e-con[style*="--e-con-bg-color: #233C26"] :focus-visible,
.e-con[style*="--e-con-bg-color: #2D5032"] :focus-visible {
    outline-color: var(--plgc-yellow);
}

/* ============================================================
   Buttons (Style Guide Section 5)
   V3: .elementor-button
   V4: Atomic elements use Global Classes — these base rules apply
       to any element matching our brand button class.
   ============================================================ */
.elementor-button,
[class*="e-button"],
.e-con a[role="button"] {
    font-family: var(--plgc-font-body) !important;
    font-weight: 600 !important;
    font-size: 0.9375rem !important;
    border-radius: 6.25rem !important;
    padding: 0.9375rem 2rem !important;
    transition: background-color var(--plgc-transition-fast),
                color var(--plgc-transition-fast) !important;
    /* Minimum touch target (WCAG 2.5.8) */
    min-height: 2.75rem;
    min-width: 2.75rem;
}

/* ============================================================
   Elementor Button — Brand Default
   Yellow pill, black text, matches Style Guide Section 5
   ============================================================ */
.elementor-button {
    background-color: #FFAE40 !important;
    color: #000000 !important;
    font-family: 'Open Sans', sans-serif !important;
    font-size: 0.9375rem !important;
    font-weight: 600 !important;
    border-radius: 6.25rem !important;
    padding: 0.9375rem 2rem !important;
    border: none !important;
    text-decoration: none !important;
    display: inline-block;
    min-height: 2.75rem;
    transition: background-color 150ms ease-in-out !important;
}

.elementor-button:hover,
.elementor-button:focus {
    background-color: #FDBC69 !important;
    color: #000000 !important;
    text-decoration: underline !important;
}

.elementor-button:focus-visible {
    outline: 0.125rem solid #567915 !important;
    outline-offset: 0.125rem !important;
}

/* ============================================================
   Elementor Accordion Overrides (Style Guide Section 7.1)
   V3: .elementor-accordion
   V4: Uses Atomic Tabs (Nested Tabs) — styled via Global Classes.
        These V3 rules remain for backward compat.
   ============================================================ */
.elementor-accordion .elementor-accordion-item {
    border: none;
}

.elementor-accordion .elementor-tab-title {
    font-family: var(--plgc-font-body);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--plgc-black);
    padding: 0.9375rem 0;
    transition: color var(--plgc-transition-fast);
}

.elementor-accordion .elementor-tab-title:hover,
.elementor-accordion .elementor-tab-title:focus {
    color: var(--plgc-dark-green);
}

.elementor-accordion .elementor-tab-title.elementor-active {
    color: var(--plgc-dark-green);
}

.elementor-accordion .elementor-tab-content {
    padding: 0.9375rem;
    background-color: var(--plgc-light-grey);
}

/* Body link styling — semibold, green, underline matches link color */
.elementor-widget-text-editor a:not([class]),
.elementor-widget-text-editor a:visited:not([class]) {
    color: #567915 !important;
    font-weight: 600;
    text-decoration: underline !important;
    text-decoration-color: #567915 !important;
}

.elementor-widget-text-editor a:not([class]):hover,
.elementor-widget-text-editor a:not([class]):focus {
    color: #233C26 !important;
    text-decoration-color: #233C26 !important;
}

/* ============================================================
   Visual Heading Classes (Style Guide Section 2.5)
   Allows visual sizing independent of semantic heading level.
   ============================================================ */
.heading-xl { font-size: 3rem !important; font-family: var(--plgc-font-heading) !important; font-weight: 700 !important; line-height: 1.333 !important; }
.heading-lg { font-size: 2.25rem !important; font-family: var(--plgc-font-heading) !important; font-weight: 400 !important; line-height: 1.333 !important; }
.heading-md { font-size: 1.5rem !important; font-family: var(--plgc-font-body) !important; font-weight: 600 !important; line-height: 1.333 !important; }
.heading-sm { font-size: 1.25rem !important; font-family: var(--plgc-font-body) !important; font-weight: 600 !important; line-height: 1.35 !important; }
.heading-xs { font-size: 1rem !important; font-family: var(--plgc-font-body) !important; font-weight: 700 !important; line-height: 1.4 !important; text-transform: uppercase; letter-spacing: 0.05em; }

/* ============================================================
   Transitions (Style Guide Section 10)
   ============================================================ */
a,
button,
.elementor-button,
input,
textarea,
select {
    transition: color var(--plgc-transition-fast),
                background-color var(--plgc-transition-fast),
                border-color var(--plgc-transition-fast),
                outline-color var(--plgc-transition-fast);
}

/* ============================================================
   Elementor Entrance Animations — Global Override
   Elementor marks animated widgets as elementor-invisible
   (visibility: hidden) until they scroll into view. On iOS/mobile
   the Intersection Observer can fail to fire, permanently hiding
   entire sections. Force visibility universally so content is
   always accessible regardless of animation state.
   ============================================================ */
.elementor-invisible {
    visibility: visible !important;
    opacity: 1 !important;
}

/* ============================================================
   Gallery & Greener Sections — Force Visible on All Devices
   ─────────────────────────────────────────────────────────────
   Elementor's per-section "Hide on Mobile / Tablet" responsive
   toggle writes  display:none  into a generated per-page CSS file
   (wp-content/uploads/elementor/css/post-N.css), NOT into any
   theme file — which is why it's invisible during code review.

   Two-layer fix:
   1. :has() propagates the override UP to the hiding Elementor
      ancestor so the wrapper itself becomes visible.  Covers the
      most common case where the outer section or e-con element is
      the one being set to "hide on mobile" in the editor.
   2. Direct rules on .plgc-gs and .plgc-greener as belt-and-
      suspenders if the shortcode output itself is the hidden node.

   :has() support: Safari 16+, Chrome 105+, Firefox 121+ — covers
   all real-world mobile browsers in use today.
   ============================================================ */
@media (max-width: 1024px) {
    /* Force any Elementor ancestor that wraps a gallery section visible */
    .elementor-element:has(.plgc-gs),
    .elementor-element:has(.plgc-greener),
    .e-con:has(.plgc-gs),
    .e-con:has(.plgc-greener),
    .elementor-section:has(.plgc-gs),
    .elementor-section:has(.plgc-greener) {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Belt-and-suspenders: the shortcode elements themselves */
    .plgc-gs {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .plgc-greener {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* ============================================================
   Reduced Motion (WCAG 2.3.3 - Animation from Interactions)
   Style Guide Section 10.2
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    /* Disable Elementor motion effects */
    .elementor-motion-effects-element,
    .elementor-motion-effects-container,
    .elementor-motion-effects-layer {
        transform: none !important;
        transition: none !important;
    }

    [data-settings*="animation"] .elementor-widget-container {
        animation: none !important;
    }
}

/* ============================================================
   Screen Reader Utilities
   ============================================================ */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}

.screen-reader-text:focus {
    clip: auto !important;
    clip-path: none;
    display: block;
    height: auto;
    left: 0.3125rem;
    padding: 0.9375rem 1.4375rem 0.875rem;
    top: 0.3125rem;
    width: auto;
    z-index: 100000;
    background-color: var(--plgc-white);
    color: var(--plgc-black);
}

/* ============================================================
   Responsive Typography
   ============================================================ */
@media (max-width: 1024px) {
    h1 { font-size: 2.25rem; }
    h2 { font-size: 1.75rem; }
    h3 { font-size: 1.25rem; }
    h4 { font-size: 1.125rem; }
}

@media (max-width: 767px) {
    h1 { font-size: 2rem; }
    h2 { font-size: 1.5rem; }
    h3 { font-size: 1.25rem; }
    h4 { font-size: 1.125rem; }
    body { line-height: 1.75; }
}

/* ============================================================
   Minimum Touch Target Enforcement (WCAG 2.5.8)
   V3 widgets + V4 atomic elements
   ============================================================ */
.elementor-button,
.elementor-field,
.elementor-select-wrapper select,
a.elementor-item,
[class*="e-button"],
.e-con a[role="button"],
.e-con input,
.e-con select,
.e-con button {
    min-height: 2.75rem;
}

/* ─────────────────────────────────────────────────────────────────────────────
   [plgc_social_icons] shortcode — Section 2 "Follow us!" row
   Matches Figma node 34039:627: dark green circle, white icon, 53px height
   ───────────────────────────────────────────────────────────────────────────── */
.plgc-si {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
    align-items: center;
    justify-content: center;
}

.plgc-si__item {
    margin: 0;
    padding: 0;
}

.plgc-si__link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 53px;
    height: 53px;
    border-radius: 50%;
    background-color: #2D5032;
    text-decoration: none;
    transition: background-color 0.15s ease, transform 0.15s ease;
}

/* The Knot — wider pill shape to accommodate text logo */
.plgc-si__link--theknot {
    width: 80px;
    border-radius: 27px;
}

.plgc-si__link:hover {
    background-color: #233C26;
    transform: translateY(-2px);
}

.plgc-si__link:focus-visible {
    outline: 3px solid #FFAE40;
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .plgc-si__link {
        transition: none;
    }
}

/* ============================================================
   Anchor Link Scroll Offset
   Compensates for the sticky header so anchor targets are not
   hidden behind the nav when jumping to a section.
   scroll-padding-top is the modern CSS approach and works for
   both click-triggered anchors and keyboard navigation.
   Header heights: desktop 103px, <=768px 72px, <=480px 64px.
   Add ~20px breathing room so headings don't sit flush with nav.
   ============================================================ */
html {
    scroll-padding-top: 123px; /* 103px header + 20px breathing room */
}

@media (max-width: 768px) {
    html {
        scroll-padding-top: 92px; /* 72px header + 20px breathing room */
    }
}

@media (max-width: 480px) {
    html {
        scroll-padding-top: 84px; /* 64px header + 20px breathing room */
    }
}