/*
Theme Name: QuikStor Storage
Theme URI: https://dev.azure.com/KoBre/QS%20Wordpress
Description: QuikStor's parent block theme for self-storage operator websites. Three style variations (Storefront, Neighborhood, Premium), a single-site or multi-site variant switch, and every inventory surface rendered by the QuikStor Connect plugin with the QuikStor web components hydrating on top. Design source: the "QuikStor Templates" canvas, brief v1.0 (docs/templates-design-brief.md).
Version: 0.2.0
Author: QuikStor
Requires at least: 6.6
Requires PHP: 8.1
Text Domain: quikstor-storage
*/

/* Everything visual lives in theme.json and styles/*.json. This file carries only what
   theme.json cannot express: the plugin blocks' layout (cards, unit rows, mega menu,
   breadcrumbs), the component slot, the fallback-row hide-on-hydrate rule, the sticky
   mobile bar, and a few layout helpers used by patterns. Colours always come from the
   palette tokens so every style variation restyles these blocks for free. */

/* ---------- Header ---------- */

.qss-header .wp-block-site-logo img { max-height: 56px; width: auto; }
.qss-header .wp-block-navigation a { color: var(--wp--preset--color--ink); text-decoration: none; }
.qss-header .wp-block-navigation a:hover { color: var(--wp--preset--color--brand); }
.qss-header-phone:empty { display: none; }
.qss-header-phone:not(:empty)::before { content: "Call "; font-weight: 400; color: var(--wp--preset--color--ink-soft); }
/* Small screens: the sticky bar carries Call, so the header keeps logo + menu + Rent now on two rows. */
@media (max-width: 781px) {
    .qss-header-phone { display: none; }
    .qss-header .wp-block-site-logo img { max-height: 44px; }
}

/* ---------- Buttons ---------- */

.wp-element-button, .wp-block-button__link { transition: background-color 0.15s ease, color 0.15s ease; }
.is-style-outline .wp-block-button__link { border: 2px solid currentColor; background: transparent; }
.has-contrast-background-color .is-style-outline .wp-block-button__link { color: var(--wp--preset--color--base); }

/* ---------- Facility hero fields (bound to meta; empty = hidden) ---------- */

.qss-facility-address, .qss-facility-phone, .qss-facility-hours { margin: 0; color: var(--wp--preset--color--ink-soft); }
.qss-facility-address:empty, .qss-facility-phone:empty, .qss-facility-hours:empty { display: none; }
.qss-facility-phone:not(:empty)::before { content: "Call "; font-weight: 400; }
.qss-facility-hours:not(:empty) { margin-top: 0.5rem; }
.qss-facility-hours:not(:empty)::before { content: "Hours: "; font-weight: 600; color: var(--wp--preset--color--ink); }
.qss-hero-facility .qss-hero-text { flex: 1 1 360px; min-width: 0; }
.qss-hero-facility .qss-facility-photo { flex: 0 1 420px; max-width: 100%; margin: 0; }
.qss-hero-facility .qss-facility-photo img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: var(--wp--custom--radius--card); }

/* ---------- Facility cards (plugin facility-list block) ---------- */

