/*
Theme Name: Entreaty v1.1
Author: Your Name
Version: 1.2.0
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Tags: block-theme, full-site-editing, performance, dark, portfolio
Text Domain: entreaty
*/

/* 1 — 28 design-role variables (Entreaty-default dark palette; overridden by the active Palette Manager palette) */
:root {
    --entreaty-body-text:          #9DA1B0;
    --entreaty-heading-display:    #FFFFFF;
    --entreaty-heading-body:       #FFFFFF;
    --entreaty-link:               #E04F2B;
    --entreaty-link-hover:         #F26B4A;
    --entreaty-muted-text:         #6B7080;
    --entreaty-btn-primary-bg:     #E04F2B;
    --entreaty-btn-primary-text:   #FFFFFF;
    --entreaty-btn-outline-bg:     transparent;
    --entreaty-btn-outline-border: #FFFFFF;
    --entreaty-btn-outline-text:   #FFFFFF;
    --entreaty-page-bg:            #0A0E27;
    --entreaty-header-bg:          #0A0E27;
    --entreaty-header-text:        #FFFFFF;
    --entreaty-footer-bg:          #0A0E27;
    --entreaty-footer-text:        #9DA1B0;
    --entreaty-card-bg:            #161A30;
    --entreaty-card-border:        #242943;
    --entreaty-input-border:       #2A2F4A;
    --entreaty-input-border-focus: #E04F2B;
    --entreaty-separator:          #20243B;
    --entreaty-blockquote-border:  #E04F2B;
    --entreaty-table-border:       #242943;
    --entreaty-image-border:       #242943;
    --entreaty-tag-label:          #E04F2B;
    --entreaty-nav-active:         #E04F2B;
    --entreaty-selection:          #E04F2B;
    --entreaty-accent-custom:      #E04F2B;

    /* shape tokens (flat, rounded design) */
    --entreaty-radius:       16px;
    --entreaty-radius-small: 10px;

    /* motion + derived surfaces (design pass v1.2) — all palette-driven */
    /* motion: 0.7s cubic-bezier(0.65, 0, 0.35, 1) — inlined at each use;
       var()-based transition shorthands proved unreliable during mockup testing */
    --entreaty-surface-tint: color-mix(in srgb, var(--entreaty-heading-display) 2.5%, transparent);
    --entreaty-card-sheen: linear-gradient(160deg,
        color-mix(in srgb, var(--entreaty-heading-display) 4%, transparent) 0%,
        transparent 45%);
    --entreaty-glow: color-mix(in srgb, var(--entreaty-accent-custom) 9%, transparent);

    /* page-color film opacity over a site background image (100% = solid) */
    --entreaty-bg-overlay-alpha: 0%;
}


/* 2 — element-to-role wiring */
/* Typography */
html                 { background-color: var(--entreaty-page-bg); }
body                 { color: var(--entreaty-body-text); } /* transparent: html owns the page color / image */
/* the page-color film: sits between any body background image and the content.
   alpha 100% = solid color (image hidden) ... 0% = image fully visible. */
.wp-site-blocks      { min-height: 100vh;
                       background-color: var(--entreaty-page-bg); /* fallback: no color-mix support */
                       background-color: color-mix(in srgb, var(--entreaty-page-bg) var(--entreaty-page-bg-alpha), transparent); }
h1, h2               { color: var(--entreaty-heading-display); }
h3, h4, h5, h6       { color: var(--entreaty-heading-body); }
a                    { color: var(--entreaty-link); transition: color 0.7s cubic-bezier(0.65, 0, 0.35, 1); }
a:hover:not(.wp-block-button__link) { color: var(--entreaty-link-hover); }
.wp-block-post-date,
.wp-block-post-author,
.wp-block-post-terms { color: var(--entreaty-muted-text); }

