/* ========================================
   FORTIVIAN STRATA — Sovereign Stylesheet
   Layout: HTML table-based ceremonial header
   Palette: Navy (#0f2a3d) + Gold (#bfa278)
   ======================================== */

:root {
  --bg-color: #ffffff;
  --text-color: #111111;

  --blue: #003886;
  --blue-green: #04505F;
  --teal: #3FD3E1;
  --light-blue: #0E8BBE;

  --navy: #0f2a3d;
  --navy-hover: #163b55;
  --gold: #bfa278;
  --gold-hover: #d2b886;

  --font-main: 'Inter', 'Segoe UI', sans-serif;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  font-family: var(--font-main);
  line-height: 1.6;
  font-size: 16px;
}

/* ========================================
   HEADER STRUCTURE
   ======================================== */

.sbs-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 120px;

  background-color: var(--bg-color);
  color: var(--navy);
  font-family: var(--font-main);

  padding-top: 0.5rem;
  padding-bottom: 0;

  z-index: 1000;   /* ensures it stays above content */
}

/* === Top Table: Logo + Centered Motto === */
/* --- Header Tables --- */
.header-top-table {
  width: 100%;
  border-collapse: collapse;
  padding: 0 0rem;
}

.header-home-link {
  display: inline-block;
  color: inherit;
  text-decoration: none;
}

.header-home-link:hover {
  cursor: pointer;
}


/* Logo */
.book-title-cell {
  padding-left: 2rem;
  vertical-align: middle;
}

/* Motto */
.motto-cell {
  text-align: center;
  padding-right: 2rem;
  padding-left: 1rem;
}

.motto-line-1 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--navy);
}

.motto-line-2 {
  font-size: 1.25rem;
  font-weight: 700;
  font-style: italic;
  color: var(--light-blue);
  margin-top: 0.05rem;
  margin-bottom: 0.05rem;
}

/* Dividers */
.navy-divider {
  height: 4px;
  background-color: var(--navy);
  border: none;
  width: 100%;
  margin-top: 0.5rem;
  margin-bottom: 0;
}



/* ========================================
   NAVIGATION
   ======================================== */

.nav-table-1 {
  width: 100%;
  border-collapse: collapse;
  padding: 0 0rem;
}

.nav-table-2 {
  width: 100%;
  background-color: var(--navy);
  margin-top: 0.25rem;
  border-collapse: collapse;
}

/* Desktop nav layout */
.nav-group {
  display: flex;
  gap: 0rem;
  align-items: center;
}
.nav-right .nav-group {
  justify-content: flex-end;
}

.nav-left,
.nav-right {
  padding: 0 2rem;
  vertical-align: middle;
}

.nav-left { text-align: left; }
.nav-right { 
  text-align: right;
  margin-left: auto;   /* ONLY here */
}

/* Desktop nav links */
.nav-item {
  color: var(--bg-color);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  transition: color 0.2s ease;
}

.nav-item:hover {
  color: var(--teal);
  cursor: pointer;
}

/* ===== Desktop defaults (IMPORTANT) =====
   These prevent mobile artifacts (checkbox + mobile links) from appearing on desktop.
*/
.desktop-only { display: table-cell; }
.nav-mobile-toggle { display: none; }
#menu-toggle { display: none; }
.nav-right-links { display: none; }
.mobile-menu-link { display: none; }

.expand-about { display:inline }
.consol-about { display: none }

/* Mobile menu container (desktop-safe defaults) */
.nav-right-links-wrapper {
  text-align: right;
  padding-right: 2rem;
}

/* Menu button base (desktop hidden; mobile shows it) */
.menu-button {
  font-size: 1rem;
  font-weight: 600;
  color: var(--bg-color);
  cursor: pointer;
  display: inline-block;
  transition: color 0.2s ease;
  
}

/* NAV dropdown opens BELOW the button */
.dropdown-nav {
  position: relative;
}

.dropdown-nav .dropdown-content {
  left: auto !important;
  right: 0 !important;          /* anchor to right edge of button */
  top: 100% !important;
  margin: 0 !important;
  min-width: 220px;             /* adjust */
  width: max-content;           /* size to content when possible */
  max-width: 90vw;              /* prevents screen overflow */
  box-sizing: border-box;
}

