/* ====================================================
   Cap to Quad — Bootstrap 5 Variable Overrides
   ====================================================
   Loaded AFTER: bootstrap.min.css, style.min.css, palette.css
   Purpose: Rebrand Landrick theme to our brand palette
   
   Our palette (from css/palette.css):
   --color-primary:      #0b426f
   --color-accent:       #3b729f
   --color-secondary:    #98b4cc
   --color-text:         #333
   --color-beige:        #eae7dc
   --color-pale-accent:  #f0f5fa
   --color-yellow-accent:#f8be2e
   --color-gold-accent:  #c59c47
   --color-footer:       #666
   ==================================================== */

:root {
  /* ---- Brand colors → Bootstrap theme colors ---- */
  --bs-primary:      #0b426f;
  --bs-secondary:    #98b4cc;
  --bs-warning:      #f8be2e;
  --bs-light:        #f0f5fa;
  --bs-dark:         #333333;
  --bs-footer:       #666666;

  /* Keep Landrick's functional colors */
  --bs-success:      #2eca8b;
  --bs-info:         #17a2b8;
  --bs-danger:       #e43f52;

  /* ---- RGB equivalents (required for Bootstrap opacity utilities) ---- */
  --bs-primary-rgb:     11, 66, 111;
  --bs-secondary-rgb:   152, 180, 204;
  --bs-warning-rgb:     248, 190, 46;
  --bs-light-rgb:       240, 245, 250;
  --bs-dark-rgb:        51, 51, 51;
  --bs-footer-rgb:      102, 102, 102;
  --bs-beige-rgb:       234, 231, 220;

  /* ---- Fonts ---- */
  --bs-font-sans-serif:   'Poppins', Tahoma, sans-serif;
  --bs-body-font-family:  var(--bs-font-sans-serif);

  /* ---- Links ---- */
  --bs-link-color:       var(--bs-primary);
  --bs-link-color-rgb:   11, 66, 111;
  --bs-link-hover-color: #0a3a60;
  --bs-link-hover-color-rgb: 10, 58, 96;

  /* ---- Body ---- */
  --bs-body-color:       #333333;
  --bs-body-bg:          #ffffff;
}

/* ---- Brand typography overrides ---- */

/* Display / Hero */
h1.heading {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 44px;
  line-height: 56px;
}

/* H2 / Section Heading */
h4.title {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 30px;
  line-height: 38px;
}

/* H1 / Page Heading (inner pages) */
h1.title {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  color: var(--color-primary);
}

/* H4 / Card Title */
.features h5 {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 28px;
  color: var(--color-primary);
}

/* H5 / Modal Title (footer heads) */
h5.footer-head {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 26px;
}

/* H6 / Small Heading (testimonial names) */
h6 {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
}

/* Body Large (hero subtitle, section descriptions) */
p.para-desc {
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 30px;
  max-width: 640px;
}

.text-muted {
  color: var(--color-footer) !important;
}

.text-accent {
  color: var(--color-accent) !important;
}

.text-gold-accent {
  color: var(--color-gold-accent) !important;
}

.text-primary {
  color: var(--color-primary) !important;
}

a.text-primary {
  text-decoration: none;
}

a.text-primary:hover, a.text-primary:focus, a.text-primary:active {
  color: #3C6FA9 !important;
}

.text-primary > i {
  color: var(--color-primary) !important;
}

.modal-body p {
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 28px;
}
.modal-body p strong {
  font-weight: 600;
  color: var(--color-accent) !important;
}

@media (max-width: 767px) {
  .d-none-mobile {
    display: none !important;
  }
  .d-block-mobile {
    display: block !important;
  }
  .mt-mobile-0 {
    margin-top: 0 !important;
  }
}

/* Body Text (feature descriptions, body paragraphs) */
.features p,
.section-title p:not(.para-desc) {
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 28px;
}

/* Caption / Meta (footer text, copyright) */
.footer p,
.footer-bar p {
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
}

/* FAQ answers and pricing card feature lists */
p.answer,
.card.pricing ul li {
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
}

/* Navigation links */
.navigation-menu > li > a {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 500 !important;
  font-size: 16px !important;
  line-height: 28px !important;
  color: var(--color-primary) !important;
  text-transform: unset !important;
}

#topnav .navigation-menu > li:hover > a {
  color: var(--color-gold-accent) !important;
}
#topnav .navigation-menu > li.active > a {
  color: var(--color-accent) !important;
}

#topnav.nav-sticky {
  background: var(--color-beige) !important;
}
/* ---- Button overrides ---- */

.btn-primary {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: var(--color-accent) !important;
  border-color: var(--color-accent) !important;
  color: #fff !important;
}

.btn-soft-primary {
  background-color: rgba(var(--bs-primary-rgb), 0.1) !important;
  border-color: rgba(var(--bs-primary-rgb), 0.1) !important;
  color: var(--color-primary) !important;
}

