/* Ondigi Waweru — 3D Mosaic Glassmorphism Design System */

:root {
    --ow-navy: #0B1F3A;
    --ow-navy-dark: #071525;
    --ow-navy-mid: #132B4A;
    --ow-gold: #C9A227;
    --ow-gold-light: #E8C547;
    --ow-gold-dark: #9A7B1A;
    --ow-white: #FFFFFF;
    --ow-gray-50: #F4F6FA;
    --ow-gray-100: #E8EDF4;
    --ow-gray-600: #5A6472;
    --ow-glass: rgba(255, 255, 255, 0.08);
    --ow-glass-border: rgba(201, 162, 39, 0.28);
    --ow-shadow-gold: 0 12px 40px rgba(201, 162, 39, 0.22);
    --ow-shadow-navy: 0 24px 60px rgba(7, 21, 37, 0.4);
    --ow-perspective: 1200px;
}

body.ow-brand {
    font-family: 'Lato', 'Inter', sans-serif;
    color: var(--ow-navy-dark);
    background: var(--ow-gray-50);
}

.ow-serif { font-family: 'Playfair Display', Georgia, serif; }

/* ── Gradients ── */
.ow-gold-gradient {
    background: linear-gradient(135deg, var(--ow-gold-light) 0%, var(--ow-gold) 50%, var(--ow-gold-dark) 100%);
}
.ow-navy-gradient {
    background: linear-gradient(145deg, var(--ow-navy-mid) 0%, var(--ow-navy) 50%, var(--ow-navy-dark) 100%);
}

/* ── Glassmorphism ── */
.ow-glass {
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.55);
    box-shadow: 0 8px 32px rgba(11, 31, 58, 0.08);
}
.ow-glass-dark {
    background: rgba(7, 21, 37, 0.65);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    border: 1px solid var(--ow-glass-border);
    box-shadow: var(--ow-shadow-navy);
}
.ow-glass-gold {
    background: linear-gradient(135deg, rgba(232,197,71,0.15), rgba(201,162,39,0.08));
    backdrop-filter: blur(12px);
    border: 1px solid rgba(201, 162, 39, 0.35);
}

/* ── 3D Cards ── */
.ow-card-3d {
    background: var(--ow-white);
    border: 1px solid rgba(201, 162, 39, 0.15);
    border-radius: 1.25rem;
    box-shadow: 0 2px 4px rgba(11,31,58,0.04), 0 16px 40px rgba(11,31,58,0.09);
    transform-style: preserve-3d;
    transition: transform 0.35s cubic-bezier(.22,1,.36,1), box-shadow 0.35s ease;
}
.ow-card-3d:hover {
    transform: translateY(-8px) rotateX(2deg);
    box-shadow: 0 4px 8px rgba(11,31,58,0.06), 0 28px 56px rgba(11,31,58,0.14);
}
.ow-tilt-3d {
    transform: perspective(var(--ow-perspective)) rotateY(-4deg) rotateX(3deg);
    transition: transform 0.5s ease;
}
.ow-tilt-3d:hover { transform: perspective(var(--ow-perspective)) rotateY(0deg) rotateX(0deg); }

/* ── Mosaic Grid ── */
.ow-mosaic {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: minmax(120px, auto);
}
.ow-mosaic > .span-12 { grid-column: span 12; }
.ow-mosaic > .span-8  { grid-column: span 8; }
.ow-mosaic > .span-7  { grid-column: span 7; }
.ow-mosaic > .span-6  { grid-column: span 6; }
.ow-mosaic > .span-5  { grid-column: span 5; }
.ow-mosaic > .span-4  { grid-column: span 4; }
.ow-mosaic > .span-3  { grid-column: span 3; }
.ow-mosaic > .row-2   { grid-row: span 2; }
.ow-mosaic > .row-3   { grid-row: span 3; }

@media (max-width: 1024px) {
    .ow-mosaic > .span-8, .ow-mosaic > .span-7, .ow-mosaic > .span-6,
    .ow-mosaic > .span-5, .ow-mosaic > .span-4, .ow-mosaic > .span-3 { grid-column: span 6; }
}
@media (max-width: 640px) {
    .ow-mosaic { grid-template-columns: 1fr; }
    .ow-mosaic > * { grid-column: span 1 !important; grid-row: span 1 !important; }
}