/* Optional: slight breathing room without creating a hover gap */
.dropdown-nav .dropdown-content {
  padding-top: 0.25rem;
}

.dropdown-nav:hover .dropdown-content,
.dropdown-nav:focus-within .dropdown-content {
  display: block;
}

/* About dropdown opens below its button */
.dropdown-about {
  position: relative;
}

.dropdown-about .dropdown-button {
  white-space: nowrap;
  min-width: 110px;   /* adjust if needed */
}


.dropdown-about .dropdown-content {
  left: 0;
  right: auto;
  top: 100%;
  margin-top: 0;           /* avoid hover-gap collapse */
  min-width: 220px;
  width: max-content;
  max-width: 90vw;
}

/* Show on hover + focus (matches your other dropdown behavior) */
.dropdown-about:hover .dropdown-content,
.dropdown-about:focus-within .dropdown-content {
  display: block;
}


/* ========================================
   MAIN CONTENT
   ======================================== */

main {
  max-width: 960px;
  margin-left: 10%;        /* matches header spacer column */
  margin-right: auto;
  padding-right: 2rem;
  padding-top: 150px;     /* ← add this */
}

[id] {
  scroll-margin-top: 170px; /* match header height */
}


section h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
  color: var(--navy);
}

section p {
  font-size: 1.1rem;
  color: #333;
}


/* ========================================
   HERO / INTRO
   ======================================== */

/* Default: show desktop hero, hide mobile hero */
.hero-desktop { display: block; }
.hero-mobile  { display: none; }



/* ========================================
   INTRO SECTION — Below Header
   ======================================== */

.intro-banner {
  background-color: var(--bg-color);
  color: #0f2a3d;
  text-align: left;
  padding: 2rem 2rem;
  max-width: 1024px;
  margin: 0 auto;
  padding-left: 0;   /* Left offset for harmony with logo */
  padding-right: 0;
}

.intro-label {
  font-size: 1.5rem;        /* Larger than sub, smaller than headline */
  font-weight: 700;
  color: var(--navy);            /* Match header navy */
  letter-spacing: 1px;
  margin-bottom: 1rem;
  text-transform: uppercase;
}

.intro-label-mobile {
  font-size: 1.15rem;        /* Larger than sub, smaller than headline */
  font-weight: 700;
  color: var(--navy);            /* Match header navy */
  letter-spacing: 1px;
  margin-bottom: 1rem;
  text-transform: uppercase;
}

.intro-label-emphasis {
  font-size: 1.5rem;        /* Larger than sub, smaller than headline */
  font-weight: 700;
  color: var(--light-blue);            /* Match header navy */
  letter-spacing: 1px;
  margin-bottom: 1rem;
  text-transform: uppercase;
}

.intro-label-emphasis-mobile {
  font-size: 1.15rem;        /* Larger than sub, smaller than headline */
  font-weight: 700;
  color: var(--light-blue);            /* Match header navy */
  letter-spacing: 1px;
  margin-bottom: 1rem;
  text-transform: uppercase;
}

.intro-headline {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 1.5rem;
  color: var(--navy);
}

.intro-sub {
  font-size: 1.125rem;
  font-style: italic;
  color: #333;
  margin-bottom: 1.2rem;
  line-height: 1.6;
}

/* Book cover sizing (desktop) */
.hero-cover-cell {
  width: 320px;
  padding-right: 2rem;
  vertical-align: top;
}

.hero-book-cover {
  display: block;
  max-width: 100%;
  height: auto;
}

/* CTA / Dropdown */
.system-button-wrapper {
  margin-top: 2rem;
}

.dropdown {
  position: relative;
  display: inline-block;
  padding-right: 0.5rem; /* creates a hover bridge */
}

.dropdown-button {
  background-color: var(--navy);
  color: var(--bg-color);
  padding: 0.25rem 1.5rem;
  font-weight: 600;
  font-size: 0.95rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.dropdown-button:hover {
  color: var(--teal);
}

.dropdown-content {
  display: none;
  position: absolute;
  top: 0;
  left: 100%;
  background-color: var(--navy);
  min-width: 260px;
  box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15);
  z-index: 10;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid #ddd;
  margin-left: 0;
}

.dropdown-content a {
  color: var(--bg-color);
  padding: 0.75rem 1rem;
  text-decoration: none;
  display: block;
  font-size: 0.95rem;
  font-weight: 700;
  transition: background-color 0.15s ease;
}