/* Buttons — pill; solid = orange fill, outline = white border, no fill */
.wp-block-button__link {
    background-color: var(--entreaty-btn-primary-bg);
    color: var(--entreaty-btn-primary-text);
    transform: translateY(0);
    will-change: transform; /* pre-promoted layer: prevents text re-raster snap in Firefox */
    transition: background-color 0.7s cubic-bezier(0.65, 0, 0.35, 1), color 0.7s cubic-bezier(0.65, 0, 0.35, 1),
                border-color 0.7s cubic-bezier(0.65, 0, 0.35, 1), transform 0.7s cubic-bezier(0.65, 0, 0.35, 1),
                box-shadow 0.7s cubic-bezier(0.65, 0, 0.35, 1);
}
.wp-block-button__link:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px color-mix(in srgb, var(--entreaty-accent-custom) 18%, transparent);
}
.wp-block-button.is-style-outline > .wp-block-button__link {
    background-color: var(--entreaty-btn-outline-bg);
    border: 1px solid var(--entreaty-btn-outline-border);
    color: var(--entreaty-btn-outline-text);
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
    background-color: var(--entreaty-btn-outline-border);
    color: var(--entreaty-page-bg);
}

/* Structure */
.site-header { background-color: var(--entreaty-header-bg); color: var(--entreaty-header-text); }
.site-footer { background-color: var(--entreaty-footer-bg); color: var(--entreaty-footer-text); }
.site-header a, .site-header .wp-block-navigation { color: var(--entreaty-header-text); }
.site-header a:not(.wp-block-button__link):hover,
.site-header .wp-block-navigation a:not(.wp-block-button__link):hover { color: var(--entreaty-link); }
.site-header .wp-block-button__link,
.site-header .wp-block-button__link:hover { color: var(--entreaty-btn-primary-text); text-decoration: none; }

/* Navigation — no overlay/hamburger; animated accent underline (buttons excluded) */
.wp-block-navigation a:not(.wp-block-button__link) { position: relative; }
.wp-block-navigation a:not(.wp-block-button__link)::after {
    content: "";
    position: absolute; left: 0; bottom: -6px;
    width: 100%; height: 1.5px;
    background: var(--entreaty-nav-active);
    transform: scaleX(0); transform-origin: left;
    transition: transform 0.7s cubic-bezier(0.65, 0, 0.35, 1);
}
.wp-block-navigation a:not(.wp-block-button__link):hover::after { transform: scaleX(1); }
.wp-block-navigation .current-menu-item > a,
.wp-block-navigation .current_page_item > a { color: var(--entreaty-nav-active); }
.wp-block-navigation .current-menu-item > a:not(.wp-block-button__link)::after,
.wp-block-navigation .current_page_item > a:not(.wp-block-button__link)::after { transform: scaleX(1); }

/* Cards — surfaced panels: sheen, full padding safety net, hover lift */
.wp-block-group.is-style-card {
    background-color: var(--entreaty-card-bg);
    background-image: var(--entreaty-card-sheen);
    border: 1px solid var(--entreaty-card-border);
    border-radius: var(--entreaty-radius);
    padding: var(--wp--preset--spacing--50); /* default; pattern-set padding overrides */
    box-shadow: var(--wp--preset--shadow--soft);
    transform: translateY(0);
    will-change: transform;
    transition: transform 0.7s cubic-bezier(0.65, 0, 0.35, 1), border-color 0.7s cubic-bezier(0.65, 0, 0.35, 1),
                box-shadow 0.7s cubic-bezier(0.65, 0, 0.35, 1);
}
.wp-block-group.is-style-card:hover {
    transform: translateY(-6px);
    border-color: color-mix(in srgb, var(--entreaty-accent-custom) 40%, var(--entreaty-card-border));
    box-shadow: var(--wp--preset--shadow--lift);
}
.wp-block-group.is-style-card.is-style-borderless { border-color: transparent; }

/* Rounded media */
.wp-block-image img,
.wp-block-post-featured-image img,
.wp-block-cover { border-radius: var(--entreaty-radius); overflow: hidden; }
img.is-style-framed { border: 1px solid var(--entreaty-image-border); }
/* full-width elements never round */
.alignfull,
.wp-block-cover.alignfull,
.wp-block-image.alignfull img,
.wp-block-post-featured-image.alignfull img,
.alignfull > .wp-block-cover__image-background { border-radius: 0; }

/* Inputs — underline style, transparent field */
input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
textarea, select,
.wp-block-search__input {
    background-color: transparent;
    border: 0;
    border-bottom: 1px solid var(--entreaty-input-border);
    border-radius: 0;
    color: var(--entreaty-body-text);
    padding-inline: 0;
    padding-block: 0.6rem;
}
input:focus, textarea:focus, select:focus,
.wp-block-search__input:focus {
    outline: 0;
    border-bottom-color: var(--entreaty-input-border-focus);
}
::placeholder { color: var(--entreaty-muted-text); }

