/*
Theme Name: Equestrian Destinations
Theme URI: https://pluginslab.com/pl-ed-gutenberg
Author: Pluginslab
Author URI: https://pluginslab.com
Description: Custom Gutenberg block theme for equestriandestinations.com built on Caroline's brand guide (Fraunces + Lato, charcoal / heritage gold / linen palette, 8px grid). Pairs with the pl-ed-helper plugin for the Destinations CPT, taxonomies, and custom blocks.
Version: 0.9.21
Requires at least: 7.0
Requires PHP: 8.2
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pl-ed-gutenberg
Tags: full-site-editing, block-styles, custom-colors, custom-typography, one-column
*/

/* Prevent horizontal overflow from wide blocks on mobile */
html,
.wp-site-blocks {
    overflow-x: hidden;
}

/* ============================================================
   Accessibility — global focus rings + reduced motion.
   2px ring at 2px offset in heritage gold (#C8B273) tests ≥3:1
   against both charcoal (#2C2C2C) and linen (#F5F3EF). WCAG 2.2 AA.
   ============================================================ */

a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--wp--preset--color--heritage-gold);
    outline-offset: 2px;
}

@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;
    }
}

/* ============================================================
   Header — .site-header component.
   Default: solid white background (inner pages).
   Transparent variant: toggled via .is-transparent-header class
   on the template wrapper (Home page).
   ============================================================ */

/* Logo toggle — two logo images in the header, CSS swaps based on variant.
   Default (inner pages): dark wordmark on the solid header.
   Transparent variant (Home, over the hero): white wordmark. */
.site-header .logo-transparent {
    display: none;
}

/* Nav links — no underlines in the header context. */
.site-header .wp-block-navigation a {
    text-decoration: none;
}

.site-header .wp-block-navigation a:hover {
    color: var(--wp--preset--color--dark-gold);
}

/* ============================================================
   Transparent header variant.
   Applied by adding className "is-transparent-header" to the
   outermost template group, so the header overlays hero content.
   Over the hero: swap to the white wordmark (it reads against the
   hero's dark left gradient); nav links stay charcoal on the right.
   ============================================================ */

.is-transparent-header .site-header {
    background-color: transparent !important;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
}

/* Over the hero, swap the dark wordmark for the white one. */
.is-transparent-header .site-header .logo-default {
    display: none;
}

.is-transparent-header .site-header .logo-transparent {
    display: block;
}

/* Over the hero, the whole menu reads white to match the white wordmark:
   desktop nav links, the Inquire CTA, and the mobile toggle (hamburger and
   the ✕ both sit in the header over the hero, not on the menu panel). The
   in-panel mobile links and every inner-page header keep their dark colour
   (they are not over the hero). */
.is-transparent-header .site-header .wp-block-navigation a {
    color: #ffffff;
}

.is-transparent-header .site-header .wp-block-pl-mobile-menu-toggle {
    color: #ffffff !important;
}

.is-transparent-header .site-header .nav-cta .wp-block-button__link {
    color: #ffffff !important;
    border-color: #ffffff !important;
}

/* ============================================================
   Navigation — Mobile Menu block style variant.
   Registered via register_block_style( 'core/navigation' ).
   ============================================================ */

.wp-block-navigation.is-style-mobile-menu {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    font-family: var(--wp--preset--font-family--fraunces);
    font-size: var(--wp--preset--font-size--h-3);
    font-weight: 300;
    line-height: 1;
}

.wp-block-navigation.is-style-mobile-menu .wp-block-navigation__container {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
}

.wp-block-navigation.is-style-mobile-menu .wp-block-navigation-item {
    border-bottom: 1px solid var(--wp--preset--color--linen);
    padding-top: var(--wp--preset--spacing--3-x);
    padding-bottom: var(--wp--preset--spacing--3-x);
    text-align: center;
    justify-content: center;
}

.wp-block-navigation.is-style-mobile-menu .wp-block-navigation-item__content {
    display: block;
    width: 100%;
    text-align: center;
    text-decoration: none;
    color: var(--wp--preset--color--charcoal);
}

.wp-block-navigation.is-style-mobile-menu
    .wp-block-navigation-item__content:hover {
    color: var(--wp--preset--color--dark-gold);
}

/* ============================================================
   Mobile menu toggle — icon swap (hamburger <-> close).
   The pl/mobile-menu-toggle button renders BOTH icons; the
   popover flips aria-expanded on the trigger when the menu
   opens/closes. Show only the state-appropriate icon.
   (Caroline #8828711 — both icons showed at once on mobile.)
   ============================================================ */

.wp-block-pl-mobile-menu-toggle .pl-icon-close {
    display: none;
}

.wp-block-pl-mobile-menu-toggle[aria-expanded="true"] .pl-icon-menu {
    display: none;
}

.wp-block-pl-mobile-menu-toggle[aria-expanded="true"] .pl-icon-close {
    display: inline-flex;
}

/* Utility — no underline on links */
.pl-ed-no-underline a {
    text-decoration: none;
}

/* Links inherit parent text color when explicitly set */
.has-text-color a {
    color: inherit;
}

.has-text-color a:hover {
    color: var(--wp--preset--color--dark-gold);
}

/* ── Cards (shared: archive + field-notes) ──────────── */

/* Grid — explicit fallback (WP may not generate grid layout in template-parts) */
.archive-cards {
    display: grid !important;
    gap: var(--wp--preset--spacing--3-x);
}