.dropdown-content a:hover {
  color: var(--teal);
}

.dropdown:hover .dropdown-content {
  display: block;
}

.cta-button {
  display: inline-block;
  margin-top: 2rem;
  padding: 0.75rem 1.5rem;
  background-color: var(--navy);
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
  font-weight: 600;
  transition: background-color 0.3s ease;
}

.cta-button:hover {
  background-color: var(--gold-hover);
}

/* ========================================
   WAITING LIST SIGNUP (Pre-release)
   ======================================== */

.waitinglist-form-container {
  width: 600px;
  margin: 0;                 /* important: do NOT push it down in the hero */
}
.waitinglist-form-container-mobile {
  max-width: 600px;
}

.waitinglist-box-mobile {
  background-color: var(--navy);
  padding: 1rem;
}

.waitinglist-input-table {
  width: 90%;
  background-color: var(--navy);
  border-collapse: collapse;
}

.waitinglist-input-table td {
  padding: 8px;
  vertical-align: top;
}

.waitinglist-text-input {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  font-size: 14px;
}

.waitinglist-intro-mobile {
  color: var(--bg-color);
  font-weight: 700;
  margin-bottom: 1rem;
}


.waitinglist-intro-cell {
  text-align: center;
  font-size: 16px;
}

.waitinglist-intro-cell label {
  color: var(--bg-color);
  font-weight: bold;
  font-style: italic;
}

.waitinglist-label-cell {
  text-align: left;
  font-size: 13px;
}

.waitinglist-label-cell label {
  color: var(--bg-color);
  font-weight: bold;
}

.waitinglist-row-mobile {
  margin-bottom: 0.5rem;
}

.waitinglist-field-mobile {
  display: flex;
  flex-direction: column;
}

.waitinglist-text-input-mobile {
  padding: 2px 4px;     /* vertical | horizontal */
  font-size: 10px;
  line-height: 1.2;
}

.waitinglist-field-mobile label {
  color: var(--bg-color);
  font-size: 10px;
  font-weight: 700;
  margin-top: 4px;
  text-align: left;
}


.waitinglist-cta-button {
  display: inline-block;
  margin-top: .5rem;
  padding: 0.5rem 1.5rem;
  background-color: var(--navy);
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
  font-size: 15px;
  font-weight: 800;
  transition: background-color 0.3s ease;
  border: 1px solid #ffffff;   /* matches your sample look */
}

.waitinglist-cta-button:hover {
  color: var(--teal);
}

.waitinglist-cta-row-mobile {
  display: flex;
  justify-content: right;
  margin-top: 0.5rem;
}

.waitinglist-cta-button-mobile {
  padding: 0.6rem 1.5rem;
  background-color: var(--navy);
  color: #fff;
  font-weight: 800;
  border: 1px solid #ffffff;
  border-radius: 4px;
  cursor: pointer;
}

.waitinglist-cta-button:hover {
  color: var(--teal);
}

/* When used inside the hero, allow it to be responsive */
.waitinglist-in-hero {
  width: 100%;
  max-width: 600px;
}

.waitinglist-success-message {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--teal);
}




/* ========================================
   PILLAR SECTIONS
   ======================================== */

/* Default: show desktop hero, hide mobile hero */
.pillar-image-desktop { display: block; }
.pillar-image-mobile  { display: none; }

.pillar-section {
  padding: 1rem 2rem;
}

.pillar-tagline {
  font-size: 1.1rem;
  font-weight: 500;
  font-style: italic;
  color: #0f2a3d;
  margin: 0.25rem 0 1rem 0;
}

.pillar-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1100px;
  margin: 0 auto;
  gap: 2rem;
  flex-wrap: wrap;
}

.pillar-text {
  flex: 1;
}

.pillar-text h2 {
  font-size: 1.8rem;
  color: #0f2a3d;
  margin-bottom: 1rem;
}

.pillar-text p {
  font-size: 1.1rem;
  color: #333;
  margin-bottom: 1rem;
}

.pillar-text ul {
  list-style-type: disc;
  padding-left: 1.25rem;
  color: #333;
}

.pillar-content img {
  max-width: 300px;
  height: auto;
  flex-shrink: 0;
}

/* Alternating layout */
.image-left {
  flex-direction: row;
}

