/*
Theme Name: Escrow Inc
Description: Modern bank-style child theme for Escrow, Inc., built on Astra.
Template: astra
Version: 1.8.0
Author: In-house
*/

:root {
    /* Astra's Global Color Palette variables - overriding these re-themes
       most Customizer-driven colors (buttons, links) without touching Astra core. */
    --ast-global-color-0: #16523c;
    --ast-global-color-1: #0d3527;
    --ast-global-color-2: #12151a;
    --ast-global-color-3: #4b5157;
    --ast-global-color-4: #f5f6f8;

    --escrow-green: #16523c;
    --escrow-green-dark: #0d3527;
    --escrow-ink: #12151a;
}

/* Typography - modern sans-serif everywhere instead of Astra's default */
body,
button,
input,
select,
textarea {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.elementor-heading-title {
    font-family: inherit !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em;
    color: var(--escrow-ink);
}

/* Hero headings were rendering quite small (28px/24px) - a homepage
   headline should carry more visual weight. Scales with viewport width.
   Extra specificity (body html h1) needed to beat Astra's own responsive
   typography CSS, which also uses !important and would otherwise win the
   tie-break on source order alone. */
body html h1,
body html .elementor-widget-heading h1.elementor-heading-title {
    font-size: clamp(2rem, 5vw, 3.25rem) !important;
    line-height: 1.15 !important;
}

body html h2,
body html .elementor-widget-heading h2.elementor-heading-title {
    font-size: clamp(1.4rem, 3vw, 2rem) !important;
    line-height: 1.25 !important;
}

/* Buttons - across core WP, Elementor, and Astra's own button markup */
a.button,
button:not(.escrow-pay-button),
input[type="submit"],
input[type="button"],
.wp-block-button__link,
.elementor-button,
.ast-button,
.button {
    background-color: var(--escrow-green) !important;
    border-color: var(--escrow-green) !important;
    color: #fff !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    letter-spacing: -0.005em;
    transition: background-color 0.15s ease, transform 0.1s ease;
    box-shadow: none !important;
}

a.button:hover,
button:not(.escrow-pay-button):hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.wp-block-button__link:hover,
.elementor-button:hover,
.ast-button:hover,
.button:hover {
    background-color: var(--escrow-green-dark) !important;
    border-color: var(--escrow-green-dark) !important;
}

/* Links */
a {
    color: var(--escrow-green);
}

a:hover {
    color: var(--escrow-green-dark);
}

/* Site header - clean white bar with a subtle shadow instead of a hard border.
   Astra's "transparent header" feature was designed for a see-through bar
   sitting over a dark hero image (near-white logo, near-white nav text, tall
   padding for breathing room over a photo). We're using an opaque white bar
   instead, so all three of those defaults need overriding below. */
.site-header,
#masthead {
    background-color: #fff;
    box-shadow: 0 1px 3px rgba(16, 24, 20, 0.06);
    min-height: 0 !important;
}

.site-header img,
#masthead img,
.ast-site-identity img {
    filter: none !important;
}

.ast-primary-header-bar,
.site-primary-header-wrap,
.main-header-bar {
    padding-top: 0.6rem !important;
    padding-bottom: 0.6rem !important;
    min-height: 0 !important;
}

.ast-site-identity img,
.site-header img {
    max-height: 64px !important;
    width: auto !important;
}

.main-header-menu .menu-item > a,
.ast-header-navigation-link {
    color: var(--escrow-ink) !important;
    font-weight: 500;
}

.main-header-menu .menu-item > a:hover,
.main-header-menu .current-menu-item > a {
    color: var(--escrow-green) !important;
}

/* Form inputs - rounded, calmer borders, visible focus state */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="search"],
textarea,
select {
    border-radius: 8px !important;
    border: 1px solid #dcdfe3 !important;
    padding: 0.65em 0.9em !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
    border-color: var(--escrow-green) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(22, 82, 60, 0.15) !important;
}

/* ==========================================================================
   Custom homepage (front-page.php)
   ========================================================================== */

.escrow-home {
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
    flex: 1 1 100%;
    display: block;
}

.escrow-home section {
    padding: 5rem 1.5rem;
}

.escrow-home h1,
.escrow-home h2,
.escrow-home h3 {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}

/* Hero */
.eh-hero {
    position: relative;
    background: linear-gradient(160deg, var(--escrow-green) 0%, var(--escrow-green-dark) 100%);
    padding: 8rem 1.5rem !important;
    text-align: center;
    overflow: hidden;
}

.eh-hero-bg {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 15% 20%, rgba(255, 255, 255, 0.07) 0, rgba(255, 255, 255, 0.07) 2px, transparent 2px),
        radial-gradient(circle at 85% 15%, rgba(255, 255, 255, 0.05) 0%, transparent 45%),
        radial-gradient(circle at 10% 90%, rgba(255, 255, 255, 0.06) 0%, transparent 40%);
    background-size: 34px 34px, 100% 100%, 100% 100%;
    pointer-events: none;
}