.qsc-facility-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.25rem; margin-top: 1.5rem; }
.qsc-facility-card { display: flex; flex-direction: column; gap: 0.35rem; background: var(--wp--preset--color--base); border: 1px solid var(--wp--preset--color--line); border-radius: var(--wp--custom--radius--card); padding: 1.25rem 1.5rem; overflow: hidden; }
.qsc-facility-card .qsc-facility-body { display: flex; flex-direction: column; gap: 0.35rem; }
.qsc-facility-card--photo { padding: 0; }
.qsc-facility-card--photo .qsc-facility-body { padding: 1rem 1.5rem 1.25rem; }
.qsc-facility-card .qsc-facility-photo { display: block; aspect-ratio: 16 / 9; background: var(--wp--preset--color--surface); }
.qsc-facility-card .qsc-facility-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.qsc-facility-card .qsc-facility-name { font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: var(--wp--preset--font-size--h-3); line-height: 1.25; color: var(--wp--preset--color--ink); text-decoration: none; }
.qsc-facility-card .qsc-facility-name:hover { color: var(--wp--preset--color--brand); }
.qsc-facility-card .qsc-facility-address { color: var(--wp--preset--color--ink-soft); }
.qsc-facility-card .qsc-facility-distance { color: var(--wp--preset--color--ink-soft); font-size: var(--wp--preset--font-size--small); font-weight: 600; }
.qsc-facility-card .qsc-facility-from { color: var(--wp--preset--color--brand); font-weight: 800; font-size: var(--wp--preset--font-size--lead); margin-top: 0.25rem; font-variant-numeric: tabular-nums; }
.qsc-facility-card .qsc-facility-view { align-self: flex-start; margin-top: 0.75rem; padding: 0.6rem 1.4rem; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }

/* Footer link-list variant. */
.qsc-facility-links { list-style: none; padding: 0; margin: 0; }
.qsc-facility-links li { margin: 0 0 0.35rem; }
.qsc-facility-links a { color: var(--wp--preset--color--ink); text-decoration: none; }
.qsc-facility-links a:hover { color: var(--wp--preset--color--brand); text-decoration: underline; }

/* State-grouped index variant (locations index, large portfolios). */
.qsc-facility-index { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.5rem 2rem; margin-top: 1.5rem; }
.qsc-facility-index__state h3 { margin: 0 0 0.5rem; padding-bottom: 0.35rem; border-bottom: 1px solid var(--wp--preset--color--line); font-size: var(--wp--preset--font-size--lead); }
.qsc-facility-index__state h3 a { color: var(--wp--preset--color--ink); text-decoration: none; }
.qsc-facility-index__state ul { list-style: none; margin: 0; padding: 0; }
.qsc-facility-index__state li { display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; align-items: baseline; padding: 0.35rem 0; }
.qsc-facility-index__state li a { font-weight: 600; color: var(--wp--preset--color--ink); text-decoration: none; }
.qsc-facility-index__state li a:hover { color: var(--wp--preset--color--brand); }
.qsc-facility-index__state li span { color: var(--wp--preset--color--ink-soft); font-size: var(--wp--preset--font-size--small); }
.qsc-facility-index__state li .qsc-facility-index__from { margin-left: auto; color: var(--wp--preset--color--brand); font-weight: 700; }

/* Browse-by-state tiles (facility-list variant states; Portfolio archetype). */
.qsc-state-grid { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.875rem; }
.qsc-state-tile { display: flex; flex-direction: column; gap: 0.3rem; min-height: 150px; padding: 1.125rem 1.25rem; background: var(--wp--preset--color--base); border: 1px solid var(--wp--preset--color--line); border-radius: var(--wp--custom--radius--card); text-decoration: none; color: var(--wp--preset--color--ink); transition: border-color 0.15s ease, transform 0.15s ease; }
.qsc-state-tile:hover { border-color: var(--wp--preset--color--ink); transform: translateY(-2px); }
.qsc-state-tile__count { align-self: flex-start; font-size: var(--wp--preset--font-size--eyebrow); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.2rem 0.5rem; border-radius: 3px; background: var(--wp--preset--color--highlight); color: var(--wp--preset--color--ink); }
.qsc-state-tile__name { font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--h-3); line-height: 1.15; font-weight: 800; letter-spacing: -0.01em; }
.qsc-state-tile__cities { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--ink-soft); }
.qsc-state-tile__from { margin-top: auto; padding-top: 0.5rem; font-weight: 800; color: var(--wp--preset--color--brand); font-variant-numeric: tabular-nums; }

