/* ============================================================
   THE RIGHT BUSINESS FIRST -- extra.css
   Complete consolidated stylesheet
   Sections:
     1. Brand & Base Variables
     2. Typography -- Base Spacing
     3. Utility Classes
     4. Home Page -- Layout & Structure
     5. Home Page -- Hero
     6. Home Page -- Section Backgrounds
     7. Home Page -- Phase Grid
     8. Home Page -- Outcome Grid
     9. Home Page -- Two-Column Layout
    10. Home Page -- CTA Section
    11. Home Page -- Button Modifier
    12. See It Work -- Path Cards
    13. See It Work -- Question Blocks
    14. See It Work -- CTA Buttons
    15. Dark Mode -- Global Overrides
    16. Responsive -- Mobile
   ============================================================ */


/* ============================================================
   1. BRAND & BASE VARIABLES
   ============================================================ */

[data-md-color-scheme="default"] {
  --md-default-bg-color: #f6f8fb;
  --md-default-fg-color: rgba(36, 48, 58, 0.92);
  --md-default-fg-color--light: rgba(36, 48, 58, 0.72);
  --md-default-fg-color--lighter: rgba(36, 48, 58, 0.56);
  --md-typeset-color: rgba(36, 48, 58, 0.88);
}

[data-md-color-scheme="slate"] {
  --md-default-fg-color: rgba(226, 228, 233, 0.88);
  --md-default-fg-color--light: rgba(226, 228, 233, 0.68);
  --md-default-fg-color--lighter: rgba(226, 228, 233, 0.52);
  --md-typeset-color: rgba(226, 228, 233, 0.86);
}


/* ============================================================
   2. TYPOGRAPHY -- BASE SPACING
   ============================================================ */

.md-typeset p {
  line-height: 1.4 !important;
}

.md-typeset ul,
.md-typeset ol {
  margin-top: 0.25rem !important;
  margin-bottom: 0.25rem !important;
  padding-left: 1.1rem !important;
}

.md-typeset li {
  margin: 0.1rem 0 !important;
  line-height: 1.35 !important;
}

.md-typeset li > p {
  margin: 0.15rem 0 !important;
}

.md-typeset h2 {
  font-weight: 400;
  letter-spacing: -0.01em;
}

[data-md-color-scheme="slate"] .md-typeset h2 {
  margin-top: 3rem !important;
  padding-top: 1.2rem;
}

/* Add breathing room above footer */
.md-content {
  padding-bottom: 5rem !important;
  /* Prevent horizontal scroll caused by full-width section technique */
  overflow-x: hidden;
}


/* ============================================================
   3. UTILITY CLASSES
   ============================================================ */

.disclaimer-list {
  margin-top: 0.75rem;
}

.disclaimer-list li {
  margin: 0.8rem 0 !important;
  line-height: 1.6 !important;
}

.trbf-highlight {
  padding: 1rem 1.2rem;
  margin: 1.2rem 0;
  border-radius: 0.75rem;
  background: rgba(63, 81, 181, 0.06);
  border-left: 4px solid rgba(63, 81, 181, 0.6);
}


/* ============================================================
   4. HOME PAGE -- LAYOUT & STRUCTURE
   ============================================================ */

/* Full-width sections -- break out of the MkDocs content container */
.hero,
.home-section {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: 4rem 2rem;
  box-sizing: border-box;
}

/* Inner content wrapper -- constrains and centers the readable text */
.hero-content,
.home-section-inner {
  max-width: 52rem;
  margin: 0 auto;
}

/* Default text alignment */
.hero,
.home-section-inner {
  text-align: center;
}

/* Remove gap between hero and the top of the content area */
.md-content__inner > .hero:first-child {
  margin-top: -1.5rem;
}

/* Section headings */
.home-section h2 {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  letter-spacing: -0.01em;
}

.home-section p {
  font-size: 1.05rem;
  line-height: 1.75;
}


/* ============================================================
   5. HOME PAGE -- HERO
   ============================================================ */

.hero {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  color: #f0f0f0;
  padding: 6rem 2rem 5rem;
}