.image-right {
  flex-direction: row-reverse;
}

/* Background shades for each pillar */
.pillar-bg-1 {
  background-color: #f7f7f7;
}

.pillar-bg-2 {
  background-color: #f0f4f8;
}

.pillar-bg-3 {
  background-color: #fdf6ed;
}

.pillar-bg-4 {
  background-color: #eef5f2;
}

.pillar-bg-5 {
  background-color: #f5f0f9;
}

/* About the Book image  */
.aboutbook-image-cell-desktop {
  width: 260px;            /* controls the column width */
  padding-left: 1.5rem;    /* breathing room from text */
}

.aboutbook-image-desktop {
  width: 400px;            /* actual image size */
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;      /* optional */
}

.aboutbook-image-mobile {
  width: 120px;          /* mobile-friendly image size */
  max-width: 100%;
  margin-bottom: 0.75rem;
}

/* Author image  */
.author-image-cell-desktop {
  width: 260px;            /* controls the column width */
  padding-left: 1.5rem;    /* breathing room from text */
}

.author-image-desktop {
  width: 400px;            /* actual image size */
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;      /* optional */
}

.author-image-mobile {
  width: 170px;          /* mobile-friendly headshot size */
  max-width: 100%;
  margin-bottom: 0.75rem;
}

/* Foreword author image */
.foreword-image-cell-desktop {
  width: 260px;            /* controls the column width */
  padding-left: 1.5rem;    /* breathing room from text */
}

.foreword-author-image-desktop {
  width: 400px;            /* actual image size */
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;      /* optional */
}

.foreword-author-image-mobile {
  width: 170px;          /* mobile-friendly headshot size */
  max-width: 100%;
  margin-bottom: 0.75rem;
}


/* ========================================
   FOOTER
   ======================================== */

footer {
  text-align: center;
  padding: 3rem 1rem;
  background-color: #f6f6f6;
  color: #666;
  font-size: 0.9rem;
}

/* ========================================
   CONTACT GRID
   ======================================== */

.contact-grid {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 2rem;
  margin-top: 2rem;
}

.contact-block {
  flex: 1 1 45%;
  text-align: center;
}

.contact-img {
  max-width: 100%;
  height: auto;
  margin-bottom: 1rem;
}






/* ========================================
   Between 1000px and mobile:
   hide the two About links, show the About dropdown button 
   ======================================== */

  @media screen and (max-width: 1100px) and (min-width: 826px) {
    .expand-about { display: none !important; }
    .consol-about { display: inline-block !important; }
  }