/* Editorial hero facts panel (Premium): three big numbers on the contrast card. */
.qss-hero-facts .qss-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 0.5rem 0 1rem; }
.qss-hero-facts .qss-facts div { display: flex; flex-direction: column-reverse; gap: 0.25rem; }
.qss-hero-facts .qss-facts dt { font-size: var(--wp--preset--font-size--small); opacity: 0.8; }
.qss-hero-facts .qss-facts dd { margin: 0; font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--h-1); line-height: 1; font-weight: 800; letter-spacing: -0.03em; color: var(--wp--preset--color--highlight); font-variant-numeric: tabular-nums; }
.qss-hero-facts p:last-child { margin-bottom: 0; opacity: 0.85; }
/* Neighborhood photo hero: readable text over the photo or the gradient. */
.qss-hero-photo .wp-block-cover__inner-container h1, .qss-hero-photo .wp-block-cover__inner-container p { color: var(--wp--preset--color--base); }
.qss-hero-photo .is-style-outline .wp-block-button__link { color: var(--wp--preset--color--base); border-color: var(--wp--preset--color--base); }

/* Portfolio hero: dark band, headline left, finder bar full width below. */
.qss-hero-portfolio .qss-hero-portfolio__stats { display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; margin: 0; padding: 0; list-style: none; }
.qss-hero-portfolio .qss-hero-portfolio__stats li { font-size: var(--wp--preset--font-size--small); opacity: 0.85; }
.qss-hero-portfolio .qss-hero-portfolio__stats strong { display: block; font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--h-2); line-height: 1; color: var(--wp--preset--color--highlight); font-variant-numeric: tabular-nums; }

/* Location search result note (QSC_Search on /self-storage/?geo_search=). */
.qsc-search-note { font-weight: 700; color: var(--wp--preset--color--ink-soft); }

/* ---------- Unit groups (plugin server-rendered fallback rows) ---------- */

