/* ============================================================
   ALL ISLAND RESTORATION - REDESIGN FOUNDATION
   ------------------------------------------------------------
   Design tokens, fonts, and base styles for the new dark theme.
   This file establishes the visual foundation that all other
   redesign CSS files build upon.

   Loaded via functions.php
   Do NOT add component-specific styles here.
============================================================ */

/* ---- Google Fonts ---- */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;600;700;800;900&family=Barlow:wght@300;400;500;600;700&display=swap');

/* ---- Design Tokens (CSS Variables) ---- */
:root {
  /* Dark palette */
  --air-black:    #0a0c0f;
  --air-black-2:  #111418;
  --air-black-3:  #181c22;
  --air-black-4:  #22272f;

  /* Blue accents */
  --air-blue:     #4a9fd4;
  --air-blue-dk:  #2d7fb5;
  --air-blue-lt:  #6db8e8;
  --air-blue-glow: rgba(74, 159, 212, 0.18);

  /* Neutrals */
  --air-white:    #ffffff;
  --air-gray:     #7a8fa8;
  --air-gray-lt:  #b8cad8;

  /* Typography */
  --air-font-body:    'Barlow', sans-serif;
  --air-font-display: 'Barlow Condensed', sans-serif;

  /* Spacing scale (optional, use as needed) */
  --air-space-xs: 0.5rem;
  --air-space-sm: 1rem;
  --air-space-md: 1.5rem;
  --air-space-lg: 2.5rem;
  --air-space-xl: 4rem;
}

/* ---- Body & global typography (scoped to .redesign class) ----
   We use a class scope so this only applies to pages/sections
   we've marked as "redesigned" — prevents accidental sitewide
   breakage during the rebuild.
   To apply: add class="redesign" to the body via Betheme settings
   OR add it to specific page wrappers.
============================================================ */

body.redesign,
.redesign-section {
  font-family: var(--air-font-body);
  color: var(--air-white);
  background: var(--air-black);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.redesign h1,
body.redesign h2,
body.redesign h3,
body.redesign h4,
body.redesign h5,
body.redesign h6,
.redesign-section h1,
.redesign-section h2,
.redesign-section h3,
.redesign-section h4,
.redesign-section h5,
.redesign-section h6 {
  font-family: var(--air-font-display);
  color: var(--air-white);
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1.1;
}

body.redesign a,
.redesign-section a {
  color: var(--air-blue);
  text-decoration: none;
  transition: color 0.2s ease;
}

body.redesign a:hover,
.redesign-section a:hover {
  color: var(--air-blue-lt);
}

/* ---- Utility helpers (use sparingly) ---- */
.redesign-bg-black  { background: var(--air-black) !important; }
.redesign-bg-black2 { background: var(--air-black-2) !important; }
.redesign-text-blue { color: var(--air-blue) !important; }
.redesign-text-white { color: var(--air-white) !important; }

/* ---- End of foundation ---- */

/* ============================================================
   GET IMMEDIATE HELP BOX — global override
   ------------------------------------------------------------
   The `body.redesign a { color: var(--air-blue) }` rule above
   turns every link brand-blue — which makes the links INSIDE the
   blue .get-help-box invisible. Force them white wherever the box
   appears (sidebar, widgets, any page).
============================================================ */
body.redesign .get-help-box h3,
body.redesign .get-help-box li,
body.redesign .get-help-box a,
body.redesign .get-help-box a:link,
body.redesign .get-help-box a:visited {
  color: var(--air-white) !important;
}

body.redesign .get-help-box a:hover {
  color: #06121c !important;   /* dark on hover — readable on blue */
}

/* keep the icon circles white with blue glyphs */
body.redesign .get-help-box i {
  background: var(--air-white) !important;
  color: #3c88cc !important;
}

/* ---- End of foundation ---- */

/* ============================================================
   CONTAINER WIDTH — global
   ------------------------------------------------------------
   Betheme caps #Wrapper at 1240px (see its dynamic CSS), while
   the homepage sections were custom-set to 1500px. That mismatch
   leaves dead black space on the right of sidebar pages, forms,
   and the Get Help box (which squeezed "Service Request" onto
   two lines). Lift the cap so every page uses the same width.
============================================================ */
@media only screen and (min-width: 1240px) {
  body.redesign #Wrapper,
  body.redesign .with_aside .content_wrapper {
    max-width: 1700px !important;
  }
  body.redesign .section_wrapper,
  body.redesign .container {
    max-width: 1680px !important;
  }
}

/* ============================================================
   GET HELP BOX — let it fill the sidebar, no text wrapping
   ------------------------------------------------------------
   The theme caps these contact boxes narrow (max-width:180px on
   .contact-info), which forced "Service Request" onto a second
   line. Let the box use the full sidebar width and keep each
   link on one line beside its icon.
============================================================ */
body.redesign .get-help-box,
body.redesign .custom-html-widget .contact-info {
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

body.redesign .get-help-box ul,
body.redesign .custom-html-widget .contact-info {
  list-style: none !important;
  margin: 0 !important;
  padding-left: 0 !important;
}

body.redesign .get-help-box li a,
body.redesign .custom-html-widget .contact-info li a {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

/* Keep each link on ONE line on desktop only. On phones we let it
   wrap naturally so a long label can never overflow the screen. */
@media only screen and (min-width: 768px) {
  body.redesign .get-help-box li a,
  body.redesign .custom-html-widget .contact-info li a {
    white-space: nowrap !important;
  }
}

/* ---- End of foundation ---- */