.eh-hero-inner {
    position: relative;
    max-width: 760px;
    margin: 0 auto;
}

.eh-eyebrow {
    color: rgba(255, 255, 255, 0.8);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.82rem;
    font-weight: 700;
    margin: 0 0 1.25rem;
}

.eh-hero h1 {
    color: #fff !important;
    font-size: clamp(2.5rem, 6.5vw, 4.25rem) !important;
    line-height: 1.08 !important;
    margin: 0 0 1.5rem;
}

.eh-hero-sub {
    color: rgba(255, 255, 255, 0.85);
    font-size: 1.2rem;
    line-height: 1.6;
    margin: 0 0 2.5rem;
}

.eh-hero-actions {
    display: flex;
    gap: 0.9rem;
    justify-content: center;
    flex-wrap: wrap;
}

.eh-cta-primary,
.eh-cta-secondary {
    display: inline-flex;
    align-items: center;
    padding: 0.85rem 1.85rem;
    border-radius: 12px;
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none !important;
    transition: transform 0.12s ease, background 0.15s ease;
}

.eh-cta-primary {
    background: #fff !important;
    color: var(--escrow-green-dark) !important;
}

.eh-cta-primary:hover {
    transform: translateY(-1px);
    background: #f0f0f0 !important;
}

.eh-cta-secondary {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.4);
}

.eh-cta-secondary:hover {
    background: rgba(255, 255, 255, 0.2) !important;
}

/* Stats bar */
.eh-stats {
    background: #fff;
    padding: 4rem 1.5rem !important;
}

.eh-stats-inner {
    max-width: 1080px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    text-align: center;
}

