/* Shared site-wide styles for DINAKARA AND CO — used by all pages alongside assets/tailwind-config.js */

/* Footer color system — single source of truth. Change these three values to re-theme every
   page's footer at once; nothing in the individual HTML pages needs to be touched. */
:root {
    --footer-bg: #6b7280;
    --footer-text: #ffffff;
    --footer-accent: #C5A059;
}

/* Applies to every <footer> on every page, overriding whatever Tailwind utility classes (e.g.
   bg-slate-gray, text-financial-gold) are still present on individual elements — !important is
   needed because the Tailwind CDN script injects its own <style> tag after this stylesheet at
   runtime, so class-based utilities would otherwise win on source order. */
footer {
    background-color: var(--footer-bg) !important;
}
footer * {
    color: var(--footer-text) !important;
}
footer a:hover {
    color: var(--footer-accent) !important;
}
/* Brand title ("DINAKARA AND CO") next to the footer logo — kept as the gold accent so the
   footer isn't all-white; body copy, links, and section headings stay white for readability. */
footer .text-headline-md {
    color: var(--footer-accent) !important;
}
/* Logo keeps its real navy/green brand colors — not recolored like the rest of the footer text. */

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    display: inline-block;
    vertical-align: middle;
}

/* Centers the desktop nav links in the site header. A plain flex `justify-between` with three
   children (logo, nav, CTA button) only equalizes the gaps between them — since the logo and
   CTA are different widths, the nav visually drifts off-center. Taking the nav out of flow and
   centering it against the header row (marked `relative` in the HTML) fixes this regardless of
   how wide the logo or CTA end up being. Applies uniformly since every page's header now shares
   the same structure. */
header nav {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

/* Decorative section backgrounds (used across various pages) */
.tonal-layer {
    background: linear-gradient(135deg, #ffffff 0%, #f7f9fb 100%);
}
.hero-overlay {
    background: linear-gradient(to right, rgba(0, 30, 64, 0.9) 0%, rgba(0, 30, 64, 0.4) 100%);
}
.hero-gradient {
    background: linear-gradient(135deg, #001e40 0%, #003366 100%);
}

/* Card hover interactions */
.bento-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.bento-card:hover {
    transform: translateY(-4px);
}

/* Contact page form + resource cards */
.form-input-focus:focus {
    border-color: #003366;
    box-shadow: 0 0 0 2px rgba(0, 51, 102, 0.1);
    outline: none;
}
.glass-card {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(71, 85, 105, 0.1);
}

/* Mobile-friendly type scale: shrink the large fixed-px headline tokens on small screens.
   !important is required here because the Tailwind CDN script injects its own <style> tag
   at the end of <head> at runtime, after this stylesheet, so it otherwise wins on source order. */
@media (max-width: 640px) {
    .text-display-lg {
        font-size: 36px !important;
    }
    .text-headline-lg {
        font-size: 28px !important;
    }
    .text-headline-md {
        font-size: 26px !important;
    }
    .text-headline-lg-mobile {
        font-size: 28px !important;
    }
}