.qsc-unit-groups { display: grid; gap: 0.75rem; margin-top: 1.5rem; }
.qsc-unit-group { display: grid; grid-template-columns: 1fr auto auto; grid-template-areas: "name promo select" "name price select" "scarce label select"; align-items: center; column-gap: 1.25rem; background: var(--wp--preset--color--base); border: 1px solid var(--wp--preset--color--line); border-radius: var(--wp--custom--radius--card); padding: 1rem 1.25rem; }
.qsc-unit-group .qsc-name { grid-area: name; font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: var(--wp--preset--font-size--h-3); }
.qsc-unit-group .qsc-price { grid-area: price; font-weight: 800; text-align: right; font-size: var(--wp--preset--font-size--price); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.qsc-unit-group .qsc-price--promo { grid-area: promo; color: var(--wp--preset--color--brand); text-align: right; }
.qsc-unit-group .qsc-price--promo::after, .qsc-unit-group .qsc-price:only-of-type::after { content: "/mo"; font-size: 0.6em; font-weight: 600; letter-spacing: 0; color: var(--wp--preset--color--ink-soft); }
.qsc-unit-group .qsc-price--street { grid-area: price; text-decoration: line-through; color: var(--wp--preset--color--ink-soft); font-weight: 400; font-size: var(--wp--preset--font-size--body); }
.qsc-unit-group .qsc-promo-label { grid-area: label; color: var(--wp--preset--color--brand); font-size: var(--wp--preset--font-size--small); font-weight: 700; text-align: right; white-space: nowrap; text-transform: uppercase; letter-spacing: 0.04em; }
.qsc-unit-group .qsc-scarcity { grid-area: scarce; color: var(--wp--preset--color--brand); font-size: var(--wp--preset--font-size--small); font-weight: 600; }
.qsc-unit-group .qsc-select { grid-area: select; padding: 0.7rem 1.6rem; min-height: 44px; display: inline-flex; align-items: center; text-decoration: none; }

@media (max-width: 600px) {
    .qsc-unit-group { grid-template-columns: 1fr auto; grid-template-areas: "name promo" "name price" "scarce label" "select select"; row-gap: 0.4rem; }
    .qsc-unit-group .qsc-select { justify-content: center; }
}

/* ---------- Inventory slot (facility page, single-site homepage) ---------- */

.qsc-units-slot { position: relative; }

/* Server-rendered fallback rows: visible until the component upgrades, then the plugin
   sets data-qsc-hydrated on the slot and the hidden attribute on the rows (out of
   layout AND out of the accessibility tree). */
.qsc-units-slot[data-qsc-hydrated="true"] .qsc-unit-groups { display: none; }

/* Component tokens: the theme passes its palette through; it never restyles internals. */
quikstor-move-in,
quikstor-unit-groups,
quikstor-facilities {
    --qs-color-primary: var(--wp--preset--color--brand);
    --qs-color-primary-hover: var(--wp--preset--color--brand-dark);
    --qs-color-primary-contrast: var(--wp--preset--color--base);
    --qs-color-secondary: var(--wp--preset--color--accent-2);
    --qs-color-surface: var(--wp--preset--color--base);
    --qs-color-text: var(--wp--preset--color--ink);
    --qs-color-border: var(--wp--preset--color--line);
    --qs-font-family: inherit;
    --qs-font-family-heading: var(--wp--preset--font-family--display);
    --qs-radius: var(--wp--custom--radius--control);
    --qs-radius-sm: var(--wp--custom--radius--control);
    --qs-radius-md: var(--wp--custom--radius--card);
    --qs-radius-lg: var(--wp--custom--radius--card);
    display: block;
}

/* ---------- Locations mega menu (plugin block) ---------- */

.qsc-locmenu { position: relative; }
.qsc-locmenu__toggle { appearance: none; background: none; border: 0; padding: 0.25rem 0; font: inherit; font-weight: 600; color: var(--wp--preset--color--ink); cursor: pointer; display: inline-flex; align-items: center; gap: 0.35rem; min-height: 44px; }
.qsc-locmenu__toggle:hover, .qsc-locmenu.is-open .qsc-locmenu__toggle { color: var(--wp--preset--color--brand); }
.qsc-locmenu__chevron::before { content: ""; display: inline-block; width: 0.45em; height: 0.45em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-0.15em); }
.qsc-locmenu__panel { display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); z-index: 60; width: min(960px, calc(100vw - 32px)); padding-top: 0.75rem; }
.qsc-locmenu__inner { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1.25rem 2rem; background: var(--wp--preset--color--base); border: 1px solid var(--wp--preset--color--line); border-radius: var(--wp--custom--radius--card); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.14); padding: 1.5rem 1.75rem; }
.qsc-locmenu.is-open .qsc-locmenu__panel { display: block; }
@media (hover: hover) and (min-width: 782px) {
    .qsc-locmenu:hover .qsc-locmenu__panel, .qsc-locmenu:focus-within .qsc-locmenu__panel { display: block; }
}
.qsc-locmenu__state-link { display: block; font-weight: 700; color: var(--wp--preset--color--brand); text-decoration: none; text-transform: uppercase; letter-spacing: 0.06em; font-size: var(--wp--preset--font-size--small); margin-bottom: 0.5rem; padding-bottom: 0.35rem; border-bottom: 1px solid var(--wp--preset--color--line); }
.qsc-locmenu__state ul { list-style: none; margin: 0; padding: 0; }
.qsc-locmenu__state li { margin: 0 0 0.3rem; }
.qsc-locmenu__city > a, .qsc-locmenu__city > span { font-weight: 600; color: var(--wp--preset--color--ink); text-decoration: none; }
.qsc-locmenu__city ul { margin: 0.2rem 0 0.5rem 0.75rem; }
.qsc-locmenu__city ul a, .qsc-locmenu__state > ul > li > a { color: var(--wp--preset--color--ink-soft); text-decoration: none; font-size: 0.95rem; }
.qsc-locmenu__state a:hover, .qsc-locmenu__city ul a:hover { color: var(--wp--preset--color--brand); text-decoration: underline; }
.qsc-locmenu__all { grid-column: 1 / -1; justify-self: start; margin-top: 0.25rem; font-weight: 700; color: var(--wp--preset--color--brand); text-decoration: none; }
@media (max-width: 781px) {
    .qsc-locmenu { position: static; }
    .qsc-locmenu__panel { left: 16px; right: 16px; width: auto; transform: none; max-height: 70vh; overflow: auto; padding-top: 0.5rem; }
    .qsc-locmenu__inner { padding: 1rem 1.25rem; }
}