/* Search block button keeps the pill treatment */
.wp-block-search__button { border-radius: 9999px; }

/* Separators, quotes, tables */
.wp-block-separator { border-color: var(--entreaty-separator); color: var(--entreaty-separator); }

.wp-block-quote {
    border-inline-start: 2px solid var(--entreaty-blockquote-border);
    padding-inline-start: var(--wp--preset--spacing--40, 1.5rem);
}
.wp-block-quote.is-style-plain { border-inline-start: 0; padding-inline-start: 0; }
.wp-block-quote cite { color: var(--entreaty-link); font-style: normal; }

.wp-block-table { color: var(--entreaty-body-text); }
.wp-block-table th { color: var(--entreaty-heading-body); font-family: var(--wp--preset--font-family--rubik); font-weight: 600; }
.wp-block-table td, .wp-block-table th { border-color: var(--entreaty-table-border); }
.wp-block-table tbody tr:nth-child(odd) { background-color: var(--entreaty-card-bg); }

/* Lists — accent markers; checkmark list style */
.wp-block-list { list-style-position: outside; }
ul.is-style-checkmark { list-style: none; padding-inline-start: 1.5em; }
ul.is-style-checkmark li { position: relative; }
ul.is-style-checkmark li::before {
    content: "";
    position: absolute;
    inset-inline-start: -1.5em;
    inset-block-start: 0.15em;
    width: 1em; height: 1em;
    background-color: var(--entreaty-accent-custom);
    -webkit-mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z' fill='%23fff'/%3E%3C/svg%3E");
    mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z' fill='%23fff'/%3E%3C/svg%3E");
}

/* Dropcap — accent */
.has-drop-cap:not(:focus)::first-letter {
    font-family: var(--wp--preset--font-family--rubik);
    color: var(--entreaty-accent-custom);
    font-weight: 700;
}

