/**
 * BeVerified.io - Bootstrap 5 Theme Overrides
 * Clean, professional styling for certification verification platform
 */

/* === Color Variables === */
:root {
  --bv-primary: #667eea;
  --bv-primary-dark: #5568d3;
  --bv-dark: #1a1a2e;
  --bv-text: #2d3748;
  --bv-text-muted: #718096;
  --bv-bg-light: #f7fafc;
  --bv-border: #e2e8f0;
  --bv-white: #ffffff;
}

/* === Global === */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--bv-text);
  background-color: var(--bv-white);
}

/* === Skip link === */
.visually-hidden-focusable,
.skip-link,
a.skip-link {
  display: none !important;
}

/* === Main Header / Navbar === */
#header {
  background: var(--bv-white);
  border-bottom: 1px solid var(--bv-border);
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  /* Allow the overflowing logo to be visible above/below this row */
  overflow: visible;
}

/* === Menu Navbar === */
#navbar-main {
  background: var(--bv-white) !important;
  /* Logo sits absolute within the navbar; leave left room for it */
  padding: 0.25rem 1.5rem 0.25rem 220px;
  overflow: visible;
  position: relative;
}

/* Container must NOT be a positioned ancestor so the logo anchors to #navbar-main */
#navbar-main > .container,
#navbar-main > .container-fluid {
  position: static;
  overflow: visible;
}

/* Logo — absolutely positioned at the left edge of #navbar-main.
   Anchored to the top of the navbar row so it only overflows downward
   into the hero; centering it vertically (top: 50%) pushed half the
   logo above the document top when no admin toolbar is present. */
#navbar-main .navbar-brand {
  position: absolute;
  left: 1.5rem;
  top: 0.25rem;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: var(--bv-dark);
  padding: 0;
}

#navbar-main .navbar-brand:hover {
  color: var(--bv-primary);
}

/* Logo image — 3x the old 80px = 240px */
#navbar-main .navbar-brand .site-branding__logo {
  height: 240px;
  width: auto;
  display: block;
}

/* Slogan below logo */
#navbar-main .site-branding__slogan {
  font-size: 0.9rem;
  color: var(--bv-text-muted);
  font-style: italic;
  text-align: center;
  margin-top: 0.25rem;
  white-space: nowrap;
}

/* Main Nav Links */
#navbar-main .navbar-nav .nav-link {
  color: var(--bv-text) !important;
  font-weight: 500;
  padding: 0.5rem 1rem;
  font-size: 0.95rem;
  transition: color 0.2s;
}

#navbar-main .navbar-nav .nav-link:hover,
#navbar-main .navbar-nav .nav-link.active {
  color: var(--bv-primary) !important;
}

/* Sign In link - make it a button */
#navbar-main .navbar-nav .nav-link-internal-user-login {
  background: var(--bv-primary);
  color: var(--bv-white) !important;
  border-radius: 6px;
  padding: 0.45rem 1.25rem;
  margin-left: 0.5rem;
}

#navbar-main .navbar-nav .nav-link-internal-user-login:hover {
  background: var(--bv-primary-dark);
}

/* Toggler on dark background fix */
#navbar-main .navbar-toggler {
  border-color: var(--bv-border);
}

#navbar-main .navbar-toggler-icon {
  filter: invert(1);
}

#CollapsingNavbar {
  width: 100%;
}

/* === Highlighted Region (Messages) === */
.highlighted .section {
  padding: 0;
}

/* === Featured Top (Hero) === */
.featured-top {
  padding: 0;
  margin: 0;
  /* Hero sits below the navbar row; the logo overflows down into this area */
  position: relative;
  z-index: 0;
}

.featured-top__inner {
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Break hero out of Bootstrap container constraints */
.featured-top .container,
.featured-top .container-fluid,
.featured-top .container-sm,
.featured-top .container-md,
.featured-top .container-lg,
.featured-top .container-xl {
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

.featured-top .region-featured-top {
  margin: 0;
  padding: 0;
}

.certstore-hero-block {
  border-radius: 0;
  min-height: 520px;
}

/* Hero occupies 70% of the screen, anchored to the right so the logo
   column on the left sits beside it rather than on top of it */
.featured-top .certstore-hero-block {
  width: 70% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 2rem !important;
}

/* Cap hero text width within the 70% hero area, centred */
.certstore-hero-block .hero-content {
  max-width: 800px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* === Main Content Area === */
#main-wrapper {
  background: var(--bv-white);
}

/* Remove sidebar layout when sidebar is empty */
.layout-one-sidebar .row-offcanvas {
  display: block;
}

.layout-one-sidebar #sidebar_second:empty,
.layout-one-sidebar #sidebar_second:not(:has(.block:not([style*="display: none"]))) {
  display: none;
}

.layout-one-sidebar #sidebar_second {
  display: none;
}

.layout-one-sidebar .main-content {
  max-width: 100%;
  flex: 0 0 100%;
}

/* Remove excess container padding for marketing blocks */
.certstore-two-column-block,
.certstore-steps-block,
.certstore-value-prop-block,
.certstore-final-cta-block {
  margin-left: -15px;
  margin-right: -15px;
}

/* === Footer === */
.site-footer {
  background: var(--bv-bg-light) !important;
  color: var(--bv-text-muted) !important;
  padding: 2.5rem 0 1.5rem;
  margin-top: 0;
  border-top: 1px solid var(--bv-border);
  text-align: center;
}

/* Override Bootstrap theme's float-based 50% column regions */
.site-footer__top .region {
  float: none !important;
  width: 100% !important;
}

.site-footer__top {
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--bv-border);
  margin-bottom: 1rem;
}