/* ── Buttons ── */
.ow-btn-gold {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0.9rem 1.85rem; border-radius: 0.625rem;
    font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.75rem;
    color: var(--ow-navy-dark);
    background: linear-gradient(180deg, var(--ow-gold-light) 0%, var(--ow-gold) 55%, var(--ow-gold-dark) 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), var(--ow-shadow-gold);
    border: 1px solid rgba(154,123,26,0.4);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.ow-btn-gold:hover { transform: translateY(-3px) scale(1.02); box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 16px 40px rgba(201,162,39,0.35); }
.ow-btn-outline {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0.9rem 1.85rem; border-radius: 0.625rem;
    font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.75rem;
    color: var(--ow-white); border: 2px solid rgba(255,255,255,0.7);
    background: rgba(255,255,255,0.06); backdrop-filter: blur(8px);
    transition: all 0.25s ease;
}
.ow-btn-outline:hover { background: rgba(255,255,255,0.14); border-color: var(--ow-gold-light); }

/* ── Hero ── */
.ow-hero { position: relative; min-height: 92vh; overflow: hidden; }
.ow-hero-bg {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    transform: scale(1.05);
    animation: owKenBurns 20s ease-in-out infinite alternate;
}
.ow-hero-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(125deg, rgba(7,21,37,0.94) 0%, rgba(11,31,58,0.82) 40%, rgba(11,31,58,0.5) 100%);
}
.ow-hero-mesh {
    position: absolute; inset: 0; opacity: 0.35;
    background-image:
        radial-gradient(circle at 20% 30%, rgba(201,162,39,0.25) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(30,58,138,0.3) 0%, transparent 50%);
}

/* ── Section utilities ── */
.ow-section { padding: 5rem 0; position: relative; }
.ow-section-label {
    color: var(--ow-gold); font-size: 0.75rem; font-weight: 700;
    letter-spacing: 0.2em; text-transform: uppercase;
}
.ow-divider-gold {
    height: 2px; width: 4rem;
    background: linear-gradient(90deg, transparent, var(--ow-gold), transparent);
}
.ow-emblem-3d {
    filter: drop-shadow(0 20px 35px rgba(0,0,0,0.5)) drop-shadow(0 6px 12px rgba(201,162,39,0.3));
}

/* ── Header / Footer ── */
.ow-header-glass {
    background: rgba(7,21,37,0.9);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--ow-glass-border);
    box-shadow: 0 8px 32px rgba(0,0,0,0.25);
}
.ow-nav-link {
    color: rgba(255,255,255,0.88); font-size: 0.75rem; font-weight: 600;
    letter-spacing: 0.1em; text-transform: uppercase; transition: color 0.2s;
}
.ow-nav-link:hover, .ow-nav-link.active { color: var(--ow-gold-light); }
.ow-footer { background: linear-gradient(180deg, var(--ow-navy) 0%, var(--ow-navy-dark) 100%); color: rgba(255,255,255,0.82); }
.ow-quick-bar { background: linear-gradient(180deg, var(--ow-navy) 0%, var(--ow-navy-dark) 100%); box-shadow: var(--ow-shadow-navy); }
.ow-icon-badge {
    width: 3.5rem; height: 3.5rem; border-radius: 9999px;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--ow-gold); border: 1px solid rgba(201,162,39,0.35);
    background: linear-gradient(145deg, rgba(201,162,39,0.18), rgba(11,31,58,0.08));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.15);
}
.ow-value-card {
    background: rgba(255,255,255,0.05); border: 1px solid var(--ow-glass-border);
    border-radius: 1.25rem; padding: 1.5rem; backdrop-filter: blur(8px);
}
.ow-cta-banner {
    background: linear-gradient(135deg, var(--ow-gold-light) 0%, var(--ow-gold) 50%, var(--ow-gold-dark) 100%);
    box-shadow: var(--ow-shadow-gold);
}
.ow-mosaic-tile {
    border-radius: 1.25rem; overflow: hidden; position: relative;
    min-height: 200px;
}
.ow-mosaic-tile img { width: 100%; height: 100%; object-fit: cover; }
.ow-mosaic-tile .overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(7,21,37,0.9) 0%, transparent 60%);
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: 1.5rem;
}

/* ── Animations ── */
@keyframes owKenBurns { from { transform: scale(1.05); } to { transform: scale(1.12); } }
@keyframes owFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes owShimmer { 0% { background-position: -200% center; } 100% { background-position: 200% center; } }
.ow-float { animation: owFloat 6s ease-in-out infinite; }
.ow-shimmer-gold {
    background: linear-gradient(90deg, var(--ow-gold-dark), var(--ow-gold-light), var(--ow-gold-dark));
    background-size: 200% auto;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: owShimmer 4s linear infinite;
}

.ow-text-gold { color: var(--ow-gold); }
.ow-text-navy { color: var(--ow-navy); }
.ow-perspective-wrap { perspective: var(--ow-perspective); }

