/* public/housy-theme/css/refresh.css
   Site-wide refresh layer that consumes the design tokens in tokens.css.
   Loaded LAST so it wins on equal specificity without !important.

   NOTE: the estate list (estate-map-leftside.blade.php), home, and estate
   detail views carry their own hand-tuned, page-scoped <style> blocks for
   cards / buttons / prices / forms (radius, hover lift, shadows). Those are
   the source of truth for those pages and intentionally win here (later
   source order). This file therefore only carries rules that either apply
   site-wide where no page style exists, or add genuinely new behaviour
   (token typography, header-scroll blur, map framing, footer underline).
   Selectors that matched no markup (pill filters, gallery-hero/estate-info,
   featured-card border, .map-container class, ghost button) were removed
   after a markup audit — they were dead. */

/* === Typography (new, applies site-wide) === */
/* P2: body base bumped from cramped ~0.9rem to 1rem; gentler line-height;
   token body colour. `color` is the weakest selector (0,0,0,1) so any text
   already coloured by style.css (footer, hero, cards) keeps its colour —
   only default-coloured copy shifts. */
body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-body);
}

h1, h2, h3, h4, h5, h6,
.t-1, .t-2, .t-3 {
  font-family: var(--font-display);
}

/* === Primary buttons (Bootstrap .btn-primary; harmless where unused) ===
   The public CTA buttons use .btn-cta / app-btn-primary / theme-btn and are
   styled per-page; this only touches genuine Bootstrap .btn-primary controls
   (e.g. the confirm-password form and admin generic primaries). */
.btn-primary,
.btn.btn-primary {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
    border-radius: var(--radius-sm);
    transition: background-color var(--duration-base) var(--ease),
                border-color var(--duration-base) var(--ease),
                transform var(--duration-fast) var(--ease);
}

.btn-primary:hover,
.btn.btn-primary:hover {
    background-color: var(--brand-dark);
    border-color: var(--brand-dark);
    transform: translateY(-1px);
}

.btn-primary:active,
.btn.btn-primary:active {
    transform: translateY(0);
}

/* === Form inputs (applies on pages without their own form <style>:
   contacts, auth, privacy). On the estate list the page's inline
   .form-control{...!important} intentionally wins. === */
.form-control,
input[type="text"],
input[type="email"],
input[type="number"],
input[type="tel"],
input[type="password"],
input[type="url"],
input[type="search"],
textarea {
    border: 1px solid var(--neutral-300);
    border-radius: var(--radius-sm);
    background-color: #fff;
    transition: border-color var(--duration-base) var(--ease),
                box-shadow var(--duration-base) var(--ease);
}

.form-control:focus,
input:focus,
textarea:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(17, 68, 129, 0.15);
    outline: none;
}

/* === Map framing ===
   #tt is the actual map element (estate-map-leftside + estate-details). The
   detail wrapper #map-container.d-map already frames itself inline, so we
   only round/shadow the map element here. */
#tt {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

/* === P2: link motion (rest state untouched; only smooths existing
   hover colour changes already defined in style.css) === */
a {
    transition: color var(--duration-fast) var(--ease);
}

/* === P2: focus-visible accessibility ring (site-wide) ===
   Only shows on keyboard navigation, not mouse click, so no visual
   regression for pointer users. Replaces the default browser outline
   with a brand-tinted ring. */
:focus-visible {
    outline: 2px solid var(--focus-ring-color);
    outline-offset: 2px;
}

/* === P3: button polish (public theme buttons) ===
   .btn-theme / .button-theme are defined thin in style.css; refresh.css
   loads later so these win on equal specificity. Background colours come
   from skins/default.css and are intentionally NOT touched here — only
   shape, weight and motion. .btn-cta is page-scoped (home, estate list)
   and already token-aligned, so it is deliberately not targeted. */
.btn-theme,
.button-theme,
.btn.button-theme {
    border-radius: var(--btn-radius);
    font-weight: var(--btn-fw);
    transition: background-color var(--duration-base) var(--ease),
                box-shadow var(--duration-base) var(--ease),
                transform var(--duration-fast) var(--ease);
}

.btn-theme:hover,
.button-theme:hover,
.btn.button-theme:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.btn-theme:active,
.button-theme:active,
.btn.button-theme:active {
    transform: translateY(0);
    box-shadow: var(--shadow-sm);
}

/* === P8: footer heading accent ===
   Footer background is brand blue (#114481) with white h4 at weight 400.
   A brand-primary underline would be invisible, so use the gold accent
   (--brand-accent, previously defined but unused) + stronger weight, giving
   footer titles the same underline-accent treatment as the estate page
   section titles, visible against the blue. */
.footer h4 {
    font-weight: var(--fw-semibold);
    position: relative;
    padding-bottom: var(--space-3);
}

.footer h4::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 40px;
    height: 3px;
    background-color: var(--brand-accent);
    border-radius: 2px;
}

/* === F1: section title accent (global) ===
   Home + estate pages carry their own page-scoped ::after (later source
   order wins), so this only fills the titles that lacked one: Contacts
   and the Partners page. Centered to match those centered headings. */
.main-title h1 {
    position: relative;
    display: inline-block;
    padding-bottom: 12px;
}

.main-title h1::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    width: 56px;
    height: 3px;
    background: var(--brand-primary);
    border-radius: 2px;
}

/* === F1: unify Contacts social icons with the footer navy squares ===
   Contacts used bare .linkedin/.facebook (flat grey); make them match the
   brand navy rounded squares used in the footer. */
.contact-info .social-list li a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    background: var(--brand-primary);
    color: #fff;
    transition: background-color var(--duration-base) var(--ease),
                transform var(--duration-fast) var(--ease);
}

.contact-info .social-list li a:hover {
    background: var(--brand-dark);
    color: #fff;
    transform: translateY(-2px);
}

/* === F2: visible form labels (replacing placeholder-only inputs) === */
.form-label {
    display: inline-block;
    margin-bottom: 6px;
    font-weight: var(--fw-medium);
    font-size: var(--text-sm);
    color: var(--text-body);
}