.btn-soft-primary:hover,
.btn-soft-primary:focus,
.btn-soft-primary:active {
  background-color: rgba(var(--bs-primary-rgb), 0.2) !important;
  border-color: rgba(var(--bs-primary-rgb), 0.2) !important;
  color: var(--color-primary) !important;
}

.btn-outline-primary {
  background-color: transparent;
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: #fff !important;
}

/* ---- Additional custom tweaks ---- */

/* Override Landrick's hardcoded body font-family (style.min.css sets Nunito directly) */
body {
  font-family: var(--bs-body-font-family);
}

.title-heading .heading {
  color: var(--color-primary);
}

.section-title h4.title {
  color: var(--color-primary);
}

.bg-dark .section-title h4.title {
  color: unset;
}

/* Hero background */
section.bg-home::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('/assets/images/saas/home-shape-theme.png');
  background-size: cover;
  background-position: center;
  opacity: 0.7; /* Adjust this value (0.0 to 1.0) */
  z-index: -1; /* Sends the image behind the content */
}

.bg-light {
  background: rgba(var(--bs-light-rgb), 0.8) !important;
}

.bg-dark {
  background: var(--color-primary) !important;
  color: #fff !important;
}

.bg-dark p.para-desc {
  color: var(--color-secondary) !important;
}

i.gold-icon,
.gold-icon svg {
  color: var(--color-gold-accent) !important;
  stroke: var(--color-gold-accent) !important;
}

i.accent-icon,
.accent-icon svg {
  color: var(--color-accent) !important;
}

i.primary-icon,
.primary-icon svg {
  color: var(--color-primary) !important;
}

/* Smooth feature card shape rotation (no jump on loop) */
@keyframes feature-shape-spin {
  from { transform: rotate(33.75deg); }
  to { transform: rotate(393.75deg); }
}

.features.feature-primary:hover .image::before {
    /* background: rgba(var(--bs-beige-rgb), .35); */
    background: linear-gradient(45deg, transparent, rgba(var(--bs-beige-rgb), 0.8))
}

.features.feature-primary .image::before {
  background: linear-gradient(45deg, transparent, rgba(var(--bs-beige-rgb), 0.8))
}

.features:hover .image::before {
  animation: feature-shape-spin 5s linear infinite !important;
}

/* Push rotating shapes behind icons */
.features .image::before {
  z-index: -1;
}

.features .image i {
  position: relative;
  z-index: 1;
}

/* Navbar — keep all items on one line */
#topnav .container {
  display: flex !important;
  align-items: center;
  flex-wrap: nowrap;
}
#topnav #navigation {
  flex: 1;
}

/* Mobile CTA links in hamburger menu — hidden on desktop */
#topnav .navigation-menu > li.mobile-cta {
  display: none !important;
}

/* Mobile menu slide animation */
@media (max-width: 991px) {
  #topnav {
    background-color: transparent !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
  }
  #topnav .navbar-toggle span {
    background-color: var(--color-primary);
  }
  #topnav .menu-extras {
    margin-left: auto;
  }
  #topnav .buy-button {
    display: none !important;
  }
  #topnav #navigation {
    display: block !important;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.35s ease, opacity 0.25s ease;
  }
  #topnav #navigation.open {
    max-height: 500px;
    opacity: 1;
  }
  #topnav .navigation-menu > li.mobile-cta {
    display: block !important;
  }
  #topnav .navigation-menu > li.mobile-cta a {
    font-weight: 600;
  }
  #topnav .navigation-menu > li.mobile-cta-border {
    border-top: 1px solid #e9ecef;
  }
}

/* Navbar logo sizing */
#topnav .logo img {
  width: 250px;
  height: auto;
  margin-top: 0.3em;
}

/* Testimonials */
.card > h6.text-primary {
  color: var(--color-accent) !important;
}

/* Footer */
.c2q-footer img {
  margin-left: -1.0%;
  width: 102%;
}

footer.footer {
  background: var(--color-primary);
}

.footer .footer-bar {
  border-top: 1px solid var(--color-gold-accent);
}

.back-to-top {
  background: var(--color-accent);
}

@media (max-width: 767px) {
  #topnav .logo img {
    width: 200px;
  }
  /* Feature cards: icon + text side by side on mobile */
  #feat-overview-section {
    padding-top: 40px !important;
  }
  #feat-overview-section .mt-5 {
    margin-top: 2rem !important;
  }
  #feat-overview-section .mt-60 {
    margin-top: 30px;
    padding-top: 30px;
    border-top: 1px solid var(--color-beige);
  }
  .features.feature-primary {
    display: flex;
    align-items: flex-start;
    gap: 12px;
  }
  .features.feature-primary .image::before {
    display: none;
  }
  .features.feature-primary .image {
    flex-shrink: 0;
    margin-top: -2px;
  }
  .features.feature-primary .image i {
    font-size: 1.5rem !important;
  }
  .features.feature-primary .content {
    margin-top: 0 !important;
  }
}