.hero h1 {
  font-size: 2.75rem;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 1.5rem;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.hero p {
  font-size: 1.15rem;
  line-height: 1.7;
  color: #d0d0e0;
  margin-bottom: 0.5rem;
}

.hero strong {
  color: #ffffff;
}

.hero-cta {
  margin-top: 2.5rem;
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.hero-cta .md-button {
  font-size: 1.05rem;
  padding: 0.75rem 2rem;
  border-radius: 6px;
  font-weight: 600;
  text-decoration: none;
}

.hero-cta .md-button--primary {
  background: #e94560;
  border-color: #e94560;
  color: #ffffff;
}

.hero-cta .md-button--primary:hover {
  background: #c73a52;
  border-color: #c73a52;
}

.hero-cta .md-button:not(.md-button--primary) {
  border: 2px solid #ffffff;
  color: #ffffff;
  background: transparent;
}

.hero-cta .md-button:not(.md-button--primary):hover {
  background: rgba(255, 255, 255, 0.1);
}

.hero-note {
  margin-top: 1.5rem;
  font-size: 0.85rem;
  color: #8888aa;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}


/* ============================================================
   6. HOME PAGE -- SECTION BACKGROUNDS
   ============================================================ */

/* Light mode */
[data-md-color-scheme="default"] .home-section {
  background: #ffffff;
  color: #1a1a2e;
}

[data-md-color-scheme="default"] .home-section--dark {
  background: #f4f4f8;
  color: #1a1a2e;
}

/* Dark mode */
[data-md-color-scheme="slate"] .home-section {
  background: var(--md-default-bg-color);
  color: var(--md-default-fg-color);
}

[data-md-color-scheme="slate"] .home-section--dark {
  background: #1e1e2e;
  color: var(--md-default-fg-color);
}


/* ============================================================
   7. HOME PAGE -- PHASE GRID
   ============================================================ */

.phase-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-top: 2rem;
}

/* Phase card -- light mode base */
.phase-card {
  border: 2px solid #c8cfe0;
  border-top: 3px solid var(--md-accent-fg-color);
  border-radius: 8px;
  padding: 1.5rem;
  background: #ffffff;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
  text-align: center;
}

.phase-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}

/* Phase card heading and body */
.phase-card h3 {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
  color: var(--md-accent-fg-color);
  background: rgba(63, 81, 181, 0.08);
  border-radius: 4px;
  padding: 0.3rem 0.6rem !important;
  /* Prevent any heading border that Material applies in some contexts */
  border: none !important;
  border-bottom: none !important;
}

.phase-card p {
  font-size: 0.95rem;
  margin: 0;
}

/* Neutralize any admonition or unexpected border on children of phase-card.
   The md_in_html extension may wrap content in an intermediate div that
   inherits or receives conflicting border styling from Material's components. */
.phase-card > *,
.phase-card > div,
.phase-card > p {
  border-left: none !important;
  border-right: none !important;
  border-top: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Phase card -- dark mode */
[data-md-color-scheme="slate"] .phase-card {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.22);
  color: var(--md-default-fg-color);
}

[data-md-color-scheme="slate"] .phase-card:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45);
  border-color: rgba(255, 255, 255, 0.38);
}

[data-md-color-scheme="slate"] .phase-card h3 {
  color: var(--md-accent-fg-color);
}

[data-md-color-scheme="slate"] .phase-card p {
  color: var(--md-default-fg-color);
}


/* ============================================================
   8. HOME PAGE -- OUTCOME GRID
   ============================================================ */

.outcome-grid ul {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}

.outcome-grid li {
  padding: 0.75rem 1rem;
  border-radius: 6px;
  border-left: 3px solid var(--md-accent-fg-color);
  font-size: 0.95rem;
  text-align: left;
  /* Light mode */
  background: rgba(0, 0, 0, 0.09);
}

[data-md-color-scheme="slate"] .outcome-grid li {
  background: rgba(255, 255, 255, 0.07);
  color: var(--md-default-fg-color);
}


/* ============================================================
   9. HOME PAGE -- TWO-COLUMN LAYOUT
   ============================================================ */

.two-col {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3rem;
}

.two-col h2 {
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

/* Left-align content inside columns (For / Not For section)
   Exclude .cta-card columns, which must remain centered */
.two-col .col:not(.cta-card) {
  text-align: left !important;
}

.two-col li {
  margin-bottom: 0.5rem !important;
  line-height: 1.6 !important;
  text-align: left !important;
}

/* Dark mode text contrast for two-col lists */
[data-md-color-scheme="slate"] .two-col {
  color: var(--md-default-fg-color);
}


/* ============================================================
   10. HOME PAGE -- CTA SECTION
   ============================================================ */

/* Force the dark gradient regardless of scheme */
.home-section--cta,
[data-md-color-scheme="default"] .home-section--cta,
[data-md-color-scheme="slate"] .home-section--cta {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%) !important;
  color: #f0f0f0 !important;
  padding: 5rem 2rem;
}

.home-section--cta h2 {
  color: #ffffff !important;
  margin-bottom: 2.5rem;
}

/* CTA card container alignment */
.two-col.cta-col {
  text-align: center;
}

/* CTA card base */
.cta-card {
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  padding: 2rem 1.5rem;
  background: rgba(255, 255, 255, 0.06) !important;
  transition: background 0.2s ease, border-color 0.2s ease;
  text-align: center;
}