.site-footer .block {
  width: 100%;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.site-footer .nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 2rem;
  justify-content: center;
  padding: 0;
  width: 100%;
}

.site-footer .nav-link {
  color: var(--bv-text-muted) !important;
  font-size: 0.9rem;
  padding: 0.35rem 0.5rem;
  transition: color 0.2s;
}

.site-footer .nav-link:hover {
  color: var(--bv-primary) !important;
}

/* Footer heading (menu title) */
.site-footer .block h2 {
  display: none;
}

/* Footer bottom - copyright area */
.site-footer__bottom {
  text-align: center;
  font-size: 0.8rem;
  color: var(--bv-text-muted);
  border-top: 1px solid var(--bv-border) !important;
  margin-top: 1rem;
}

.site-footer__bottom .block {
  margin: 0;
  border: none !important;
  padding: 0.5rem 0 !important;
}

/* === Breadcrumbs === */
.breadcrumb {
  background: transparent;
  padding: 0.75rem 0;
  margin: 0;
  font-size: 0.85rem;
}

/* === Front Page - Hide empty content article === */
.path-frontpage .node--type-page .node__content:empty {
  display: none;
}

.path-frontpage article.node--type-page {
  display: none;
}

/* === Buttons - Bootstrap integration === */
.certstore-hero-block .button--primary {
  background: var(--bv-white);
  color: var(--bv-primary);
  border-color: var(--bv-white);
  border-radius: 6px;
  font-size: 1.05rem;
  padding: 0.85rem 2.25rem;
}

.certstore-hero-block .button--primary:hover {
  background: rgba(255,255,255,0.9);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.2);
  color: var(--bv-primary);
}

.certstore-hero-block .button--secondary {
  border-radius: 6px;
  font-size: 1.05rem;
  padding: 0.85rem 2.25rem;
}

/* === Two column block polish === */
.certstore-two-column-block .column {
  background: var(--bv-bg-light);
  border: 1px solid var(--bv-border);
  border-radius: 12px;
  padding: 2.5rem;
  transition: transform 0.2s, box-shadow 0.2s;
}

.certstore-two-column-block .column:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.08);
}

/* === Steps block polish === */
.certstore-steps-block .step {
  border-radius: 12px;
  border: 1px solid var(--bv-border);
  transition: transform 0.2s, box-shadow 0.2s;
}

.certstore-steps-block .step:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.08);
}

/* === Final CTA block === */
#block-beverified-certstore-final-cta .certstore-final-cta-block {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  color: #ffffff;
  border-radius: 0;
  padding: 4rem 2rem;
}

#block-beverified-certstore-final-cta .final-cta-header {
  color: #ffffff;
}

#block-beverified-certstore-final-cta .button--primary {
  background: #ffffff;
  color: #667eea;
  border-color: #ffffff;
  border-radius: 6px;
}

#block-beverified-certstore-final-cta .button--primary:hover {
  background: rgba(255,255,255,0.9);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.2);
}

#block-beverified-certstore-final-cta .button--secondary {
  color: #ffffff;
  border-color: #ffffff;
  border-radius: 6px;
}

#block-beverified-certstore-final-cta .button--secondary:hover {
  background: rgba(255,255,255,0.15);
}

/* === Value prop sections - alternating backgrounds === */
#block-beverified-certstore-value-prop {
  background: var(--bv-bg-light);
  margin-left: -15px;
  margin-right: -15px;
  padding-left: 15px;
  padding-right: 15px;
}

/* === Section spacing === */
.block-certstore-two-column-block,
.block-certstore-steps-block,
.block-certstore-value-prop-block,
.block-certstore-trust-block,
.block-certstore-final-cta-block {
  margin-bottom: 0;
}

/* === Print === */
@media print {
  .site-footer,
  #navbar-top,
  .navbar-toggler {
    display: none;
  }
}

/* === Mobile polish === */
@media (max-width: 992px) {
  #navbar-main {
    padding: 0.35rem 1rem;
    overflow: visible;
  }

  #navbar-main .navbar-brand {
    position: static;
    transform: none;
    margin-right: 0.5rem;
    align-items: flex-start;
  }

  #navbar-main .navbar-brand .site-branding__logo {
    height: 72px;
    width: auto;
  }

  #navbar-main .site-branding__slogan {
    font-size: 0.75rem;
    margin-top: 0.15rem;
  }

  #CollapsingNavbar.navbar-collapse {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--bv-border);
    background: var(--bv-white);
  }

  #CollapsingNavbar .navbar-nav {
    gap: 0.1rem;
  }

  #CollapsingNavbar .navbar-nav .nav-link {
    padding: 0.55rem 0;
  }

  #CollapsingNavbar .navbar-nav .nav-link-internal-user-login {
    margin-left: 0;
    margin-top: 0.35rem;
    display: inline-block;
  }
}

@media (max-width: 768px) {
  /* On mobile: logo back to normal flow, compact size */
  #navbar-main {
    padding: 0.25rem 1rem;
    overflow: hidden;
  }

  #navbar-main .navbar-brand {
    position: static;
    transform: none;
  }

  #navbar-main .navbar-brand .site-branding__logo {
    height: 48px;
    width: auto;
  }

  #navbar-main .site-branding__slogan {
    display: none;
  }

  /* Hero full width on mobile */
  .featured-top .certstore-hero-block {
    width: 100% !important;
    margin-left: 0 !important;
    padding-left: 1rem !important;
  }

  .certstore-hero-block .hero-content {
    max-width: 100%;
  }
  
  .site-footer {
    padding: 2rem 0 1rem;
  }
  
  .site-footer .nav {
    flex-direction: column;
    align-items: center;
  }
}