/* Hero image → Trust section overlap clearance */
/* Keep the 60px visual overlap, but ensure text never gets covered */
.bg-home .home-dashboard img {
  max-height: 65vh;
  width: auto;
  object-fit: contain;
}

/* Trust section: enough top padding to clear the overlapping image */
#trust-section {
  padding-top: 120px;
}

@media (max-height: 800px) {
  .bg-home .home-dashboard img {
    max-height: 58vh;
  }
}

@media (max-height: 650px) {
  .bg-home .home-dashboard img {
    max-height: 50vh;
  }
}

/* Pricing page hero — compact padding */
.pricing-hero {
  padding-top: 140px;
  padding-bottom: 80px;
}

@media (max-width: 767px) {
  .pricing-hero {
    padding-top: 105px;
    padding-bottom: 50px;
  }
}

/* Pricing page cards */
.pricing.pricing-primary.business-rate:hover {
  border-color: var(--color-accent) !important;
}
.pricing.pricing-primary .icon, .pricing.pricing-primary .name {
  color: var(--color-accent) !important;
}
.pricing .price-row span {
  color: var(--color-primary) !important;
}

/* Pricing FAQ */
#pricing-faq-section h5 {
  color: var(--color-primary) !important;
}

/* Contact Page */
#contact-cards-section {
  padding-bottom: 50px;
}

#contact-illustration-section {
  padding-top: 0px;
}

#contact-illustration-section h4.card-title {
  color: var(--color-primary) !important;
}

.features.feature-primary .read-more {
  color: var(--color-accent) !important;
}

@media (max-width: 767px) {
  .contact-card {
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--color-beige);
  }
  .contact-card:last-of-type {
    padding-bottom: unset;
    border-bottom: unset;
  }
  #contact-cards-section {
    padding-bottom: 1rem;
  }
}

/* Override Landrick team card hover for images without social icons */
.team:hover img.no-hover {
  box-shadow: none;
  -webkit-box-shadow: none;
  opacity: 1;
}

/* Bio modal portrait */
.bio-modal-portrait {
  width: 100px;
  height: 100px;
  object-fit: cover;
}

/* Feature card modal trigger */
.feature-modal-trigger {
  cursor: pointer;
}

/* Our Story photo placeholder */
.story-photo-placeholder {
  background-color: var(--bs-light);
  color: var(--bs-secondary);
  font-size: 0.875rem;
  text-align: center;
  padding: 3rem 1rem;
}

/* Bio modal header */
.about-modal-header {
  background: var(--color-primary);
  color: var(--color-pale-accent);
  border-radius: 6px 6px 0 0;
}
.about-modal-title {
  color: var(--color-pale-accent);
}
.modal-header .btn-close {
  opacity: 1;
  color: #fff;
  font-size: 1.6rem;
  display: flex;
  align-items: center;
}
.team.team-primary .name:hover {
  color: var(--color-accent) !important;
}

/* FAQ Page Styles */
.accordion .accordion-item .accordion-button.collapsed {
  color: var(--color-primary) !important;
}
.accordion .accordion-item .accordion-button:not(.collapsed) {
  color: var(--color-accent) !important;
}
div.accordion-collapse {
  font-family: var(--font-text) !important;
}

/* Privacy Policy and TOS Page Styles */
#support-section h2 {
  color: var(--color-primary);
  font-family: var(--font-heading);
}
#support-section p.text-muted,
#support-section ul {
  color: var(--color-footer);
  font-family: var(--font-text);
}
#support-section ul li {
  margin-bottom: 0.5em;
}
#support-section ul li:last-of-type {
  margin-bottom: unset;
}
#support-section p a:hover {
  color: var(--color-accent) !important;
}

.nav-coming-soon {
  display: none !important;
}

/* ====================================================
   FAQ Sidebar Table of Contents
   ==================================================== */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
}

.faq-toc-sticky {
  position: sticky;
  top: 120px;
}

.faq-toc-sidebar {
  margin-right: calc(var(--bs-gutter-x) * .5);
  border-right: 1px solid var(--color-beige);
}

.toc-header {
  color: var(--color-primary) !important;
}

.faq-toc-list li {
  margin-bottom: 4px;
}

.faq-toc-list li a {
  display: block;
  padding: 4px 8px 4px 4px;
  color: var(--color-footer);
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}

.faq-toc-list li a:hover {
  color: var(--color-primary);
}

.faq-toc-list li a.faq-toc-active {
  color: var(--color-primary);
  border-left-color: var(--color-primary);
  font-weight: 600;
}