/* styles.css */

/* 1. Reset & reserve space for navbar */
html,
body {
  height: 100%;
  margin: 0;
  padding-top: 8rem; /* adjust to match your navbar’s height */
  font-size: 1rem;
}
/* Make the brand a vertical stack so the headshot sits under the slogan */
.navbar .navbar-brand {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.25rem 0.5rem;
  background: transparent !important;
}

/* Force headshot to be 10% of viewport width with sensible min/max */
.nav-headshot .headshot-img {
  width: 10vw !important;       /* 10% of viewport width */
  max-width: 240px !important;  /* cap on very wide screens */
  height: auto !important;
  display: block;
  object-fit: cover;
  border-radius: 8px;           /* change to 50% for circular */
  box-shadow: none !important;
  background: transparent !important;
}

/* Ensure the brand text stays readable on top of the background */
.navbar .brand-text {
  color: #fff;
  line-height: 1.05;
}

/* Small screens: center the brand and image */
@media (max-width: 720px) {
  .navbar .navbar-brand {
    align-items: center;
    text-align: center;
  }
}

/* Anchor offset fix for desktop */
html {
  scroll-padding-top: 16rem; /* ensures anchors are visible below navbar */
}

/* 2. Full-width, top-aligned background */
body {
  background: url("../images/background.png") top center / cover no-repeat fixed;
}

/* 3. Transparent, fixed navbar with button-style links */
.navbar {
  position: fixed;
  top: 0;
  width: 100%;
  background: transparent !important;
  z-index: 1000;
  padding: 0.5rem 1rem;
  display: flex;
  align-items: center;
}
.navbar .navbar-brand,
.navbar .nav-link {
  color: #fff !important;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 0.25rem;
  padding: 0.4rem 0.8rem;
  margin: 0 0.25rem;
  transition: background-color 0.2s;
}
.navbar .navbar-brand:hover,
.navbar .nav-link:hover {
  background-color: rgba(0, 0, 0, 0.6);
}

/* 4. “Soft-box” content sections */
.content-section {
  margin: 2rem 15%;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 0.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  padding: 2rem;
  overflow: visible;
}
.content-section.full {
  max-height: none;
}

/* ── UNIVERSAL HORIZONTAL SCROLL NAVBAR ───────────────────────────── */
.navbar-collapse {
  flex: 1;
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  position: relative;
}
.navbar-collapse::-webkit-scrollbar {
  display: none;
}
.navbar-collapse .navbar-nav {
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  margin: 0;
  padding: 0;
}
.navbar-collapse .nav-item {
  flex: 0 0 auto;
}
.navbar-collapse .nav-link {
  white-space: nowrap;
  padding: 0.4rem 0.6rem;
  margin: 0 0.15rem;
}
/* Gradient fade hint */
.navbar-collapse::before,
.navbar-collapse::after {
  content: '';
  position: sticky;
  top: 0;
  width: 20px;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}
.navbar-collapse::before {
  left: 0;
  background: linear-gradient(to right, rgba(0,0,0,0.6), rgba(0,0,0,0));
}
.navbar-collapse::after {
  right: 0;
  background: linear-gradient(to left, rgba(0,0,0,0.6), rgba(0,0,0,0));
}

/* ── NAVBAR SCROLL ARROWS ───────────────────────────── */
.nav-scroll-btn {
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  border: none;
  font-size: 1.5rem;
  padding: 0.25rem 0.5rem;
  cursor: pointer;
  z-index: 1100;
  transition: background 0.2s, opacity 0.2s;
  opacity: 0; /* hidden by default */
  pointer-events: none; /* disabled when hidden */
}
.nav-scroll-btn:hover {
  background: rgba(0, 0, 0, 0.7);
}
.nav-scroll-btn.left {
  margin-right: 0.25rem;
}
.nav-scroll-btn.right {
  margin-left: 0.25rem;
}
.nav-scroll-btn.visible {
  opacity: 1;
  pointer-events: auto;
}

/* ── MOBILE/TABLET CONTENT OVERRIDES ───────────────────────────────── */
@media (max-width: 1023px) {
  body {
    overflow-x: hidden; /* prevent stray scrollbars */
    background-image: url("../images/background.png");
    background-position: top center;
    background-repeat: repeat-x;
    background-size: auto 100%;
    font-size: 1rem;
  }
  .content-section {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0;
    box-sizing: border-box;
    padding-top: 60px;
    padding-left: 1rem;
    padding-right: 1rem;
    background: rgba(255, 255, 255, 0.9);
  }

  /* Anchor offset fix for mobile */
  html {
    scroll-padding-top: 60px; /* match mobile navbar height */
  }
}

