/* =========================================================
   Flyover Solutions — Theme Overrides 
   ======================================================= */
:root {
  --flyover-neon:    #E9FF00;
  --flyover-teal:    #00B3B3;
  --flyover-charcoal:#1A1A1A;
  --flyover-grey:    #555555;
  --flyover-cream:   #FAF8F0;
  --flyover-white:   #FFFFFF;
}

/* ========== BASE ========== */
body {
  background: var(--flyover-charcoal);
  color: var(--flyover-white);
}

/* Links */
a,
a:visited {
  color: var(--flyover-teal);
  text-decoration: none;
}
a:hover {
  color: var(--flyover-neon);
}

/* ========== HEADER / HERO ========== */
header,
header#home {
  background: linear-gradient(
    180deg,
    rgba(26, 26, 26, 0.96) 0%,
    rgba(26, 26, 26, 0.88) 100%
  );
  color: var(--flyover-white);
}

header .banner-text h1,
header .banner-text h2,
header .banner-text h3 {
  color: var(--flyover-white);
}

/* CTA button at top */
.button,
.btn,
button,
input[type='submit'] {
  background: var(--flyover-neon);
  color: #000;
  border: none;
  border-radius: 0; /* square */
  padding: 10px 18px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: transform 0.08s ease, filter 0.12s ease;
}

.button:hover,
.btn:hover,
input[type='submit']:hover {
  filter: brightness(0.92);
  transform: translateY(-1px);
}

/* ========== SECTION BACKGROUNDS & CONTRAST ========== */

/* ABOUT: dark background, light text */
#about {
  background: var(--flyover-charcoal) !important;
  color: var(--flyover-white) !important;
  padding-top: 48px;
  padding-bottom: 24px;
}

#about h1,
#about h2,
#about h3,
#about h4,
#about p,
#about li,
#about label {
  color: var(--flyover-white) !important;
}

/* profile picture not circular */
#about .profile-pic {
  border-radius: 0 !important;
  box-shadow: none;
}

/* DIVISIONS / RESUME / PORTFOLIO / CONTACT: light backgrounds, dark text */
#divisions,
#resume,
#portfolio,
#contact {
  background: var(--flyover-cream) !important;
  color: #111 !important;
  padding-top: 48px;
  padding-bottom: 24px;
}

#divisions h1,
#divisions h2,
#divisions h3,
#resume h1,
#resume h2,
#resume h3,
#portfolio h1,
#contact h1 {
  color: var(--flyover-charcoal) !important;
}

/* ========== SECTION TITLES (WORK / SKILLS / DIVISIONS) ========== */
/* Yellow line ONLY under section titles, not under each item */
#resume .header-col h1 span,
#skills .header-col h1 span,
#work .header-col h1 span,
#divisions .header-col h1 span {
  background: none;
  color: var(--flyover-teal);
  border-bottom: 3px solid var(--flyover-neon);
  padding-bottom: 6px;
  font-size: 28px; /* same title size across Work / Skills / Divisions */
}

/* Remove neon lines from item titles (h3) */
#resume .main-col h3::after,
#divisions .division-card h3::after {
  content: none !important;
}

/* ========== RESUME ITEM TITLES (match Divisions card titles) ========== */
#resume .main-col h3 {
  font-size: 22px;
  line-height: 1.25;
  margin: 0 0 8px 0;
  color: var(--flyover-charcoal);
}

/* ========== DIVISIONS LAYOUT (resume-style with grid on the right) ========== */

/* Left: header-col (Divisions title) */
#divisions .header-col {
  float: left;
  width: 25%;
}

/* Right: main-col (grid of cards) — starts after the header column */
#divisions .main-col {
  float: none;
  width: auto;
  margin-left: 25%; /* aligns with right side of header-col */
  padding-left: 20px;
}

/* Grid of cards inside main-col */
#divisions .divisions-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* like bgrid-quarters */
  gap: 20px;
  width: 100%;
}

/* Responsive breakpoints */
@media (max-width: 1100px) {
  #divisions .main-col {
    margin-left: 0;
    padding-left: 0;
  }
  #divisions .divisions-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 540px) {
  #divisions .divisions-grid {
    grid-template-columns: 1fr;
  }
}

/* Divisions cards: square, similar to portfolio tiles */
#divisions .division-card {
  background: #fff;
  color: #111;
  border-radius: 0;
  box-shadow: none;
  border: 1px solid rgba(0, 0, 0, 0.08);
  padding: 16px;
}

