/**
 * Core Experiences — Design Tokens
 * =========================================
 * Single source of truth for all shared CSS custom properties.
 *
 * Load order: ALWAYS enqueued first (handle: goe-tokens).
 * All other goe-* stylesheet handles declare goe-tokens as dependency.
 *
 * Override strategi:
 *   Tema-stylesheets loades efter plugin-CSS og vinder via normal kaskade.
 *   Brug højere specificitet eller !important i child-tema for at override,
 *   eller overskriv tokens direkte: :root { --goe-primary: #e85d04; }
 *
 * ┌────────────────────────────────────────────────────────────────── ┐
 * │  Breakpoint reference (CSS has no native custom media queries)   │
 * │  Mobile  →  max-width: 639px                                     │
 * │  Tablet  →  max-width: 767px  /  min-width: 768px                │
 * │  Sidebar →  GOE_SIDEBAR_BREAKPOINT (default 1280px) — see       │
 * │             get-outdoor-experiences.php. DO NOT hardcode here.   │
 * │             Change ONE PHP constant; JS + CSS auto-update.       │
 * └──────────────────────────────────────────────────────────────────┘
 *
 * Theme integration:
 *   Override any token on :root or on a component wrapper in your theme.
 *   The "Lad det aktive tema styre farver og skrifttyper" setting now maps
 *   GOE tokens through a shared theme bridge used by grids, landing pages,
 *   booking widget and booking flow pages.
 *   Use the WordPress filter 'goe_primary_color' to customise the primary
 *   accent from PHP without touching this file:
 *     add_filter('goe_primary_color', fn() => '#e85d04');
 *
 * Sticky header offset:
 *   Set --goe-sticky-offset on :root in your child theme to prevent booking
 *   widgets from hiding behind your sticky header:
 *     :root { --goe-sticky-offset: 70px; }
 */

/* ─── Brand / Primary ──────────────────────────────────────────────────────── */

:root {
  --goe-primary:      #2563eb;
  --goe-primary-dark: #1d4ed8;
  --goe-primary-fg:   #ffffff;
  --goe-check-color:  #2d6a4f;
}

/* ─── CTA / Interactive ────────────────────────────────────────────────────── */

:root {
  --goe-cta-bg:     #1a2e1a;
  --goe-cta-color:  #ffffff;
  --goe-price-color: #1a2e1a;
  --goe-tab-active:  #1a2e1a;
  --goe-badge-text: #ffffff;
}

/* ─── Mobile CTA bar button ─────────────────────────────────────────────────── */
/* Plugin defaults live here. When theme-styles is enabled, the shared theme     */
/* bridge can override these through internal --goe-theme-* tokens so the CTA    */
/* follows the active theme instead of staying on plugin blue.                   */

:root {
  --goe-bar-cta-bg:  #2563eb;   /* button background — matches brand primary     */
  --goe-bar-cta-fg:  #ffffff;   /* button text — always readable against bg       */
}

/* ─── Semantic state colors ───────────────────────────────────────────────── */
/* Used by: booking/shared.css step indicator, validation, status panels.       */
/* Override on :root in your child theme to restyle state UI elements globally. */

:root {
  --goe-success:      #22c55e;   /* calendar booked, step done, success panel  */
  --goe-success-dark: #16a34a;   /* text on white for a11y contrast ratio      */
  --goe-error:        #dc2626;   /* field validation, unavailable state        */
  --goe-warning:      #f59e0b;   /* few spots, decline/cancel status pages     */
}

/* ─── Secondary button ──────────────────────────────────────────────────────── */

:root {
  --goe-btn-secondary-border:       #d0d0d0;
  --goe-btn-secondary-color:        #666666;
  --goe-btn-secondary-border-hover: #aaaaaa;
  --goe-btn-secondary-color-hover:  #333333;
}

/* ─── Radius scale ──────────────────────────────────────────────────────────── */
/* Change these to restyle the entire plugin to rounder or sharper corners.     */

