/*
  True North Home Services - Shared Styles
  ---------------------------------------
  This file contains site-wide custom styles that sit on top of Tailwind CSS.
  Edit colors, spacing helpers, and reusable visual patterns here.
*/

/* ============================================================
   COLOR TOKENS — single source of truth for the entire site.
   Change a value here to repaint every component that uses it.
   ============================================================

   BRAND PALETTE  (derived from business card)
   --tn-navy          Deep navy       #001C40   hero, footer, nav, dark bgs
   --tn-blue          Cobalt blue     #04399D   gradient mid, section accents
   --tn-sky           Sky blue        #1D63D3   gradient end, link hover, highlights
   --tn-bronze        Bronze/gold     #AE9359   CTAs, bullets, highlights, avatar ring
   --tn-bronze-hover  Bronze lighter  #C4A96A   button hover/focus state
   --tn-bg            Off-white       #F0F2F5   page bg, card field, map placeholder

   NEUTRAL / UI SUPPORT
   --tn-white         Pure white      #FFFFFF   card bg, button text/border on dark
   --tn-text          Body text       #1F2937   paragraph text (Tailwind gray-800)
   --tn-text-dark     Near-black      #111827   headings on light, btn label (gray-900)
   --tn-slate         Slate gray      #4B5563   secondary text, meta, captions (gray-600)
   --tn-border        Subtle border   #E5E7EB   card edges, dividers (gray-200)
   --tn-border-muted  Muted border    #94A3B8   dashed map/placeholder border (slate-400)

   SHADOW TOKENS  (navy-tinted for brand cohesion)
   --tn-shadow-sm     Subtle          4px  12px  0.07 opacity
   --tn-shadow-md     Card            8px  24px  0.10 opacity  → .tn-card
   --tn-shadow-lg     Elevated        10px 20px  0.18 opacity  → .tn-avatar
   --tn-shadow-xl     Lightbox img    30px 70px  0.50 opacity  → .tn-lightbox img
   --tn-lightbox-bg   Overlay         rgba(0, 8, 28, 0.88)    → .tn-lightbox
   ============================================================ */

:root {
  /* Brand palette */
  --tn-navy:         #0a243f;
  --tn-blue:         #1b499e;
  --tn-sky:          #3070d6;
  --tn-bronze:       #be8e20;
  --tn-bronze-hover: #ceaa56;
  --tn-bg:           #f0f2f5;

  /* Neutral / UI support */
  --tn-white:        #f6f2ef;
  --tn-text:         #1f2937;
  --tn-text-dark:    #111827;
  --tn-slate:        #4b5563;
  --tn-border:       #e5e7eb;
  --tn-border-muted: #94a3b8;

  /* Shadow tokens */
  --tn-shadow-sm:    0 4px 12px  rgba(0, 28, 64, 0.07);
  --tn-shadow-md:    0 8px 24px  rgba(0, 28, 64, 0.10);
  --tn-shadow-lg:    0 10px 20px rgba(0, 28, 64, 0.18);
  --tn-shadow-xl:    0 30px 70px rgba(0,  0,  0, 0.50);
  --tn-lightbox-bg:  rgba(0, 8, 28, 0.88);

  /* Legacy aliases — kept so any existing HTML referencing these still works */
  --tn-teal:  var(--tn-blue);
  --tn-amber: var(--tn-bronze);
}

/* ============================================================
   BASE
   ============================================================ */

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Inter", sans-serif;
  color: var(--tn-text);
  background-color: var(--tn-white);
}

/* ============================================================
   NAVIGATION / HEADER / FOOTER
   ============================================================ */

/* Shared dark background used on header and footer */
.tn-nav {
  background-color: var(--tn-navy);
  color: var(--tn-white);
}

/* Slightly deeper tone for dropdown panels and mobile menu */
.tn-nav-dropdown {
  background-color: #001226;
  color: var(--tn-white);
}

/* Logo tagline and any bronze accent text in the nav */
.tn-tagline {
  color: var(--tn-bronze);
}