.cta-card:hover {
  background: rgba(255, 255, 255, 0.11) !important;
  border-color: rgba(255, 255, 255, 0.35);
}

.cta-card h3 {
  color: #ffffff !important;
  font-size: 1.3rem;
  margin-bottom: 1rem;
  border: none !important;
}

.cta-card p {
  color: #d0d0e0 !important;
  font-size: 0.95rem;
  margin-bottom: 1.5rem;
}

/* CTA primary button */
.cta-card .md-button--primary {
  background: #e94560 !important;
  border-color: #e94560 !important;
  color: #ffffff !important;
  font-size: 1rem;
  padding: 0.7rem 1.75rem;
  border-radius: 6px;
}

.cta-card .md-button--primary:hover {
  background: #c73a52 !important;
  border-color: #c73a52 !important;
}

/* Suppress any pseudo-element content on CTA containers.
   If "Center Here" placeholder text was added via CSS content,
   this will clear it. If it appears in the HTML of index.md,
   it must be removed there directly. */
.cta-card::before,
.cta-card::after,
.two-col.cta-col::before,
.two-col.cta-col::after {
  content: none !important;
  display: none !important;
}


/* ============================================================
   11. HOME PAGE -- BUTTON MODIFIER
   ============================================================ */

.md-button--lg {
  font-size: 1.05rem !important;
  padding: 0.75rem 2rem !important;
}


/* ============================================================
   12. SEE IT WORK -- PATH CARDS
   ============================================================ */

.path-cards > details {
  border: 2px solid var(--md-primary-fg-color);
  border-radius: 8px;
  margin-bottom: 1.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
  overflow: hidden;
}

.path-cards > details:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14);
  border-color: var(--md-accent-fg-color);
}

/* Summary bar */
.path-cards > details > summary {
  font-size: 1.1rem;
  font-weight: 600;
  padding: 1rem 1.25rem;
  background: var(--md-primary-fg-color);
  color: var(--md-primary-bg-color);
  cursor: pointer;
  transition: background 0.2s ease;
}

.path-cards > details > summary:hover {
  background: var(--md-accent-fg-color);
}

/* Remove default Material details icon and text */
.path-cards > details > summary::before {
  display: none;
}

/* Card body */
.path-cards > details > .admonition-content,
.path-cards > details > div {
  padding: 1rem 1.5rem;
}

/* Closed state indicator */
.path-cards > details:not([open]) > summary::after {
  content: "Click to expand";
  display: inline;
  float: right;
  font-size: 0.8rem;
  font-weight: 400;
  opacity: 0.8;
}

/* Open state indicator */
.path-cards > details[open] > summary::after {
  content: "Click to collapse";
  display: inline;
  float: right;
  font-size: 0.8rem;
  font-weight: 400;
  opacity: 0.8;
}


/* ============================================================
   13. SEE IT WORK -- QUESTION BLOCKS
   ============================================================ */

.path-cards blockquote {
  border-left: 3px solid var(--md-accent-fg-color);
  background: var(--md-code-bg-color);
  padding: 0.75rem 1rem;
  margin: 0.75rem 0;
  border-radius: 0 4px 4px 0;
}


/* ============================================================
   14. SEE IT WORK -- CTA BUTTONS
   ============================================================ */

.path-cards .md-button {
  display: inline-block;
  margin-top: 1rem;
}

/* Light mode -- override admonition tip color on path-card summaries */
[data-md-color-scheme="default"] .path-cards > details > summary {
  background: var(--md-primary-fg-color);
  color: var(--md-primary-bg-color);
}

[data-md-color-scheme="default"] .path-cards > details > summary:hover {
  background: var(--md-accent-fg-color);
  color: var(--md-primary-bg-color);
}

/* ============================================================
   15. DARK MODE -- GLOBAL OVERRIDES
   ============================================================ */

[data-md-color-scheme="slate"] .path-cards > details {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

[data-md-color-scheme="slate"] .path-cards > details:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}

/* Ensure section text is readable in dark mode */
[data-md-color-scheme="slate"] .home-section p,
[data-md-color-scheme="slate"] .home-section li,
[data-md-color-scheme="slate"] .home-section h2,
[data-md-color-scheme="slate"] .home-section h3 {
  color: var(--md-default-fg-color);
}


/* ============================================================
   16. RESPONSIVE -- MOBILE
   ============================================================ */

@media (max-width: 768px) {
  .hero {
    padding: 4rem 1.5rem 3.5rem;
  }

  .hero h1 {
    font-size: 2rem;
  }

  .home-section {
    padding: 3rem 1.5rem;
  }

  .phase-grid {
    grid-template-columns: 1fr;
  }

  .outcome-grid ul {
    grid-template-columns: 1fr;
  }

  .two-col,
  .two-col.cta-col {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}