/* Accent */
.wp-block-post-terms a { color: var(--entreaty-tag-label); }
::selection { background-color: var(--entreaty-selection); color: #fff; }

/* Handwritten accent helper (Rock Salt ships available but unassigned) */
.entreaty-script { font-family: var(--wp--preset--font-family--rock-salt); }

/* 3 — JS-driven components (carousel, portfolio filter/hover, countdown) */
.entreaty-carousel { position: relative; }
.entreaty-carousel__track {
    display: flex;
    gap: var(--wp--preset--spacing--40, 1.5rem);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-bottom: 0.5rem;
}
.entreaty-carousel__track::-webkit-scrollbar { display: none; }
.entreaty-carousel__track > * { scroll-snap-align: start; flex: 0 0 clamp(240px, 72vw, 340px); }

/* Contact form (visual placeholder) */
.entreaty-contact { display: flex; flex-direction: column; gap: 1.5rem; }
.entreaty-contact__row { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.entreaty-contact__row > * { flex: 1 1 200px; }
.entreaty-contact input, .entreaty-contact textarea { width: 100%; }
.entreaty-contact button {
    align-self: flex-start; border: 0; border-radius: 9999px; cursor: pointer;
    background: var(--entreaty-btn-primary-bg); color: var(--entreaty-btn-primary-text);
    font-family: var(--wp--preset--font-family--kumbh-sans); font-weight: 600;
    padding: 0.85rem 1.9rem; transition: background-color 0.2s ease;
}
.entreaty-contact button:hover { background: var(--entreaty-link-hover); }
.entreaty-carousel__nav { display: flex; gap: 0.5rem; justify-content: flex-end; margin-top: 1rem; }
.entreaty-carousel__prev, .entreaty-carousel__next {
    width: 2.75rem; height: 2.75rem; border-radius: 9999px;
    border: 1px solid var(--entreaty-card-border);
    background: transparent; color: var(--entreaty-heading-display);
    cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease;
}
.entreaty-carousel__prev:hover, .entreaty-carousel__next:hover {
    background: var(--entreaty-accent-custom); border-color: var(--entreaty-accent-custom);
}

/* Portfolio filter bar */
.entreaty-filter-bar { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.entreaty-filter {
    background: transparent; border: 1px solid var(--entreaty-card-border);
    color: var(--entreaty-body-text); border-radius: 9999px;
    padding: 0.5rem 1.25rem; cursor: pointer;
    font: inherit; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.entreaty-filter:hover, .entreaty-filter.is-active {
    background: var(--entreaty-accent-custom); border-color: var(--entreaty-accent-custom); color: #fff;
}

/* Portfolio item hover */
.entreaty-portfolio-item { transition: transform 0.7s cubic-bezier(0.65, 0, 0.35, 1); transform: translateY(0); will-change: transform; }
.entreaty-portfolio-item:hover { transform: translateY(-6px); }
.entreaty-portfolio-item img { transition: transform 0.7s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.7s cubic-bezier(0.65, 0, 0.35, 1); }
.entreaty-portfolio-item:hover img { transform: scale(1.04); }

/* Countdown */
.entreaty-countdown { display: flex; gap: 1rem; flex-wrap: wrap; }
.entreaty-countdown__unit {
    min-width: 4rem; text-align: center;
    background: var(--entreaty-card-bg); border: 1px solid var(--entreaty-card-border);
    border-radius: var(--entreaty-radius-small); padding: 0.75rem 0.5rem;
}
.entreaty-countdown__unit > span:first-child {
    display: block; font-family: var(--wp--preset--font-family--rubik);
    font-size: 1.75rem; font-weight: 700; color: var(--entreaty-heading-display);
}
.entreaty-countdown__unit > span:last-child {
    font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--entreaty-muted-text);
}

/* Card / portfolio image ratios (enforced via CSS so pattern image blocks stay plain & valid) */
.is-style-card .wp-block-image img,
.entreaty-card .wp-block-image img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.entreaty-portfolio-item .wp-block-image img,
.entreaty-square .wp-block-image img { aspect-ratio: 1 / 1; object-fit: cover; width: 100%; }
.entreaty-cover .wp-block-image img { aspect-ratio: 2 / 3; object-fit: cover; width: 100%; }
.entreaty-wide-media .wp-block-image img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }

/* Small avatar (hero chip, author box) */
.entreaty-avatar img { width: 40px; height: 40px; border-radius: 9999px; aspect-ratio: 1; object-fit: cover; }

/* 4 — design pass v1.2 (approved via mockup)
   Utility classes for the editor:
   .entreaty-surface-tint | .entreaty-surface-panel  — alternating section bands
   .entreaty-glow-top | .entreaty-glow-bottom        — radial accent atmosphere (hero / CTA)
   .entreaty-eyebrow | .entreaty-eyebrow-script      — section-header kickers
   .entreaty-icon-chip                               — circular accent chip around icon glyphs
   .entreaty-quote-mark | .entreaty-cite             — testimonial treatments
   .entreaty-cta-band                                — full-width CTA band (use on alignfull group)
*/

/* section surfaces */
.entreaty-surface-tint  { background-color: var(--entreaty-surface-tint); }
.entreaty-surface-panel {
    background-color: color-mix(in srgb, var(--entreaty-card-bg) 55%, transparent);
    border-block: 1px solid var(--entreaty-card-border);
}
.entreaty-glow-top, .entreaty-glow-bottom { position: relative; }
.entreaty-glow-top::before, .entreaty-glow-bottom::before {
    content: "";
    position: absolute; inset: 0;
    pointer-events: none;
}
.entreaty-glow-top::before    { background: radial-gradient(ellipse 60% 55% at 50% 0%,   var(--entreaty-glow), transparent 70%); }
.entreaty-glow-bottom::before { background: radial-gradient(ellipse 55% 70% at 50% 100%, var(--entreaty-glow), transparent 70%); }
.entreaty-glow-top > *, .entreaty-glow-bottom > * { position: relative; }

/* section-header kickers */
.entreaty-eyebrow {
    display: flex; align-items: center; gap: 0.75rem;
    font-size: 0.78rem; font-weight: 600;
    letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--entreaty-accent-custom);
}
.entreaty-eyebrow.is-centered { justify-content: center; }
.entreaty-eyebrow.is-centered::before {
    content: ""; height: 1px; width: 3rem;
    background: color-mix(in srgb, var(--entreaty-accent-custom) 55%, transparent);
}
.entreaty-eyebrow::after {
    content: ""; height: 1px; width: 3rem;
    background: color-mix(in srgb, var(--entreaty-accent-custom) 55%, transparent);
}
.entreaty-eyebrow-script {
    font-family: var(--wp--preset--font-family--rock-salt);
    color: var(--entreaty-link-hover);
    display: block;
    transform: rotate(-2deg);
}
/* compact header CTA (mockup btn-small) */
.site-header .wp-block-button__link {
    padding: 0.6rem 1.4rem;
    font-size: 0.875rem;
}

/* icon chip */
.entreaty-icon-chip {
    width: 3.25rem; height: 3.25rem; border-radius: 9999px;
    display: grid; place-items: center;
    font-size: 1.25rem; color: var(--entreaty-link-hover);
    background: color-mix(in srgb, var(--entreaty-accent-custom) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--entreaty-accent-custom) 30%, transparent);
    transition: background-color 0.7s cubic-bezier(0.65, 0, 0.35, 1), transform 0.7s cubic-bezier(0.65, 0, 0.35, 1);
}
.wp-block-group.is-style-card:hover .entreaty-icon-chip {
    background: color-mix(in srgb, var(--entreaty-accent-custom) 22%, transparent);
    transform: scale(1.06);
}