#divisions .division-card h3 {
  font-size: 22px; /* same as Work titles */
  line-height: 1.25;
  margin: 0 0 8px 0;
  color: var(--flyover-charcoal);
}

#divisions .division-card ul.disc {
  margin-left: 18px;
}

/* Clear floats for the Divisions row */
#divisions .row::after {
  content: '';
  display: table;
  clear: both;
}

/* ========== PORTFOLIO (cards: no rounded corners) ========== */

#portfolio .portfolio-item,
#portfolio .item-wrap,
#portfolio .modal .description-box {
  border-radius: 0;
  box-shadow: none;
}

/* ========== CONTACT FORM ========== */

#contact input,
#contact textarea {
  background: #fff;
  color: #111;
  border-radius: 0;
  border: 1px solid var(--flyover-grey);
  padding: 10px 12px;
}

#contact input:focus,
#contact textarea:focus {
  outline: none;
  border-color: var(--flyover-teal);
}

/* ========== FOOTER & SOCIAL FOOTER ========== */

/* Main footer: charcoal background, light text */
footer,
#footer {
  background: var(--flyover-charcoal) !important;
  color: #e4e4e4 !important;
  padding: 28px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

footer p,
footer li,
footer a {
  color: #e4e4e4 !important;
}

/* “Social footer” band if present (adjust IDs/classes if needed) */
#social,
#social .row,
#social .twelve.columns {
  background: var(--flyover-charcoal) !important;
  color: #e4e4e4 !important;
}

/* Neon social icon rings */
footer .social-links li a,
footer ul.social li a {
  color: var(--flyover-neon) !important;
  border: 1px solid var(--flyover-neon);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  transition: background 0.15s ease, color 0.15s ease, transform 0.08s ease;
}

footer .social-links li a:hover,
footer ul.social li a:hover {
  background: var(--flyover-neon);
  color: #000 !important;
  transform: translateY(-1px);
}

/* ========== RESPONSIVE FIX FOR DIVISIONS ON MOBILE ========== */
@media (max-width: 900px) {
  #divisions .header-col,
  #divisions .main-col {
    float: none;
    width: 100%;
    margin-left: 0;
    padding-left: 0;
  }
}

/* FORCE CTA BUTTON TO NEON YELLOW — LAST OVERRIDE WINS */
header .button,
header .btn,
header .banner-text .button,
.button,
.btn,
button,
input[type="submit"] {
  background: var(--flyover-neon) !important;
  color: #000 !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 10px 18px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: .5px;
}

/* Force the social strip to use charcoal behind the icons */
footer,
#footer,
footer .row,
footer .twelve.columns,
footer .social,
footer .social-links,
footer ul.social {
  background: var(--flyover-charcoal) !important;
}

/* === Make the entire social/contact band charcoal === */
/* This will turn the full-width area that contains the social icons dark. */

#contact {
  background: var(--flyover-charcoal) !important;
  color: #e4e4e4 !important;
}

/* Make all text in that section light by default */
#contact h1,
#contact h2,
#contact h3,
#contact h4,
#contact p,
#contact li,
#contact label {
  color: #e4e4e4 !important;
}

/* Keep the form area readable on dark: cream "card" inside charcoal section */
#contact .eight.columns,
#contact .contact-form,
#contact form {
  background: var(--flyover-cream);
  color: #111;
  padding: 20px;
  border-radius: 0;
  border: 1px solid rgba(255,255,255,0.06);
}

/* Inputs still white on cream */
#contact input,
#contact textarea {
  background: #fff;
  color: #111;
}

/* Social block + footer share full charcoal */
footer,
#footer,
footer .row,
footer .twelve.columns,
footer .social,
footer .social-links,
footer ul.social {
  background: var(--flyover-charcoal) !important;
}

/* Divisions uses the same layout vibe as Work */

/* Section title styling (already similar to Work/Skills) */
#divisions .header-col h1 span {
  background: none;
  color: var(--flyover-teal);
  border-bottom: 3px solid var(--flyover-neon);
  padding-bottom: 6px;
  font-size: 28px; /* same as WORK title */
}

/* Match h3 sizing with Work items */
#divisions .main-col h3 {
  font-size: 22px;
  line-height: 1.25;
  margin: 0 0 8px 0;
  color: var(--flyover-charcoal);
}

/* List spacing inside each division */
#divisions .row.item {
  margin-bottom: 24px;
}

#divisions .row.item ul.disc {
  margin-left: 18px;
}

/* Clear floats just in case */
#divisions .row::after {
  content: "";
  display: table;
  clear: both;
}