:root {
  --goe-radius-sm: 0.6rem;    /* inputs, buttons, chips, small elements      */
  --goe-radius-md: 0.75rem;   /* panels, cards, booking widget border        */
  --goe-radius-lg: 1rem;      /* sheet drawer top corners                    */
}

/* ─── Gallery nav arrows ──────────────────────────────────────────────────────── */

:root {
  --goe-nav-bg:          rgba(255, 255, 255, 0.92);   /* arrow pill background   */
  --goe-nav-color:       #111111;                     /* arrow icon color        */
  --goe-nav-bg-dark:     rgba(30, 30, 30, 0.88);      /* dark mode               */
  --goe-nav-color-dark:  #f5f5f5;                     /* dark mode icon color    */
}

/* ─── Booking widget: calendar day state colors ────────────────────────────── */

:root {
  --goe-day-avail-bg: #f0f4ff;
  --goe-day-avail-fg: #4b5563;
  --goe-day-dot-0:    #2563eb;
  --goe-day-dot-1:    #16a34a;
  --goe-day-dot-2:    #dc2626;
  --goe-day-dot-3:    #d97706;
  --goe-day-dot-4:    #7c3aed;
  --goe-day-dot-5:    #0891b2;
}

/* ─── Card & Grid ──────────────────────────────────────────────────────────── */
/*
 * Override any of these in your child theme:
 *   :root {
 *     --goe-card-body-color:       #1a1a1a;
 *     --goe-card-title-color:      #111827;
 *     --goe-card-muted-color:      #4b5563;
 *     --goe-card-meta-color:       #6b7280;
 *     --goe-card-icon-color:       #9ca3af;
 *     --goe-card-surface:          #ffffff;
 *     --goe-card-price-color:      #1a2e1a;
 *     --goe-card-cta-bg:           #1a2e1a;
 *     --goe-card-cta-color:        #ffffff;
 *     --goe-card-padding:          0.6rem 0.875rem;
 *     --goe-card-gap:              0.25rem;
 *     --goe-card-desc-line-height: 1.3;
 *   }
 */

:root {
  --goe-radius-card:       0.5rem;
  --goe-shadow-card:       0 2px 12px rgba(167, 39, 39, 0.08);
  --goe-shadow-card-hover: 0 6px 24px rgba(0, 0, 0, 0.14);

  /* Card-scoped tokens keep the component readable even inside aggressive
   * wrappers like .light, .entry-content, or page-builder typography blocks. */
  --goe-card-body-color:        var(--goe-text-body);
  --goe-card-title-color:       var(--goe-text-strong);
  --goe-card-muted-color:       var(--goe-text-muted);
  --goe-card-meta-color:        var(--goe-text-secondary);
  --goe-card-icon-color:        var(--goe-icon-muted);
  --goe-card-surface:           var(--goe-surface);
  --goe-card-price-color:       var(--goe-price-color);
  --goe-card-cta-bg:            var(--goe-cta-bg);
  --goe-card-cta-color:         var(--goe-cta-color);

  /* Spacing tokens — controls padding and line density for ALL experience grids. */
  --goe-card-padding:           0.875rem 1rem 1.125rem; /* was hardcoded 1.125/1.25/1.375 */
  --goe-card-gap:               0.375rem;               /* was hardcoded 0.5rem            */
  --goe-card-desc-line-height:  1.4;                    /* was hardcoded 1.55              */
}

/* ─── Location badge ───────────────────────────────────────────────────────── */

:root {
  --goe-location-badge-color: #4b5563;
  --goe-location-badge-bg:    #f3f4f6;
  --goe-location-icon-color:  #6b7280;
}

/* ─── Semantic text & surface (light mode defaults) ────────────────────────── */

:root {
  --goe-text:           inherit;
  --goe-text-strong:    #111827; /* headings, strong emphasis */
  --goe-text-body:      #374151; /* body paragraphs */
  --goe-text-muted:     #4b5563; /* secondary body, form labels */
  --goe-text-secondary: #6b7280; /* placeholder text, inactive tabs */
  --goe-border:         #e5e7eb;
  --goe-surface:        #ffffff; /* card / modal backgrounds */
  --goe-surface-subtle: #f3f4f6; /* image placeholders, code bg */
  --goe-surface-alt:    #f9fafb; /* page / section backgrounds */
  --goe-icon-muted:     #9ca3af;
}