.eh-stat {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0 1rem;
    border-left: 1px solid var(--escrow-border, #e7e9ec);
}

.eh-stat:first-child {
    border-left: none;
}

.eh-stat-num {
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1;
    background: linear-gradient(160deg, var(--escrow-green) 0%, var(--escrow-accent, #2f8f68) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.eh-stat-label {
    font-size: 0.88rem;
    color: var(--escrow-muted, #6b7280);
    line-height: 1.4;
}

@media (max-width: 700px) {
    .eh-stat {
        border-left: none;
        border-top: 1px solid var(--escrow-border, #e7e9ec);
        padding-top: 1.5rem;
    }
    .eh-stat:first-child {
        border-top: none;
        padding-top: 0;
    }
}

/* Backdrop - full-bleed local photo with a brand-color overlay */
.eh-backdrop {
    position: relative;
    background-size: cover;
    background-position: center;
    min-height: 420px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4rem 1.5rem !important;
}

.eh-backdrop-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, rgba(13, 53, 39, 0.88) 0%, rgba(22, 82, 60, 0.72) 100%);
}

.eh-backdrop-inner {
    position: relative;
    text-align: center;
    max-width: 640px;
}

.eh-backdrop-inner h2 {
    color: #fff !important;
    font-size: clamp(1.75rem, 4vw, 2.5rem) !important;
    margin: 0 0 0.75rem;
}

.eh-backdrop-inner p {
    color: rgba(255, 255, 255, 0.85);
    font-size: 1.05rem;
    margin: 0;
}

/* Showcase - two column image + text */
.eh-showcase {
    background: #fff;
}

.eh-showcase-inner {
    max-width: 1080px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
}

.eh-showcase-image {
    border-radius: 20px;
    overflow: hidden;
}

.eh-showcase-image img {
    width: 100%;
    height: 100%;
    max-height: 420px;
    object-fit: cover;
    border-radius: 20px;
    box-shadow: 0 1px 3px rgba(16, 24, 20, 0.06), 0 12px 32px rgba(16, 24, 20, 0.08);
    transition: transform 0.4s ease;
}

.eh-showcase-image:hover img {
    transform: scale(1.04);
}

.eh-showcase-text h2 {
    font-size: clamp(1.6rem, 3.5vw, 2.25rem) !important;
    margin: 0 0 1rem;
}

.eh-showcase-text p {
    color: var(--escrow-muted, #6b7280);
    font-size: 1.05rem;
    line-height: 1.65;
    margin: 0 0 1.75rem;
}

.eh-cta-on-light {
    background: var(--escrow-green) !important;
    color: #fff !important;
}

.eh-cta-on-light:hover {
    background: var(--escrow-green-dark) !important;
}

@media (max-width: 800px) {
    .eh-showcase-inner {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .eh-showcase-image img {
        max-height: 280px;
    }
}

/* Steps */
.eh-steps {
    background: var(--escrow-bg, #f5f6f8);
    text-align: center;
}

.eh-steps h2 {
    font-size: clamp(1.8rem, 4.5vw, 2.75rem) !important;
    margin: 0 0 0.5rem;
}

.eh-section-sub {
    color: var(--escrow-muted, #6b7280);
    max-width: 480px;
    margin: 0 auto 3rem;
}

.eh-steps-grid {
    max-width: 980px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.75rem;
}

.eh-step {
    background: #fff;
    border-radius: 18px;
    padding: 2.25rem 1.75rem;
    box-shadow: 0 1px 3px rgba(16, 24, 20, 0.05), 0 8px 24px rgba(16, 24, 20, 0.04);
    text-align: left;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.eh-step:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 8px rgba(16, 24, 20, 0.06), 0 16px 36px rgba(16, 24, 20, 0.08);
}

.eh-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--escrow-green);
    color: #fff;
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 1.25rem;
}

.eh-step h3 {
    margin: 0 0 0.5rem;
    font-size: 1.15rem;
}

.eh-step p {
    color: var(--escrow-muted, #6b7280);
    margin: 0;
    line-height: 1.6;
}

/* CTA band */
.eh-cta-band {
    background: var(--escrow-ink);
    text-align: center;
}

.eh-cta-band h2 {
    color: #fff !important;
    font-size: clamp(1.75rem, 4vw, 2.5rem) !important;
    margin: 0 0 0.5rem;
}

.eh-cta-band p {
    color: rgba(255, 255, 255, 0.75);
    margin: 0 0 2rem;
}

.eh-cta-on-dark {
    background: var(--escrow-green) !important;
    color: #fff !important;
}

.eh-cta-on-dark:hover {
    background: #1d6b4d !important;
}

@media (max-width: 600px) {
    .escrow-home section {
        padding: 3.5rem 1.25rem;
    }
    .eh-hero {
        padding: 4rem 1.25rem !important;
    }
}

.eh-credit {
    text-align: center;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    background: var(--escrow-ink, #12151a);
    padding: 0.9rem 1rem;
    letter-spacing: 0.01em;
}

/* The User Registration plugin's built-in "Register now" link on the login
   form points at a page setting that's broken (an internal plugin
   validation issue, not something we can fix via its own settings screen).
   A working manual link was added directly on the page instead, so this
   broken one is just hidden rather than left as a dead end for visitors. */
.user-registration-register[data-field="registration-setting"] {
    display: none !important;
}

/* ==========================================================================
   Login / Sign-up pages
   ========================================================================== */

body.eh-auth-page,
body.eh-auth-page .site-content,
body.eh-auth-page #content {
    background: linear-gradient(180deg, var(--escrow-green-light, #e8f2ed) 0%, #f5f6f8 420px, #f5f6f8 100%) !important;
}

body.eh-auth-page .entry-content {
    max-width: 480px;
    margin: 3rem auto !important;
    padding: 0 1.25rem;
}

.eh-auth-banner {
    position: relative;
    background: linear-gradient(160deg, var(--escrow-green) 0%, var(--escrow-green-dark) 100%);
    border-radius: 20px;
    padding: 2.5rem 2rem;
    text-align: center;
    margin: 0 0 1.5rem;
    overflow: hidden;
}

.eh-auth-banner-bg {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 15% 20%, rgba(255, 255, 255, 0.08) 0, rgba(255, 255, 255, 0.08) 2px, transparent 2px),
        radial-gradient(circle at 85% 80%, rgba(255, 255, 255, 0.06) 0%, transparent 45%);
    background-size: 28px 28px, 100% 100%;
    pointer-events: none;
}

.eh-auth-banner-inner {
    position: relative;
}

.eh-auth-eyebrow {
    color: rgba(255, 255, 255, 0.8);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.72rem;
    font-weight: 700;
    margin: 0 0 0.6rem;
}

.eh-auth-banner h2 {
    color: #fff !important;
    font-size: clamp(1.5rem, 4vw, 1.9rem) !important;
    margin: 0 0 0.5rem !important;
}

.eh-auth-sub {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.95rem;
    max-width: 380px;
    margin: 0 auto;
}

/* User Registration plugin's form wrapper, given a real card treatment
   instead of sitting bare on the page background. */
body.eh-auth-page #user-registration {
    background: #fff;
    border-radius: 20px;
    padding: 2rem;
    box-shadow: 0 1px 2px rgba(16, 24, 20, 0.04), 0 16px 40px rgba(16, 24, 20, 0.06);
}

body.eh-auth-page .ur-form-grid label {
    font-weight: 600;
    color: var(--escrow-ink);
    font-size: 0.9rem;
}

body.eh-auth-page .user-registration-Button.button,
body.eh-auth-page button[name="login"],
body.eh-auth-page button[name="register"] {
    width: 100%;
    padding: 0.85rem !important;
    font-size: 1rem !important;
    border-radius: 10px !important;
}

body.eh-auth-page .user-registration-LostPassword a,
body.eh-auth-page p.wp-block-paragraph a {
    font-weight: 600;
}

body.eh-auth-page p.wp-block-paragraph {
    text-align: center;
    margin-top: 1.5rem;
}

@media (max-width: 600px) {
    body.eh-auth-page .entry-content {
        margin: 1.5rem auto !important;
    }
    .eh-auth-banner {
        padding: 2rem 1.5rem;
    }
}