/*
 * tnt-base-styles.css
 * TNT | TechNoviceTools | Shared base styles
 * Used by: ALL TNT pages
 *
 * Covers: CSS variables, global reset, navbar, hero (structural only),
 *         shared section typography, footer.
 *
 * Page-specific styles live in:
 *   tnt-home.css   — index.html
 *   tnt-about.css  — aboutUs.html
 */


/* ═══════════════════════════════════════════════════════════════════
   CSS CUSTOM PROPERTIES  (Design Tokens)
   Change a value here and it propagates to every page.
═══════════════════════════════════════════════════════════════════ */
:root {
    --tnt-red:        #D81827;
    --tnt-red-dark:   #A81020;
    --tnt-amber:      #E69F4D;
    --tnt-amber-dark: #C67B20;
    --tnt-dark:       #0a0e1a;
    --tnt-mid:        #141a2e;
    --tnt-light:      #f8f9fa;
    --boogaloo:       'Boogaloo', cursive;
    --inter:          'Inter', sans-serif;
}


/* ═══════════════════════════════════════════════════════════════════
   GLOBAL RESET
═══════════════════════════════════════════════════════════════════ */
* { scroll-behavior: smooth; }

body {
    font-family: var(--inter);
    background: #fff;
    overflow-x: hidden;
}

/* ── Global link style ── */
a {
    color: var(--tnt-amber-dark);
    font-weight: 600;
    text-decoration: none;
    text-underline-offset: 3px;
    transition: color 0.2s;
}
a:hover { color: var(--tnt-red); text-decoration: underline; }


/* ═══════════════════════════════════════════════════════════════════
   NAVBAR  (#mainNav)
   Identical across all TNT pages.
═══════════════════════════════════════════════════════════════════ */
#mainNav {
    background: var(--tnt-dark);
    border-bottom: 3px solid var(--tnt-red);
}

#mainNav .navbar-brand {
    font-family: var(--boogaloo);
    font-size: 1.5rem;
    letter-spacing: 1px;
    color: #fff !important;
}

#mainNav .navbar-brand:hover{
    text-decoration: none;
}

#mainNav .navbar-brand .tnt-t {
    color: var(--tnt-red);
    text-shadow:
        -0.5px -0.5px 0 #fff,
         0.5px -0.5px 0 #fff,
        -0.5px  0.5px 0 #fff,
         0.5px  0.5px 0 #fff;
}

#mainNav .navbar-brand img {
    height: 42px;
    width: auto;
    margin-right: 8px;
    vertical-align: middle;
}

#mainNav .nav-link {
    color: rgba(255,255,255,0.8) !important;
    font-weight: 600;
    font-size: 0.88rem;
    transition: color 0.2s;
    padding: 0.4rem 0.65rem;
}

#mainNav .nav-link:hover,
#mainNav .nav-link.active { color: var(--tnt-amber) !important; }


/* ═══════════════════════════════════════════════════════════════════
   HERO  — shared structural rules
   Background image, min-height, and padding are set per-page in the
   page-specific stylesheet so each hero can have its own photo and scale.
═══════════════════════════════════════════════════════════════════ */
#hero {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* Overline label above the hero title */
.hero-eyebrow {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--tnt-amber);
    margin-bottom: 1rem;
    display: block;
}

/* Shared: font, color, shadow, line-height.
   font-size and margin-bottom vary by page — set in page CSS. */
.hero-title {
    font-family: var(--boogaloo);
    color: #fff;
    text-shadow: 0 2px 12px rgba(0,0,0,0.7);
    line-height: 1.1;
}

/* Shared: color, weight, line-height.
   font-size and margin vary by page — set in page CSS. */
.hero-subtitle {
    color: rgba(255,255,255,0.82);
    font-weight: 300;
    line-height: 1.6;
}


/* ═══════════════════════════════════════════════════════════════════
   SHARED SECTION TYPOGRAPHY
   Used in both light and dark sections across all pages.
═══════════════════════════════════════════════════════════════════ */
.section-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 3.5px;
    text-transform: uppercase;
    color: var(--tnt-red);
    margin-bottom: 0.4rem;
}

.section-title {
    font-family: var(--boogaloo);
    font-size: clamp(1.9rem, 4vw, 2.9rem);
    line-height: 1.15;
}


/* ═══════════════════════════════════════════════════════════════════
   FOOTER
   Identical across all TNT pages.
═══════════════════════════════════════════════════════════════════ */
footer {
    background: var(--tnt-dark);
    padding: 2.25rem 1rem 1.25rem;
    color: rgba(255,255,255,0.55);
}

.footer-icons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.footer-icons a img {
    height: 28px;
    width: auto;
    opacity: 0.55;
    transition: opacity 0.2s;
}

.footer-icons a:hover img { opacity: 1; }

.footer-text {
    font-size: 0.78rem;
    text-align: center;
    margin: 0;
}


/* ═══════════════════════════════════════════════════════════════════
   SHARED BUTTONS
   Reusable across multiple page types.
═══════════════════════════════════════════════════════════════════ */

/* Amber pill button — used for legacy archive links, callout CTAs,
   and any secondary action that isn't destructive or primary-red. */
.btn-legacy {
    display: inline-block;
    background: var(--tnt-amber);
    color: var(--tnt-dark);
    font-family: var(--boogaloo);
    font-size: 1.05rem;
    font-weight: 700;
    padding: 0.6rem 1.6rem;
    border-radius: 50px;
    text-decoration: none;
    transition: background 0.2s, transform 0.15s;
}

.btn-legacy:hover {
    background: var(--tnt-amber-dark);
    color: var(--tnt-dark);
    text-decoration: none;
    transform: translateY(-2px);
}