/* Default nav link — white text, bronze on hover */
.tn-nav-link {
  color: var(--tn-white);
  text-decoration: none;
  transition: color 0.15s ease-in-out;
}
.tn-nav-link:hover,
.tn-nav-link:focus-visible {
  color: var(--tn-bronze);
}

/* Active / current-page nav link */
.tn-nav-link-active {
  color: var(--tn-bronze);
}

/* Indented sub-links in mobile menu */
.tn-nav-link-sub {
  color: #cbd5e1;
  text-decoration: none;
  transition: color 0.15s ease-in-out;
}
.tn-nav-link-sub:hover,
.tn-nav-link-sub:focus-visible {
  color: var(--tn-bronze);
}

/* "Services" category label in mobile menu */
.tn-nav-section-label {
  color: #94a3b8;
}

/* Footer body links (phone, email) */
.tn-footer-link {
  color: inherit;
  text-decoration: none;
  transition: color 0.15s ease-in-out;
}
.tn-footer-link:hover,
.tn-footer-link:focus-visible {
  color: var(--tn-bronze);
}

/* Footer copyright / meta line */
.tn-footer-meta {
  color: #94a3b8;
}

/* ============================================================
   GRADIENTS
   ============================================================ */

/* Used on hero sections / nav backgrounds */
.tn-gradient {
  background: linear-gradient(135deg, var(--tn-navy), var(--tn-blue));
}

/* Used on interior page heroes — wider sweep, sky accent at far end */
.tn-page-hero {
  background: linear-gradient(160deg, var(--tn-navy) 0%, var(--tn-blue) 70%, var(--tn-sky) 100%);
}

/* ============================================================
   BUTTONS
   ============================================================ */

.tn-btn-primary {
  display: inline-block;
  border-radius: 0.5rem;
  background-color: var(--tn-bronze);
  color: var(--tn-text-dark);
  font-weight: 700;
  text-decoration: none;
  padding: 0.75rem 1.25rem;
  transition: all 0.2s ease-in-out;
}

.tn-btn-primary:hover,
.tn-btn-primary:focus-visible {
  background-color: var(--tn-bronze-hover);
  transform: translateY(-1px);
}

.tn-btn-secondary {
  display: inline-block;
  border-radius: 0.5rem;
  border: 2px solid var(--tn-white);
  color: var(--tn-white);
  font-weight: 600;
  text-decoration: none;
  padding: 0.65rem 1.1rem;
  transition: all 0.2s ease-in-out;
}

.tn-btn-secondary:hover,
.tn-btn-secondary:focus-visible {
  background-color: rgba(255, 255, 255, 0.12);
}

/* ============================================================
   SECTION BACKGROUNDS
   ============================================================ */

.tn-section {
  padding: 4rem 0;
}

@media (min-width: 768px) {
  .tn-section {
    padding: 5.5rem 0;
  }
}

/* Alternating section tint using brand off-white */
.tn-section-alt {
  background-color: var(--tn-bg);
}

/* Dark navy section — used for CTA bands */
.tn-section-dark {
  background-color: var(--tn-navy);
  color: var(--tn-white);
}

/* ============================================================
   CARDS
   ============================================================ */

.tn-card {
  border-radius: 0.75rem;
  border: 1px solid var(--tn-border);
  background-color: var(--tn-white);
  box-shadow: var(--tn-shadow-md);
}

.tn-card-image {
  width: 100%;
  height: 12rem;
  object-fit: cover;
  border-top-left-radius: 0.75rem;
  border-top-right-radius: 0.75rem;
}

/* ============================================================
   TYPOGRAPHY HELPERS
   ============================================================ */

/* Heading color on light backgrounds */
.tn-heading {
  color: var(--tn-text-dark);
}

/* Standard body text */
.tn-body {
  color: var(--tn-text);
}

/* Secondary / caption body text */
.tn-body-secondary {
  color: var(--tn-slate);
}

/* Star icon used as decorative inline bullet in headings/lists */
.tn-star-bullet {
  display: inline-block;
  height: 1.1em;
  width: auto;
  margin-right: 0.35em;
  vertical-align: middle;
  flex-shrink: 0;
}

