/* ============================================================================
   DATE YOUR TYPE — Brand layer for Webrand Lite
   Logo-matched palette: warm gold on sand/cream. NO blue anywhere.

   IMPORTANT: Page/section COLORS are set INLINE on the blocks themselves.
   This stylesheet is an enhancement layer only — it loads the brand serif,
   maps the legacy "libre-baskerville" slug to Cormorant, refines hover/nav
   states, and provides safe fallbacks. It deliberately avoids forcing colors
   with !important so inline block styles always win and every page still
   reads correctly even if this file is disabled.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   1. BRAND TOKENS
   ---------------------------------------------------------------------------- */
:root,
body {
    --dyt-cream: #FBF7F0;
    --dyt-warm: #F2E9DA;
    --dyt-sand: #EAD3B9;
    --dyt-sand-deep: #DEC3AA;
    --dyt-gold: #C2A368;
    --dyt-gold-deep: #A8884A;
    --dyt-gold-pale: #D8C29A;
    --dyt-hairline: #DCC8A0;
    --dyt-ink: #2E261C;
    --dyt-taupe: #5C4F3E;
    --dyt-caption: #8A7B66;
    --dyt-espresso: #2A2118;
    --dyt-on-dark: #EDE3D2;
    --dyt-on-dark-muted: #B3A488;

    --dyt-serif: "Cormorant Garamond", "Playfair Display", Georgia, serif;
    --dyt-sans: "Red Hat Display", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* Remap the theme's preset palette to the logo colors so any existing block
   that references a gv-color-* token also lands on the warm palette. */
body {
    --wp--preset--color--gv-color-primary: var(--dyt-ink);
    --wp--preset--color--gv-color-accent: var(--dyt-gold);
    --wp--preset--color--gv-color-accent-hover: var(--dyt-gold-deep);
    --wp--preset--color--gv-color-secondary: var(--dyt-sand);
    --wp--preset--color--gv-color-text-primary: var(--dyt-ink);
    --wp--preset--color--gv-color-text-secondary: var(--dyt-taupe);
    --wp--preset--color--gv-color-text-placeholder: var(--dyt-caption);
    --wp--preset--color--gv-color-background-primary: var(--dyt-cream);
    --wp--preset--color--gv-color-background-secondary: var(--dyt-warm);
    --wp--preset--color--gv-color-background-tertiary: var(--dyt-sand);
    --wp--preset--color--gv-color-border: var(--dyt-gold);
    --wp--preset--color--gv-color-border-input: var(--dyt-hairline);
    --wp--preset--color--gv-color-black: var(--dyt-ink);
    --wp--preset--color--gv-color-gold: var(--dyt-gold);
    --wp--preset--color--gv-color-gold-soft: var(--dyt-gold-pale);
    --wp--preset--color--gv-color-cream: var(--dyt-cream);
    --wp--preset--color--gv-color-espresso: var(--dyt-espresso);

    /* Dark (espresso) bands: footer + dark sections */
    --wp--preset--color--gv-color-dark-primary: var(--dyt-gold);
    --wp--preset--color--gv-color-dark-accent: var(--dyt-gold);
    --wp--preset--color--gv-color-dark-accent-hover: var(--dyt-gold-pale);
    --wp--preset--color--gv-color-dark-secondary: var(--dyt-gold-pale);
    --wp--preset--color--gv-color-dark-background-primary: var(--dyt-espresso);
    --wp--preset--color--gv-color-dark-background-secondary: var(--dyt-ink);
    --wp--preset--color--gv-color-dark-background-tertiary: #3A2F22;
    --wp--preset--color--gv-color-dark-text-primary: var(--dyt-cream);
    --wp--preset--color--gv-color-dark-text-secondary: var(--dyt-on-dark-muted);

    /* Legacy accent serif slug renders as Cormorant (relied upon site-wide) */
    --wp--preset--font-family--libre-baskerville: var(--dyt-serif);
}

/* ----------------------------------------------------------------------------
   2. GLOBAL CANVAS (fallbacks only — inline styles override these)
   ---------------------------------------------------------------------------- */
body.wp-theme-webrand-lite {
    background-color: var(--dyt-cream);
    color: var(--dyt-ink);
    font-family: var(--dyt-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

::selection {
    background: var(--dyt-sand);
    color: var(--dyt-ink);
}

/* Body copy face (color stays inline / theme.json) */
.wp-theme-webrand-lite p,
.wp-theme-webrand-lite li {
    font-family: var(--dyt-sans);
}

/* Italic serif accent face for the second heading line */
.wp-theme-webrand-lite .has-libre-baskerville-font-family,
.wp-theme-webrand-lite .has-cormorant-garamond-font-family {
    font-family: var(--dyt-serif) !important;
    letter-spacing: 0.01em;
}

/* ----------------------------------------------------------------------------
   3. LINKS (no inline state available — light touch only)
   ---------------------------------------------------------------------------- */
.wp-theme-webrand-lite a:hover {
    color: var(--dyt-gold-deep);
}

/* ----------------------------------------------------------------------------
   4. HEADER + NAVIGATION (refinement; colors come from header markup)
   ---------------------------------------------------------------------------- */
.wp-theme-webrand-lite .webrand-lite-nav .wp-block-navigation-item__content {
    font-family: var(--dyt-sans);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    position: relative;
    padding-bottom: 4px;
}
.wp-theme-webrand-lite
    .webrand-lite-nav
    .wp-block-navigation__container
    > .wp-block-navigation-item
    > a.wp-block-navigation-item__content::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 0;
    height: 1px;
    background: var(--dyt-gold);
    transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.wp-theme-webrand-lite
    .webrand-lite-nav
    .wp-block-navigation__container
    > .wp-block-navigation-item:hover
    > a.wp-block-navigation-item__content::after {
    width: 100%;
}
.wp-theme-webrand-lite .webrand-lite-nav .wp-block-navigation__container > .wp-block-navigation-item > a.wp-block-navigation-item__content:hover,
.wp-theme-webrand-lite .webrand-lite-nav .wp-block-navigation__container > .wp-block-navigation-item > a.wp-block-navigation-item__content:hover span {
    color: var(--dyt-gold);
}
.wp-theme-webrand-lite .webrand-lite-nav .wp-block-navigation__container > .wp-block-navigation-item:hover .wp-block-navigation__submenu-icon svg,
.wp-theme-webrand-lite .webrand-lite-nav .wp-block-navigation__container > .wp-block-navigation-item:hover .wp-block-navigation__submenu-icon svg path {
    stroke: var(--dyt-gold) !important;
}
.wp-theme-webrand-lite .webrand-lite-nav .wp-block-navigation__submenu-container {
    background-color: var(--dyt-cream) !important;
    border: 1px solid var(--dyt-hairline);
    border-radius: 12px;
    padding: 10px 6px;
    margin-top: 14px;
    box-shadow: 0 24px 60px -28px rgba(42, 33, 24, 0.4);
}

/* ----------------------------------------------------------------------------
   5. BUTTONS — hover state only (base look is set inline as espresso pills).
   Add class "dyt-btn" to a button to get the gold hover.
   ---------------------------------------------------------------------------- */
.wp-theme-webrand-lite .wp-element-button,
.wp-theme-webrand-lite .wp-block-button__link {
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.wp-theme-webrand-lite .dyt-btn .wp-block-button__link:hover,
.wp-theme-webrand-lite .wp-block-button.dyt-btn .wp-block-button__link:hover {
    background-color: var(--dyt-gold-deep) !important;
    color: var(--dyt-cream) !important;
    transform: translateY(-2px);
}
/* Outline / ghost button on light grounds */
.wp-theme-webrand-lite .wp-block-button.is-style-outline .wp-block-button__link {
    border: 1px solid var(--dyt-gold);
    background-color: transparent;
    color: var(--dyt-ink);
}
.wp-theme-webrand-lite .wp-block-button.is-style-outline .wp-block-button__link:hover {
    background-color: var(--dyt-gold);
    color: var(--dyt-cream);
}

/* ----------------------------------------------------------------------------
   6. CARDS (utility — page markup also sets these inline)
   ---------------------------------------------------------------------------- */
.dyt-card {
    background-color: #fff;
    border: 1px solid var(--dyt-gold);
    border-radius: 12px;
    padding: 36px;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
    height: 100%;
}
.dyt-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 60px -30px rgba(42, 33, 24, 0.35);
}

/* ----------------------------------------------------------------------------
   7. DETAILS / ACCORDION (FAQ) — refine the native marker
   ---------------------------------------------------------------------------- */
.wp-theme-webrand-lite .wp-block-details {
    border-bottom: 1px solid var(--dyt-hairline);
}
.wp-theme-webrand-lite .wp-block-details summary {
    cursor: pointer;
    list-style: none;
    position: relative;
    outline: none;
}
.wp-theme-webrand-lite .wp-block-details summary::-webkit-details-marker {
    display: none;
}
.wp-theme-webrand-lite .wp-block-details summary::after {
    content: "+";
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--dyt-sans);
    font-weight: 400;
    font-size: 28px;
    line-height: 1;
    color: var(--dyt-gold);
    transition: transform 0.3s ease;
}
.wp-theme-webrand-lite .wp-block-details[open] summary::after {
    content: "\2013"; /* en dash */
}

/* ----------------------------------------------------------------------------
   8. FORMS / INPUTS
   ---------------------------------------------------------------------------- */
.wp-theme-webrand-lite input[type="text"],
.wp-theme-webrand-lite input[type="email"],
.wp-theme-webrand-lite input[type="url"],
.wp-theme-webrand-lite input[type="tel"],
.wp-theme-webrand-lite input[type="search"],
.wp-theme-webrand-lite select,
.wp-theme-webrand-lite textarea {
    background-color: #fff;
    color: var(--dyt-ink);
    border: 1px solid var(--dyt-hairline);
    border-radius: 10px;
}
.wp-theme-webrand-lite input:focus,
.wp-theme-webrand-lite select:focus,
.wp-theme-webrand-lite textarea:focus {
    border-color: var(--dyt-gold);
    box-shadow: 0 0 0 3px rgba(194, 163, 104, 0.16);
    outline: none;
}

/* ----------------------------------------------------------------------------
   9. PAGINATION + SEPARATORS
   ---------------------------------------------------------------------------- */
.wp-theme-webrand-lite .wp-block-query-pagination .wp-block-query-pagination-numbers a.page-numbers,
.wp-theme-webrand-lite .wp-block-query-pagination .wp-block-query-pagination-next,
.wp-theme-webrand-lite .wp-block-query-pagination .wp-block-query-pagination-previous {
    background: var(--dyt-ink);
    color: var(--dyt-cream);
}
.wp-theme-webrand-lite .wp-block-query-pagination a:not(.dots):hover {
    background: var(--dyt-gold-deep);
}
.wp-theme-webrand-lite .wp-block-query-pagination .wp-block-query-pagination-numbers span.current {
    background: var(--dyt-gold);
    color: var(--dyt-cream);
}
.wp-theme-webrand-lite .wp-block-separator {
    border: 0;
    border-top: 1px solid var(--dyt-hairline);
    opacity: 1;
}

/* ----------------------------------------------------------------------------
   10. ENTRANCE (optional, respects reduced motion)
   ---------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
    .dyt-fade-up {
        opacity: 0;
        transform: translateY(18px);
        animation: dytFadeUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }
    @keyframes dytFadeUp {
        to {
            opacity: 1;
            transform: none;
        }
    }
}