/* ─── Sticky header offset ─────────────────────────────────────────────────── */

:root {
  /* Auto-set by sticky-header-offset.js at runtime. Override in your child theme:
   *   :root { --goe-sticky-offset: 70px; }
   * This prevents booking widget from hiding behind a fixed/sticky header.
   * WP admin bar (32px) is already handled by WordPress core html margin. */
  --goe-sticky-offset: 0px;

  /* Set in your child theme if the theme has a fixed/sticky footer or cookie bar:
   *   :root { --goe-footer-offset: 60px; }
   * This lifts the mobile booking bar above it. */
  --goe-footer-offset: 0px;
}

/* ─── Z-index scale ───────────────────────────────────────────────────────────── */

:root {
  /* Always below WP admin bar (99999) but above all theme elements.
   * Divi header: 10000. Elementor: 9999. Our scale starts above these.
   * Override in child theme if conflicts with your specific theme:      */
  --goe-z-bar:     9000;  /* fixed bottom bars (flow-bar, mobile-bar)    */
  --goe-z-sheet:   9100;  /* mobile sheet + backdrop                     */
  --goe-z-overlay: 99990; /* full-screen flow overlay (desktop modal)    */
}

/* ─── Dark mode overrides ──────────────────────────────────────────────────── */
/*
 * Dark mode is intentionally NOT auto-activated via prefers-color-scheme.
 * Reason: the plugin renders inside a WordPress theme — the theme controls
 * the overall color mode, not the OS setting. Auto dark mode caused the
 * plugin cards to go dark while the surrounding theme remained light.
 *
 * Opt-in options (choose one in your theme):
 *
 *   1. Class on <body> or a wrapper — theme adds/removes class via JS:
 *        body.dark-mode   { --goe-surface: #1f2937; ... }
 *
 *   2. Child-theme stylesheet — always-on dark tokens:
 *        :root { --goe-surface: #1f2937; --goe-text-body: #d1d5db; ... }
 *
 *   3. Media query in child-theme (original behaviour, opt-in per site):
 *        @media (prefers-color-scheme: dark) {
 *          :root { --goe-surface: #1f2937; ... }
 *        }
 *
 * Dark token reference (copy into child theme as needed):
 *   --goe-text-strong:          #f1f5f9
 *   --goe-text-body:            #d1d5db
 *   --goe-text-muted:           #9ca3af
 *   --goe-text-secondary:       #9ca3af
 *   --goe-border:               #374151
 *   --goe-surface:              #1f2937
 *   --goe-surface-subtle:       #111827
 *   --goe-surface-alt:          #0f172a
 *   --goe-icon-muted:           #6b7280
 *   --goe-location-badge-color: #d1d5db
 *   --goe-location-badge-bg:    #1f2937
 *   --goe-location-icon-color:  #9ca3af
 *   --goe-day-avail-bg:         #1e3a5f
 *   --goe-day-avail-fg:         #d1d5db
 */

/* ─── Reduced motion — global plugin baseline ──────────────────────────────── */

/*
 * Disables all transitions and transform-based hover effects for users
 * who have enabled "Reduce Motion" in their OS / browser settings.
 * WCAG 2.1 Success Criterion 2.3.3.
 * Per-file overrides may further restrict specific widgets.
 */
@media (prefers-reduced-motion: reduce) {
  .go-exp-grid__card,
  .go-exp-grid__card-image,
  .go-cat-grid .go-exp-grid__card,
  .go-cat-grid .go-exp-grid__card-image,
  .goe-mobile-bar__cta,
  .goe-flow-bar__cta,
  .goe-mobile-sheet,
  .goe-mobile-sheet__backdrop {
    transition: none !important;
    animation:  none !important;
    transform:  none !important;
  }
}