/* ============================================================
   AttarCo Homes — global brand rules
   Loaded by every page BEFORE its own <style> block, so page-
   specific rules always win. Keep this file to identity-level
   primitives: palette, reset, logo, focus, button identity.
   ============================================================ */

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ---- Brand palette & tokens (canonical values) ---- */
:root {
    --navy:       #0d1f3c;
    --navy-mid:   #152d54;
    --navy-light: #1a3a6b;
    --gold:       #f59e0b;
    --gold-dark:  #d97706;
    --red:        #dc2626;
    --red-dark:   #b91c1c;
    --white:      #ffffff;
    --gray-50:    #f9fafb;
    --gray-100:   #f3f4f6;
    --gray-200:   #e5e7eb;
    --gray-400:   #9ca3af;
    --gray-500:   #6b7280;
    --gray-600:   #4b5563;
    --gray-700:   #374151;
    --gray-800:   #1f2937;
    --shadow-sm:  0 2px 8px rgba(0,0,0,0.08);
    --shadow:     0 4px 24px rgba(0,0,0,0.11);
    --shadow-lg:  0 8px 48px rgba(0,0,0,0.18);
    --radius:     8px;
    --radius-lg:  16px;
}

html { scroll-behavior: smooth; }

/* ---- Logo ---- */
.logo {
    display: flex;
    flex-direction: column;
    line-height: 1;
    text-decoration: none;
}
.logo-name {
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    font-size: 1.35rem;
    color: var(--navy);
}
.logo-name span { color: var(--gold-dark); }
.logo-sub {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--gray-500);
    margin-top: 2px;
    white-space: nowrap; /* "EST. 1985" must never wrap */
}

/* ---- Navigation ---- */
.nav-links a { white-space: nowrap; } /* "Why Us" must never stack */

/* ---- Button identity (structure/padding stays per-page) ---- */
.btn {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    text-decoration: none;
    border: none;
    cursor: pointer;
    border-radius: var(--radius);
    white-space: nowrap;
    text-align: center;
}
.btn-gold { background: var(--gold); color: var(--navy); }
.btn-gold:hover { background: var(--gold-dark); }
.btn-red { background: var(--red); color: var(--white); }
.btn-red:hover { background: var(--red-dark); }
.btn-navy { background: var(--navy); color: var(--white); }
.btn-navy:hover { background: var(--navy-light); }

/* ---- Accessibility ---- */
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 3px; }
:focus:not(:focus-visible) { outline: none; }