/* ---------- Breadcrumbs (plugin block) ---------- */

.qsc-breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0 0 1rem; padding: 0; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--ink-soft); }
.qsc-breadcrumbs li + li::before { content: "/"; margin-right: 0.35rem; color: var(--wp--preset--color--line); }
.qsc-breadcrumbs a { color: var(--wp--preset--color--ink-soft); text-decoration: none; }
.qsc-breadcrumbs a:hover { color: var(--wp--preset--color--brand); }
.qsc-breadcrumbs [aria-current] { color: var(--wp--preset--color--ink); font-weight: 600; }

/* ---------- Location pages + FAQ ---------- */

.qsl-location-intro { max-width: 70ch; }
.qsl-faq h3, .qss-faq h3 { margin: 1.25rem 0 0.35rem; font-size: var(--wp--preset--font-size--lead); }
.qsl-faq p, .qss-faq p { margin: 0; color: var(--wp--preset--color--ink-soft); }

/* ---------- Footer ---------- */

.qss-footer a { color: var(--wp--preset--color--ink); text-decoration: none; }
.qss-footer a:hover { color: var(--wp--preset--color--brand); text-decoration: underline; }
.qss-footer-legal { color: var(--wp--preset--color--ink-soft); }

/* ---------- Sticky mobile bar (plugin block, theme-styled) ---------- */

.qsc-sticky-bar { display: none; }

@media (max-width: 781px) {
    .qsc-sticky-bar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 50;
        display: flex;
        gap: 0.625rem;
        padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
        background: var(--wp--preset--color--base);
        border-top: 1px solid var(--wp--preset--color--line);
        box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.08);
    }
    .qsc-sticky-bar a {
        flex: 1 1 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 48px;
        font-weight: 700;
        text-decoration: none;
        border-radius: var(--wp--custom--radius--control);
    }
    .qsc-sticky-bar .qsc-sticky-bar__call {
        flex: 0 0 46%;
        color: var(--wp--preset--color--ink);
        border: 1px solid var(--wp--preset--color--ink);
        background: var(--wp--preset--color--base);
    }
    .qsc-sticky-bar .qsc-sticky-bar__rent {
        color: var(--wp--preset--color--base);
        background: var(--wp--preset--color--brand);
    }
    /* Room for the bar above the footer. */
    body.qsc-has-sticky-bar .wp-site-blocks { padding-bottom: 5rem; }
    /* Hidden while the in-page move-in flow is open (plugin toggles the class). */
    body.qsc-move-in-open .qsc-sticky-bar { display: none; }
}

/* ---------- Photo placeholder (dev/demo only, removed when media lands) ---------- */

.qsc-photo-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--wp--preset--color--surface);
    color: var(--wp--preset--color--ink-soft);
    font-size: 0.8125rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: var(--wp--custom--radius--card);
}

/* ---------- Accessibility helpers ---------- */

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    padding: 0.75rem 1rem;
    background: var(--wp--preset--color--ink);
    color: var(--wp--preset--color--base);
    z-index: 100;
}
.skip-link:focus { left: 1rem; top: 1rem; }

:focus-visible {
    outline: 3px solid var(--wp--preset--color--accent-2);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}