/* ==========================================================================
   Tower Rush — home page styles (ported from Figma Make)
   The sections keep the original inline styling; this file provides the
   small Tailwind-utility subset the markup relies on, plus the interactive
   bits (sticky header, mobile menu, FAQ accordion, hover states).
   ========================================================================== */

:root {
    --tr-bg: #EEF6FF;
    --tr-bg-2: #FFFFFF;
    --tr-bg-3: #E3EFF9;
    --tr-primary: #1A5FA8;
    --tr-accent: #E8834E;
    --tr-blue: #2E86C9;
    --tr-green: #1A9E6A;
    --tr-muted: #4A6585;
    --tr-fg: #0D2240;
}

/* Smooth anchor scrolling — offset keeps targets clear of the sticky header */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px;
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

/* Base ------------------------------------------------------------------- */
body.home,
.tr-page {
    margin: 0;
    background: var(--tr-bg);
    color: var(--tr-fg);
    font-family: 'Barlow', sans-serif;
}

.tr-page *,
.tr-page *::before,
.tr-page *::after {
    box-sizing: border-box;
}

.tr-page img { max-width: 100%; display: block; }
.tr-page a { text-decoration: none; }
.tr-page button { font-family: inherit; border: none; }
.tr-page h1, .tr-page h2, .tr-page h3, .tr-page p, .tr-page ul { margin: 0; }
.tr-page ul { padding: 0; list-style: none; }

/* Layout utilities ------------------------------------------------------- */
.mx-auto { margin-left: auto; margin-right: auto; }
.max-w-6xl { max-width: 72rem; }
.max-w-4xl { max-width: 56rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.py-12 { padding-top: 3rem; padding-bottom: 3rem; }
.py-14 { padding-top: 3.5rem; padding-bottom: 3.5rem; }
.py-16 { padding-top: 4rem; padding-bottom: 4rem; }

.flex { display: flex; }
.grid { display: grid; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.h-16 { height: 4rem; }

.gap-4 { gap: 1rem; }
.gap-5 { gap: 1.25rem; }
.gap-12 { gap: 3rem; }
.gap-16 { gap: 4rem; }

.relative { position: relative; }
.overflow-hidden { overflow: hidden; }
.sticky { position: sticky; }
.top-0 { top: 0; }
.z-10 { z-index: 10; }
.z-50 { z-index: 50; }

/* Responsive (md = 768px) ----------------------------------------------- */
.hidden { display: none; }

@media (min-width: 768px) {
    .md\:flex { display: flex; }
    .md\:hidden { display: none; }
    .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .md\:py-24 { padding-top: 6rem; padding-bottom: 6rem; }
}

/* Hover states ----------------------------------------------------------- */
.hover\:text-yellow-300:hover { color: #1A5FA8 !important; }
.hover\:opacity-90:hover { opacity: 0.9; }
.hover\:border-yellow-400:hover { border-color: #1A5FA8 !important; }
.hover\:-translate-y-1 { transition: transform 0.2s, box-shadow 0.2s; }
.hover\:-translate-y-1:hover { transform: translateY(-0.25rem); }
.hover\:shadow-xl:hover { box-shadow: 0 20px 25px -5px rgba(26,95,168,0.16), 0 8px 10px -6px rgba(26,95,168,0.12); }

/* Header / footer extras ------------------------------------------------- */
.inline-flex { display: inline-flex; }
.justify-center { justify-content: center; }
.flex-nowrap { flex-wrap: nowrap; }
.flex-wrap { flex-wrap: wrap; }
.shrink-0 { flex-shrink: 0; }
.w-auto { width: auto; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-7 { gap: 1.75rem; }
.gap-x-7 { column-gap: 1.75rem; }
.gap-y-3 { row-gap: 0.75rem; }
.gap-10 { gap: 2.5rem; }
.text-center { text-align: center; }
.h-5 { height: 1.25rem; }
.h-6 { height: 1.5rem; }
.h-7 { height: 1.75rem; }
.h-9 { height: 2.25rem; }
.h-11 { height: 2.75rem; }

@media (min-width: 768px) {
    .md\:inline-flex { display: inline-flex; }
    .md\:gap-10 { gap: 2.5rem; }
    .md\:h-6 { height: 1.5rem; }
    .md\:h-9 { height: 2.25rem; }
    .md\:h-11 { height: 2.75rem; }
}

/* Nav links (wp_nav_menu flat output) ------------------------------------ */
.tr-nav-desktop,
.tr-nav-mobile,
.tr-nav-footer,
.tr-nav-legal { font-family: 'Barlow', sans-serif; text-decoration: none; transition: color 0.2s; }

.tr-nav-desktop { color: #4A6585; font-size: 14px; font-weight: 500; letter-spacing: 0.02em; }
.tr-nav-mobile  { color: #4A6585; font-size: 15px; }
.tr-nav-footer  { color: #A8C8E8; font-size: 15px; font-weight: 600; }
.tr-nav-legal   { color: rgba(168,200,232,0.7); font-size: 13px; font-weight: 500; }

/* Header nav sits on white → blue on hover */
.tr-nav-desktop:hover,
.tr-nav-mobile:hover { color: #1A5FA8; }

/* Footer nav sits on the blue panel → white on hover */
.tr-nav-footer:hover,
.tr-nav-legal:hover { color: #FFFFFF; }

.tr-nav-footer.is-current { color: #FFFFFF; }

/* Footer menu — stacked column on mobile, inline row on desktop */
.tr-footer-nav { flex-direction: column; }
@media (min-width: 768px) {
    .tr-footer-nav { flex-direction: row; }
}

/* FAQ accordion ---------------------------------------------------------- */
.tr-faq-item .tr-faq-answer {
    display: none;
    padding: 0 20px 18px;
    font-family: 'Barlow', sans-serif;
    font-size: 14px;
    color: var(--tr-muted);
    line-height: 1.7;
}
.tr-faq-item.is-open .tr-faq-answer { display: block; }
.tr-faq-item.is-open { border-color: rgba(26, 95, 168, 0.35) !important; }
.tr-faq-item.is-open .tr-faq-chevron { transform: rotate(180deg); }

/* Burger — visible only on mobile (own selector, immune to inline display) */
.tr-burger { display: inline-flex; align-items: center; }
@media (min-width: 768px) {
    .tr-burger { display: none; }
}

/* Mobile menu ------------------------------------------------------------ */
.tr-mobile-menu { display: none; }
.tr-mobile-menu.is-open { display: flex; }
@media (min-width: 768px) {
    .tr-mobile-menu,
    .tr-mobile-menu.is-open { display: none; }
}