.archive-cards > li {
    margin-block-start: 0 !important;
    /* Grid items must allow shrinking below content width, otherwise the nowrap
       single-line card title forces the <li> wider than its track and bleeds off
       narrow screens. (No block attribute exists for grid-item min-width.) */
    min-width: 0;
}


/* Equal-height cards with bottom-aligned read-more */
.archive-cards.is-layout-grid > li,
.archive-cards > li {
    display: flex;
}

.archive-card {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.archive-card .wp-block-read-more {
    margin-top: auto;
}

.archive-card .wp-block-post-featured-image {
    flex: 0 0 auto;
    overflow: hidden;
}

.archive-card .wp-block-post-featured-image img {
    height: auto !important;
    aspect-ratio: 4/3;
    object-fit: cover;
}

/* Heritage Gold separator — 1px override (core forces 2px) */
.wp-block-separator.has-heritage-gold-background-color:not(.is-style-wide):not(
        .is-style-dots
    ) {
    height: 1px;
    border-bottom: none;
    opacity: 1;
}

/* Field Notes — constrain background to 1200px */
.field-notes-section {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

/* Featured / Highlighted card titles wrap to the FULL destination name.
   These reuse the .archive-card visual but must NOT inherit the one-line
   clamp on .archive-card__title — the featured names (e.g. "Coworth Park,
   A Dorchester Collection") are important and must show in full. */
.featured-card__title {
    min-width: 0;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}

.featured-card__title a {
    color: inherit;
    text-decoration: none;
}

/* Featured / Highlighted card images always fill the card and crop to a
   uniform 4:3 (cover) — otherwise a source narrower than the column (e.g.
   The Hideout at 302px) renders undersized and leaves a gap. Targets the
   static wp:image inside these cards; the normal archive cards use
   post-featured-image and are unaffected. */
.archive-card .wp-block-image {
    width: 100%;
}

/* The image is wrapped in a link; it defaults to inline-block (collapsing to
   the image's natural width), so make it block + full width or a small source
   won't fill the card. */
.archive-card .wp-block-image a {
    display: block;
    width: 100%;
}

.archive-card .wp-block-image img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* Category term links — no underline */
.archive-card .wp-block-post-terms a {
    text-decoration: none;
}

/* Card separator — explicit width (core doesn't set it for is-style-wide) */
.archive-card .wp-block-separator.is-style-wide {
    width: 100%;
}

/* Read more link */
.archive-card .wp-block-read-more {
    text-decoration: none;
    letter-spacing: 0.02em;
}

.archive-card .wp-block-read-more:hover {
    color: var(--wp--preset--color--heritage-gold);
}

/* ── Rounded corners (M4 design pass) ──────────────── */
/* Cards: 8px to match the button radius (theme.json). Photos nest at 6px. */
.archive-card {
    border-radius: var(--wp--custom--border-radius--md); /* 8px */
}

/* Card photos clip to a slightly tighter radius so they sit inside the card */
.archive-card .wp-block-post-featured-image,
.archive-card .wp-block-post-featured-image img {
    border-radius: 6px;
}

/* Content images get the same soft radius — but never full-bleed/wide or covers */
.wp-block-image img {
    border-radius: 6px;
}
.wp-block-image.alignfull img,
.wp-block-image.alignwide img,
.wp-block-cover,
.wp-block-cover img {
    border-radius: 0;
}

/* Outline button hover — fill with Dark Gold, white text */
.wp-block-button.is-style-outline .wp-block-button__link:hover {
    background-color: var(--wp--preset--color--dark-gold);
    color: var(--wp--preset--color--white) !important;
    border-color: var(--wp--preset--color--dark-gold);
}

/* ── M4 design polish (Caroline #8819101, 6/13) ───────────────────
   Consistent 6-8px corners, cards lifting off the Linen, gold contrast. */

/* Unify button radius (was a mix of 0 / 2 / 4px inline) to match the cards. */
.wp-block-button__link {
    border-radius: 6px !important;
}

/* Premium / featured destination cards lift off the Linen page: white
   surface, soft shadow, rounded corners — overrides the inline
   border-radius:0 in the homepage markup; inner photo clips to match. */
.wp-block-columns.has-border-color,
.wp-block-column.has-border-color {
    background-color: #ffffff;
    border-radius: 8px !important;
    box-shadow: 0 2px 12px rgba(44, 44, 44, 0.06);
    overflow: hidden;
}
.wp-block-columns.has-border-color .wp-block-image img,
.wp-block-column.has-border-color .wp-block-image img {
    border-radius: 6px !important;
}

/* Archive (All Destinations) cards lift off the background too. */
.archive-card {
    background-color: #ffffff;
    box-shadow: 0 2px 12px rgba(44, 44, 44, 0.06);
}

/* Contrast: use Dark Gold (#B8860B) for gold TEXT/links — Heritage Gold
   (#C8B273) fails WCAG AA on light surfaces; keep it for separators/borders. */
.archive-card .wp-block-read-more:hover {
    color: var(--wp--preset--color--dark-gold);
}

/* ── Query Slider — carousel dot overrides ──────────── */

.pl-query-slider-carousel .pl-carousel-dots button {
    background: transparent !important;
    border: 1px solid var(--wp--preset--color--stone-grey) !important;
}

.pl-query-slider-carousel .pl-carousel-dots button.active {
    background: var(--wp--preset--color--stone-grey) !important;
}