/* ========================================
   MOBILE (single source of truth)
   ======================================== */

    @media screen and (max-width: 825px) {

        body {
          font-size: 15px;
        }

        /* Layout */
        main {
          padding-top: 0 !important;  /* no need to offset content */
          max-width: 100% !important;
        }

        /* Header tighter */
        .sbs-header {
          position: static;   /* or position: relative; */
          padding: 0.25rem 0;
        }

        /* Remove spacer columns that become phantom rows */
        .header-top-table td[width="5%"],
        .header-top-table td[width="7%"] {
          display: none !important;
          padding: 0 !important;
        }

        /* Stack header cells */
        .header-top-table td {
          display: block;
          width: 100% !important;
          padding: 0.25rem 1rem !important;
          text-align: left !important;
        }

        /* Logo: smaller + right aligned */
        .logo-cell {
          height: auto !important;
          padding: 0.25rem 1rem 0 !important;
          text-align: right !important;
        }

        .logo {
          max-height: 56px !important;
          max-width: 180px !important;
          width: auto !important;
          height: auto !important;
          margin-left: auto !important;
          margin-right: 0 !important;
        }

        .motto-line-1 {
          font-size: 1.2rem;
          font-weight: 700;
          color: var(--navy);
        }

        .motto-line-2 {
          font-size: 1rem;
          font-weight: 700;
          font-style: italic;
          color: var(--light-blue);
          margin-top: 0.05rem;
          margin-bottom: 0.05rem;
        }

        /* Divider */
        .navy-divider {
          height: 3px;
          margin-top: 0.25rem;
        }

        /* Nav: hide desktop links, show menu button */
        .desktop-only { display: none !important; }
        .expand-about { display: none !important; }
        .consol-about { display: none !important; }

        .nav-table-1 td {
          padding-top: 0 !important;
          padding-bottom: 0 !important;
        }

        .nav-table-2 {
          margin-top: 0 !important;
        }

        .nav-mobile-toggle {
          display: table-cell !important;
          text-align: right !important;
          padding: 0.35rem 1rem !important;
          background-color: var(--navy);
        }

        /* Menu button: white default, teal on hover */
        .menu-button {
          color: var(--bg-color);
        }

        .menu-button:hover,
        .menu-button:focus {
          color: var(--teal);
        }

        /* Hero */
        .intro-banner {
          padding: 1.25rem 1rem;
          max-width: 100%;
          padding-left: 1rem;   /* override desktop 4rem */
          padding-right: 1rem;
        }

        .intro-headline {
          font-size: 1.5rem;
        }

        .intro-sub {
          font-size: 1rem;
        }


        /* =========================
          MOBILE HERO (flex): cover + CTA side-by-side
          Works with:
          .hero-mobile-row, .hero-book-cover-mobile, .hero-mobile-cta
          ========================= */

        /* Swap hero versions */
        .hero-desktop { display: none !important; }

        .hero-mobile  { display: block !important; 
                        text-align: center; }

        /* Side-by-side row */
        .hero-mobile .hero-mobile-row {
          display: grid !important;
          grid-template-columns: 1fr 1fr;     /* equal columns */
          column-gap: 1rem;
          align-items: start;
          width: 100% !important;
          margin-top: 1rem;
          margin-bottom: 1rem;
        }

        /* Cover */
        .hero-mobile .hero-book-cover-mobile {
          justify-self: center;              /* centers within column */
          display: block !important;
          max-height: 220px !important;
          width: auto !important;
          height: auto !important;
          margin: 0 !important;              /* grid handles centering */
        }

        /* CTA column */
        .hero-mobile .hero-mobile-cta {
          justify-self: left;              /* centers within column */
          display: block;
          min-width: 0 !important;           /* prevents weird overflow */
        }

        /* Button sizing within right column */
        .hero-mobile .hero-mobile-cta .dropdown-button {
          width: auto !important;            /* do NOT stretch */
          min-width: 200px;                  /* optional for consistency */
          max-width: 240px !important;
        }

        /* Dropdown opens below button on mobile */
        .hero-mobile .dropdown-order {
          position: relative !important;
          padding-bottom: 0.75rem;
          margin-left: auto;
          margin-right: auto;
        }

        .hero-mobile .dropdown-order .dropdown-content {
          display: none;
          position: absolute !important;
          left: 0 !important;
          top: 100% !important;
          margin-top: 0 !important;
          min-width: 220px;
          background-color: var(--navy);
          border: 1px solid var(--navy);
          border-radius: 4px;
          z-index: 999;
        }

        .hero-mobile .dropdown-order:hover .dropdown-content {
          display: block;
        }

        .hero-mobile .dropdown-order:focus-within .dropdown-content {
          display: block;
        }

        .hero-mobile .dropdown-order .dropdown-content a {
          display: block;
          padding: 0.5rem 1rem;
          color: var(--bg-color);
          text-decoration: none;
          font-weight: 700;
        }

        .hero-mobile .dropdown-order .dropdown-content a:hover {
          color: var(--teal);
        }

        .waitinglist-form-container,
        .waitinglist-in-hero {
          max-width: 100%;
          width: 100%;
        }

        .waitinglist-input-table {
          width: 100%;
        }

        /* Pillars */

        /* Swap image versions */
        .pillar-image-desktop { display: none !important; }
        .pillar-image-mobile  { display: block !important; }

        .pillar-section {
          padding: 2rem 1rem;
        }

        .pillar-content {
          flex-direction: column !important;
          align-items: flex-start;
          text-align: left;
        }

        .pillar-content img {
          max-width: 100%;
          margin-bottom: 1rem;
        }

        .pillar-content img {
          max-width: 100%;
          margin-bottom: 1rem;
        }

        .pillar-text h2 {
          font-size: 1.5rem;
        }

        .pillar-text p,
        .pillar-text ul {
          font-size: 1rem;
        }

        /* Contact grid */
        .contact-grid {
          flex-direction: column;
          align-items: center;
        }

        .contact-block {
          width: 100%;
        }

        /* Footer */
        footer {
          padding: 2rem 1rem;
        }

    }