/* Fix readable text on light cards/sections */
body.ow-brand .ow-card-3d p,
body.ow-brand .ow-card-3d li,
body.ow-brand .ow-card-3d span,
body.ow-brand .ow-glass p,
body.ow-brand .ow-glass li,
body.ow-brand .ow-glass span {
    color: #111827 !important;
}

/* Preserve dark sections */
body.ow-brand .ow-hero *,
body.ow-brand .ow-navy-gradient *,
body.ow-brand .ow-glass-dark *,
body.ow-brand .ow-footer *,
body.ow-brand footer * {
    color: #111827 !important;
}

/* Preserve gold accents */
body.ow-brand .ow-text-gold,
body.ow-brand .ow-section-label {
    color: #C9A227 !important;
}

/* Hero section must stay white on dark background */
body.ow-brand .ow-hero,
body.ow-brand .ow-hero h1,
body.ow-brand .ow-hero h2,
body.ow-brand .ow-hero h3,
body.ow-brand .ow-hero p,
body.ow-brand .ow-hero span,
body.ow-brand .ow-hero div {
    color: #ffffff !important;
}

/* Hero softer paragraph text */
body.ow-brand .ow-hero p {
    color: rgba(255,255,255,.82) !important;
}

/* Keep gold labels in hero */
body.ow-brand .ow-hero .ow-section-label,
body.ow-brand .ow-hero .ow-text-gold {
    color: #C9A227 !important;
}

.ow-btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.9rem 1.85rem;
    border-radius: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 0.75rem;

    color: #ffffff !important;
    border: 2px solid #ffffff;
    background: transparent;

    transition: all 0.25s ease;
}

.ow-btn-outline:hover {
    color: #ffffff !important;
    background: rgba(255,255,255,0.15);
    border-color: #ffffff;
}

/* Hover state */
.ow-btn-outline:hover,
.bg-\[var\(--ow-navy-dark\)\]:hover,
.bg-\[var\(--ow-navy\)\]:hover {
    color: #ffffff !important;
}

/* Login page visibility fix */
body.ow-brand form,
body.ow-brand form label,
body.ow-brand form p,
body.ow-brand form span,
body.ow-brand form div {
    color: #111827 !important;
}

body.ow-brand form a {
    color: #0B1F3A !important;
    font-weight: 700;
}

body.ow-brand form button,
body.ow-brand form button *,
body.ow-brand form [type="submit"],
body.ow-brand form [type="submit"] * {
    color: #ffffff !important;
}

/* Input text */
body.ow-brand input,
body.ow-brand textarea,
body.ow-brand select {
    color: #111827 !important;
    background: #ffffff !important;
}

/* DARK buttons = WHITE text */
.ow-btn-outline,
.ow-btn-outline *,
.ow-header-glass .ow-btn-outline,
.bg-\[var\(--ow-navy-dark\)\],
.bg-\[var\(--ow-navy-dark\)\] *,
.bg-\[var\(--ow-navy\)\],
.bg-\[var\(--ow-navy\)\] *,
.ow-navy-gradient .ow-btn-outline,
.ow-hero a,
.ow-hero button {
    color: #ffffff !important;
}

/* GOLD buttons = DARK text */
.ow-btn-gold,
.ow-btn-gold * {
    color: #071525 !important;
}

/* WHITE/LIGHT buttons = DARK text */
.bg-white,
.bg-white *,
.bg-gray-50,
.bg-gray-50 *,
.bg-gray-100,
.bg-gray-100 * {
    color: #111827 !important;
}

/* Final override: dark areas must have white button text */
body.ow-brand .ow-header-glass a,
body.ow-brand .ow-header-glass button,
body.ow-brand .ow-header-glass a *,
body.ow-brand .ow-header-glass button *,
body.ow-brand .ow-hero a,
body.ow-brand .ow-hero button,
body.ow-brand .ow-hero a *,
body.ow-brand .ow-hero button *,
body.ow-brand .ow-navy-gradient a,
body.ow-brand .ow-navy-gradient button,
body.ow-brand .ow-navy-gradient a *,
body.ow-brand .ow-navy-gradient button *,
body.ow-brand .ow-glass-dark a,
body.ow-brand .ow-glass-dark button,
body.ow-brand .ow-glass-dark a *,
body.ow-brand .ow-glass-dark button * {
    color: #ffffff !important;
}

/* Gold buttons should remain dark even inside dark sections */
body.ow-brand .ow-btn-gold,
body.ow-brand .ow-btn-gold * {
    color: #071525 !important;
}