/* ── FOOTER ───────────────────────────────────────────── */
.footer {
  font-size: 0.8rem;
  color: #555;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  position: relative;
  bottom: 0;
  width: 100%;
  background-color: rgba(248, 249, 250, 0.9);
}
.tagline-list {
  list-style: disc;
  margin: 1rem 0;
  padding-left: 1.5rem;
}
.tagline-list li {
  margin-bottom: 0.5rem;
}

/* Fade-in arrows on navbar hover */
.navbar:hover .nav-scroll-btn {
  opacity: 0.6; /* partially visible on hover */
  pointer-events: auto;
}
.navbar:hover .nav-scroll-btn.visible:hover {
  opacity: 1; /* fully visible on hover over arrow */
}

/* Remove dark rounded background and shadows from brand and nav links 
.navbar .navbar-brand,
.navbar .nav-link {
  background: transparent !important;
  box-shadow: none !important;
  margin: 0 !important;       /* 
  padding: 0 !important;      /* remove padded pill look; adjust below if needed 
}
*/
/* If you want nav links to keep the pill look but not the brand, use this instead: */
.navbar .nav-link {
  background-color: rgba(0,0,0,0.3);
  border-radius: 0.25rem;
  padding: 0.4rem 0.8rem;
  margin: 0 0.25rem;
}

/* Ensure the brand (text + image) does not get a background or shadow */
.navbar .navbar-brand {
  background: transparent !important;
  box-shadow: none !important;
  padding: 0.25rem 0 !important; /* small padding to keep spacing but no pill */
  align-self: flex-start !important; /* keep brand aligned to top of navbar */
}

/* Keep the image shadowless and sized to 10vw, prevent flex shrinking */
.nav-headshot .headshot-img,
.navbar .headshot-img {
  box-shadow: none !important;
  background: transparent !important;
  width: 10vw !important;
  max-width: 240px !important;
  min-width: 72px !important;
  height: auto !important;
  object-fit: cover !important;
  border-radius: 8px !important; /* change to 50% for circular */
  flex-shrink: 0 !important;
  align-self: flex-start !important;
}

/* Keep the rest of the navbar items vertically centered while brand stays top */
.navbar {
  align-items: flex-start !important;
}

/* Make the nav links vertically centered inside their own area */
.navbar .navbar-collapse,
.navbar .navbar-collapse .navbar-nav {
  align-items: center !important;
}

/* Mobile: stack and center brand and image as before */
@media (max-width: 720px) {
  .navbar {
    align-items: center !important;
  }
  .navbar .navbar-brand {
    align-items: center !important;
    text-align: center !important;
  }
  .nav-headshot .headshot-img {
    width: 20vw !important; /* slightly larger on small screens if desired */
    max-width: 160px !important;
  }
}
/* ───────────────────────────────────────────── */
/* UNIVERSAL PRINT STYLESHEET — Floyd2026.com    */
/* Applies to ALL pages                          */
/* ───────────────────────────────────────────── */
@media print {

  /* Force landscape orientation */
  @page {
    size: landscape;
    margin: 0.5in;
  }

  /* Remove all backgrounds (including site-wide image) */
  html, body, * {
    background: none !important;
    box-shadow: none !important;
  }

  /* Remove all spacing reserved for fixed navbar */
  html, body {
    padding: 0 !important;
    margin: 0 !important;
    scroll-padding-top: 0 !important;
  }

  /* Hide ALL navigation, header, footer, social, CTA, etc. */
  nav,
  .navbar,
  .navbar-brand,
  .navbar-collapse,
  .nav-item,
  .nav-link,
  .nav-scroll-btn,
  header,
  footer,
  .footer,
  .menu,
  .top-bar,
  .social,
  .cta,
  .button-row,
  .tagline-list {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
  }

  /* Reset all fixed/absolute elements so they don't leave gaps */
  * {
    position: static !important;
  }

  /* Expand content to full printable width */
  .content-section,
  .container,
  .container-fluid {
    margin: 0 !important;
    padding: 0.5in !important;
    width: 100% !important;
    max-width: 100% !important;
    background: none !important;
    box-shadow: none !important;
  }

  /* Flatten all grid/flex/card layouts */
  .row,
  .col,
  .grid,
  .card,
  .bill-card,
  .bill,
  .list-group,
  .list-group-item {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    float: none !important;
    page-break-inside: avoid !important;
  }

  /* Ensure text prints dark and readable */
  body, p, h1, h2, h3, h4, h5, h6 {
    color: #000 !important;
  }

  /* Add page breaks between major content blocks */
  .bill-card,
  .bill,
  .content-section {
    page-break-after: 1.5rem;
  }

  /* Remove link underlines and colors */
  a {
    color: #000 !important;
    text-decoration: none !important;
  }
}