/* testimonial treatments */
.entreaty-quote-mark::before {
    content: "\201C";
    display: block;
    font-family: var(--wp--preset--font-family--rubik);
    font-size: 4.5rem; font-weight: 700; line-height: 1;
    height: 3rem; margin-top: -0.5rem;
    color: color-mix(in srgb, var(--entreaty-accent-custom) 35%, transparent);
}
.entreaty-cite { display: flex; align-items: center; gap: 0.75rem; }

/* full-width CTA band */
.entreaty-cta-band {
    background-color: var(--entreaty-card-bg);
    background-image: var(--entreaty-card-sheen);
    border-block: 1px solid var(--entreaty-card-border);
    box-shadow: var(--wp--preset--shadow--soft);
}

/* header glass — applies when the header group is set Position: Sticky */
.site-header.is-position-sticky,
.is-position-sticky .site-header {
    z-index: 10;
    background-color: color-mix(in srgb, var(--entreaty-header-bg) 72%, transparent);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid color-mix(in srgb, var(--entreaty-card-border) 70%, transparent);
}

/* footer — dark anchor + link hover nudge (buttons excluded) */
.site-footer {
    background-color: color-mix(in srgb, var(--entreaty-footer-bg) 62%, #000);
}
.site-footer a:not(.wp-block-button__link) {
    transition: color 0.7s cubic-bezier(0.65, 0, 0.35, 1), padding-left 0.7s cubic-bezier(0.65, 0, 0.35, 1);
}
.site-footer .wp-block-navigation a:not(.wp-block-button__link):hover {
    color: var(--entreaty-link-hover);
    padding-left: 6px;
}
.site-footer .wp-block-navigation a:not(.wp-block-button__link)::after { content: none; }

/* wider card grids: columns default gap upgrade + stacked row gap
   (:where keeps specificity at zero so pattern/editor-set gaps always win) */
:where(.wp-block-columns:not(.is-not-stacked-on-mobile)) { gap: 2.25rem; }
@media (max-width: 781px) {
    :where(.wp-block-columns:not(.is-not-stacked-on-mobile)) { row-gap: 2rem; }
}

/* 4b — accessibility helpers */
.screen-reader-text {
    clip: rect(1px,1px,1px,1px);
    clip-path: inset(50%);
    height: 1px; width: 1px;
    margin: -1px; overflow: hidden; padding: 0;
    position: absolute; word-wrap: normal !important;
}
.skip-link:focus {
    clip: auto !important; clip-path: none;
    display: block; height: auto; width: auto;
    left: 1rem; top: 1rem; z-index: 100000;
    font-size: 1rem; padding: 0.75rem 1.5rem; text-decoration: none;
    background: var(--entreaty-btn-primary-bg); color: var(--entreaty-btn-primary-text);
}
:focus-visible { outline: 2px solid var(--entreaty-link); outline-offset: 2px; }