/* Accent color for highlighted text (taglines, pull-quotes) */
.tn-highlight {
  color: var(--tn-bronze);
}

/* ============================================================
   BODY LINKS  (in-page content, cards)
   ============================================================ */

.tn-link {
  color: var(--tn-sky);
  font-weight: 600;
  text-decoration: none;
  transition: color 0.15s ease-in-out;
}
.tn-link:hover,
.tn-link:focus-visible {
  color: var(--tn-blue);
}

/* ============================================================
   SERVICE LIST
   ============================================================ */

.tn-service-list li {
  position: relative;
  padding-left: 1.25rem;
  margin-bottom: 0.5rem;
}

.tn-service-list li::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 9999px;
  background-color: var(--tn-bronze);
  position: absolute;
  left: 0;
  top: 0.55rem;
}

/* ============================================================
   MAP / MEDIA CONTAINERS
   ============================================================ */

.tn-map-placeholder {
  border: 2px dashed var(--tn-border-muted);
  border-radius: 0.75rem;
  background-color: var(--tn-bg);
}

/* Framed image or map container with brand border */
.tn-media-frame {
  border: 1px solid var(--tn-border);
  border-radius: 0.75rem;
  overflow: hidden;
  box-shadow: var(--tn-shadow-sm);
}

/* ============================================================
   AVATAR
   ============================================================ */

.tn-avatar {
  width: 6rem;
  height: 6rem;
  border-radius: 9999px;
  object-fit: cover;
  box-shadow: var(--tn-shadow-lg);
  border: 4px solid var(--tn-bronze);
}

/* ============================================================
   HOURS TABLE
   ============================================================ */

.tn-hours {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.875rem;
}

.tn-hours-row {
  display: flex;
  gap: 0.5rem;
}

.tn-hours-row dt {
  width: 4rem;
  flex-shrink: 0;
  font-weight: 600;
}

/* ============================================================
   TOWN GRID
   ============================================================ */

.tn-town-grid {
  columns: 2;
  column-gap: 1.5rem;
}

.tn-town-grid li {
  break-inside: avoid;
  margin-bottom: 0.25rem;
}

@media (min-width: 640px) {
  .tn-town-grid {
    columns: 3;
  }
}

/* ============================================================
   BEFORE / AFTER BADGES
   ============================================================ */

.tn-badge-before {
  background: rgba(0, 0, 0, 0.60);
  color: var(--tn-white);
}

.tn-badge-after {
  background: var(--tn-bronze);
  color: var(--tn-white);
}

/* ============================================================
   LIGHTBOX
   ============================================================ */

.tn-lightbox {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: var(--tn-lightbox-bg);
}

.tn-lightbox[hidden] {
  display: none;
}

.tn-lightbox img {
  max-width: min(92vw, 1200px);
  max-height: 88vh;
  width: auto;
  height: auto;
  border-radius: 0.75rem;
  box-shadow: var(--tn-shadow-xl);
}

.tn-lightbox-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: rgba(0, 28, 64, 0.70);
  color: var(--tn-white);
  border-radius: 9999px;
  width: 2.5rem;
  height: 2.5rem;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}

/* ============================================================
   BRAND SWATCH CLASSES
   Used in brand-color-swatches.html and the design system page.
   ============================================================ */

.tn-swatch-navy   { background: var(--tn-navy);   color: var(--tn-white); }
.tn-swatch-blue   { background: var(--tn-blue);   color: var(--tn-white); }
.tn-swatch-sky    { background: var(--tn-sky);    color: var(--tn-white); }
.tn-swatch-bronze { background: var(--tn-bronze); color: var(--tn-text-dark); }
.tn-swatch-bg     { background: var(--tn-bg);     color: var(--tn-text-dark); border: 1px solid var(--tn-border); }
.tn-swatch-slate  { background: var(--tn-slate);  color: var(--tn-white); }

/* Legacy swatch aliases */
.tn-swatch-teal   { background: var(--tn-blue);   color: var(--tn-white); }
.tn-swatch-amber  { background: var(--tn-bronze);  color: var(--tn-text-dark); }