/* =============================================
   Virginia Breeze Reskin — Homepage Only
   Matches Figma: 2330 DRPT Virginia Breeze Website
   ============================================= */

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&display=swap');

:root {
  --reskin-navy: #1e1852;
  --reskin-navy-light: #2c2e65;
  --reskin-pink: #e63789;
  --reskin-blue: #5BC2E7;
  --reskin-blue-hover: #49a8cc;
  --reskin-teal: #40c1ac;
  --reskin-teal-dark: #2a9d8f;
  --reskin-white: #ffffff;
  --reskin-light-bg: #f7f7f9;
  --reskin-dark-text: #1a1a2e;
}

/* ================================================
   A. TRANSPARENT NAV — homepage only
   The tophat keeps its normal dark background.
   Only the navbar is transparent over the hero.
   ================================================ */

/* Navbar: transparent, overlays the hero */
body.home .navbar__outer,
body.front-page .navbar__outer {
  position: relative;
  width: 100%;
  z-index: 1000;
  background: transparent !important;
}

body.home .navbar__outer .navbar,
body.front-page .navbar__outer .navbar {
  background: transparent !important;
}

body.home .navbar__outer .navbar__wrap,
body.front-page .navbar__outer .navbar__wrap {
  background: transparent !important;
}

/* Hero pulls up behind the navbar only (not the tophat) */
body.home .reskin-hero {
  margin-top: -127px;
  position: relative;
  z-index: 0;
}

body.home .navbar__outer .navbar-brand img,
body.front-page .navbar__outer .navbar-brand img {
  filter: brightness(0) invert(1);
}

body.home .navbar__outer .navbar-nav > li > a,
body.front-page .navbar__outer .navbar-nav > li > a {
  color: var(--reskin-white) !important;
}

body .navbar__outer .navbar-nav > li.navbar__cta > a{
  background-color: var(--reskin-blue) !important;
  border-color: var(--reskin-blue) !important;
  color: var(--reskin-navy) !important;
  border-radius: 50px;
  padding: 8px 20px !important;
  font-weight: 400;
  font-weight: bold;
}


.navbar__cta a[target='_blank']::after {
  right: 6px;
  content: none!important;
}

body.home .navbar__outer .navbar-toggler span,
body.home .navbar__outer .navbar-toggler span::before,
body.home .navbar__outer .navbar-toggler span::after,
body.front-page .navbar__outer .navbar-toggler span,
body.front-page .navbar__outer .navbar-toggler span::before,
body.front-page .navbar__outer .navbar-toggler span::after {
  background-color: var(--reskin-white);
}

body.home .navbar__tagline,
body.front-page .navbar__tagline {
  display: none;
}

/* ================================================
   B. HERO CAROUSEL
   ================================================ */
.reskin-hero {
  position: relative;
  overflow: hidden;
  min-height: 620px;
}



.reskin-hero .carousel {
  border-bottom: none;
}

.reskin-hero .carousel-item {
  position: relative;
}

.reskin-hero .carousel-item__bg {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-size: cover;
  background-position: center right;
}

/* Gradient overlay: two Figma layers stacked */
.reskin-hero .carousel-item__overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background:
    linear-gradient(180deg, rgba(21, 23, 67, 0.931) 8.6%, rgba(88, 92, 203, 0) 60.87%),
    linear-gradient(90deg, rgba(44, 46, 101, 0.8) 30.11%, rgba(44, 46, 101, 0) 50.01%);
  z-index: 1;
}


/* Slanted bottom edge — hidden on homepage since banner card floats over transition */
.reskin-hero__slant {
  display: none;
}

.reskin-hero .carousel-item__content {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: flex-end;
  width: 100%;
  min-height: 620px;
  padding: 180px 0 160px;
}

.reskin-hero .carousel-item__text {
  max-width: 550px;
  color: var(--reskin-white);
}

/* Label text above the headline (e.g. "NEW ROUTE") */
/* Figma: Gotham, weight 350 (Medium), 37.66px */
.reskin-hero .carousel-item__label {
  display: block;
  font-family: "Gotham A", "Gotham B", Montserrat, sans-serif;
  font-size: 1.6rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0;
  color: var(--reskin-white);
  margin-bottom: 0.1rem;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6), 0 4px 17px rgba(0, 0, 0, 0.4);
}

/* Figma: BigNoodleTitling Regular, 127.78px, weight 400 */
/* Using Oswald as fallback until BigNoodleTitling Regular is added to theme */
.reskin-hero .carousel-item__text h1 {
  font-family: Oswald, sans-serif;
  font-size: 5.5rem;
  font-weight: 400;
  line-height: 1;
  margin-bottom: 0.4rem;
  color: var(--reskin-white);
  text-transform: uppercase;
  letter-spacing: 0;
  max-width: 550px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6), 0 4px 17px rgba(0, 0, 0, 0.4);
}

/* Figma: Gotham, subtitle text */
.reskin-hero .carousel-item__text p {
  font-family: "Gotham A", "Gotham B", Montserrat, sans-serif;
  font-size: 1.1rem;
  line-height: 1.5;
  margin-top: 1rem;
  margin-bottom: 1.5rem;
  color: rgba(255, 255, 255, 0.9);
  letter-spacing: 0.02em;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6), 0 4px 17px rgba(0, 0, 0, 0.4);
}

.reskin-hero .btn-hero {
  display: inline-block;
  background-color: var(--reskin-blue);
  color: var(--reskin-navy);
  font-family: "Gotham A", "Gotham B", Montserrat, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 12px 28px;
  border-radius: 50px;
  border: none;
  font-size: 0.8rem;
  transition: background-color 0.3s ease;
  text-decoration: none;
}

.reskin-hero .btn-hero:after {
  content: none
}

.reskin-hero .btn-hero:hover,
.reskin-hero .btn-hero:focus {
  background-color: var(--reskin-blue-hover);
  color: var(--reskin-navy);
  text-decoration: none;
}

/* Carousel indicators */
.reskin-hero .carousel-indicators {
  bottom: 120px;
  z-index: 6;
  margin-bottom: 0;
}

.reskin-hero .carousel-indicators li,
.reskin-hero .carousel-indicators button {
  width: 12px; height: 12px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.4);
  border: 2px solid var(--reskin-white);
  margin: 0 5px;
}

.reskin-hero .carousel-indicators .active {
  background-color: var(--reskin-white);
}

/* ================================================
   C. ROUTE LISTING — matches Figma exactly
   ================================================ */

/* --- Floating banner card (overlaps hero and route list) --- */
.reskin-routes__banner {
  position: relative;
  z-index: 10;
  padding: 0;
  background: transparent;
  position: relative;
}
.reskin-routes__banner, .reskin-routes__list{
  max-width: 955px;
  margin: auto;
}
.reskin-routes__banner > .container {
  position: relative;
}

.reskin-routes__banner-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: var(--reskin-white);
  padding: 20px 32px;
  margin-top: -40px;
}
@media(max-width: 767px){
  .reskin-routes__banner > .container{
    padding: 0;
  }
  .reskin-routes__banner{
    margin-top: 4rem;
    background: var(--reskin-white);
  }
}
@media (min-width: 768px){
  .reskin-routes__banner-inner{
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
  }
}

.reskin-routes__banner-text h2 {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--reskin-navy);
  margin: 0 0 4px 0;
  font-weight: 700;
}
@media (max-width: 767px){
  .reskin-routes__banner-text h2 {
    font-size: 20px;
  }
  body.home .carousel-item{
    min-height: 0!important;
  }
}
@media (min-width: 768px){
  .reskin-routes__banner-text h2 {
    font-size: 24px;
  }
  .reskin-hero .carousel,
  .reskin-hero .carousel-inner,
  .reskin-hero .carousel-item {
    min-height: 620px;
  }
}

.reskin-routes__banner-text p {
  font-size: 20px;
  color: #666;
  margin: 0;
}

.btn-explore {
  display: inline-block;
  background-color: var(--reskin-blue);
  color: var(--reskin-navy);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 12px 28px;
  border-radius: 50px;
  border: none;
  font-size: 0.85rem;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.3s ease;
}

.btn-explore:hover,
.btn-explore:focus {
  background-color: var(--reskin-blue-hover);
  color: var(--reskin-navy);
  text-decoration: none;
}

/* --- Gradient swoosh background on entire routes section --- */
.reskin-routes {
  background-image: url('../visuals/gradient-swoosh-bg.svg');
  background-size: cover;
  background-position: top left;
  background-repeat: no-repeat;
  position: relative;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 5vw), 0 100%);
  padding-bottom: 5vw;
}
@media (max-width: 767px){
  .reskin-routes {
    margin-top: -26vh;
  }
}
@media (min-width: 768px){
  .reskin-routes {
    margin-top: -150px;
  }
}
@media (min-width: 992px){
  .reskin-routes {
    margin-top: -150px;
  }
}
@media (min-width: 1226px){
  .reskin-routes {
    padding-top: 8vw;
    margin-top: -11vw;
  }
}

/* --- Route list area --- */
.reskin-routes__list {
  padding: 20px 0 60px;
}

/* --- Route path container (no dashed line) --- */
.reskin-routes__path {
  position: relative;
  padding-left: 0;
}

/* --- Individual route row --- */
.reskin-route-row {
  position: relative;
  margin-bottom: 16px;
}

.reskin-route-row--last {
  margin-bottom: 0;
}

/* Hide external dot — dot is now inside the card */
.reskin-route-row__dot {
  display: none;
}

/* --- Route card --- */
.reskin-route-row__card {
  display: flex;
  align-items: center;
  background: var(--reskin-white);
  border-radius: 50px;
  border: none;
  overflow: hidden;
  min-height: 64px;
  transition: box-shadow 0.2s ease;
  text-decoration: none;
  box-shadow: 0px 10.27px 20.53px 0px #00000033;
}

.reskin-route-row__card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

/* Route thumbnail image on left */
.reskin-route-row__image {
  width: 21%;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  border-radius: 50px 0 0 50px;
  order: -1;
  align-self: stretch;
  display: flex;
  aspect-ratio: 212/86
}

.reskin-route-row__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Route info (dot + name + separator + cities) */
.reskin-route-row__info {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px 12px 16px;
  flex-wrap: wrap;
}

/* Map pin icon inside the card */
.reskin-route-row__pin {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.reskin-route-row__name {
  font-family: BigNoodleTitling-Oblique, Oswald, sans-serif;
  font-size: 30px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* Separator bar between name and cities */
.reskin-route-row__name::after {
  content: '|';
  margin-left: 10px;
  color: #ccc;
  font-weight: 300;
  font-family: sans-serif;
}

/* Route name color */
.reskin-route-row__name { color: #E63789; }

.reskin-route-row__cities {
  font-size: 19px;
  color: #555;
}

.reskin-route-row__badge {
  display: inline-block;
  background-color: var(--reskin-blue);
  color: var(--reskin-navy);
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 4px 10px;
  border-radius: 3px;
  line-height: 1;
}

/* Blue action circle with search icon on the right of each card */
.reskin-route-row__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: var(--reskin-blue);
  flex-shrink: 0;
  margin-right: 16px;
}

/* ================================================
   D. INFO BLOCKS (Passenger Information)
   ================================================ */
body.home .icon-block__section,
body.front-page .icon-block__section {
  background-color: var(--reskin-white);
  padding: 50px 0 30px;
}

body.home .icon-block__section::before,
body.front-page .icon-block__section::before {
  display: none;
}

body.home .icon-block,
body.front-page .icon-block {
  background: var(--reskin-white);
  padding: 24px 0;
  margin-bottom: 12px;
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

body.home .icon-block__img,
body.front-page .icon-block__img {
  flex-shrink: 0;
  width: 48px;
}

body.home .icon-block__img img,
body.front-page .icon-block__img img {
  width: 48px;
  height: auto;
}

body.home .icon-block__content h2,
body.front-page .icon-block__content h2 {
  font-size: 28px;
  font-weight: 700;
  color: var(--reskin-navy);
  margin-bottom: 6px;
}

body.home .icon-block__content p,
body.front-page .icon-block__content p {
  font-size: 18px;
  color: #555;
  line-height: 1.6;
  margin-bottom: 10px;
}

body.home .icon-block__content .btn-text,
body.front-page .icon-block__content .btn-text {
  color: #E63789;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 18px;
  letter-spacing: 0.05em;
}

body.home .icon-block__footnotes,
body.front-page .icon-block__footnotes {
  margin-top: 20px;
  font-size: 0.8rem;
  color: #888;
  line-height: 1.6;
}

/* ================================================
   E. BUS TRACKER
   ================================================ */
.reskin-tracker {
  position: relative;
  overflow: hidden;
  padding: 100px 0 250px;
  background-image: url('../visuals/footer-bus.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  clip-path: polygon(0 0, 100% 5vw, 100% 100%, 0 100%);
  min-height: 30vw;
}

/* Semi-transparent navy overlay — bus shows through the top portion */
.reskin-tracker__bg {
  display: block;
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: #2C2E65E0;
  pointer-events: none;
  z-index: 1;
}

/* footer-bg.svg in bottom 60%: opaque navy + teal diagonal accent line */
.reskin-tracker::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 100%;
  height: 45%;
  background-image: url('../visuals/footer-bg.svg');
  background-size: 100% auto;
  background-position: top left;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 2;
}

.reskin-tracker__content {
  position: relative;
  z-index: 3;
  color: var(--reskin-white);
  text-align: left;
  max-width: 700px;
  padding-top: 5vw;
}

.reskin-tracker__content h2,
.reskin-tracker__content h3,
.reskin-tracker__content p {
  color: var(--reskin-white);
}

.reskin-tracker__content a {
  color: var(--reskin-blue);
}

/* Hide old general-content styling if it leaks */
body.home .general-content {
  display: none;
}

/* ================================================
   F. GUTENBERG ACCORDION — match partner-toolkit style
   ================================================ */
.wp-block-accordion {
  display: flex;
  flex-direction: column;
  margin: auto;
}

.wp-block-accordion-heading {
  margin: 0;
}

.wp-block-accordion-heading__toggle {
  display: flex;
  align-items: center;
  width: 100%;
  margin-bottom: 1.875rem;
  padding: 0.625rem;
  border: none;
  border-bottom: 0;
  background: transparent;
  color: #2c2e65;
  font-size: inherit;
  font-weight: inherit;
  text-align: left;
  cursor: pointer;
}

.wp-block-accordion-heading__toggle::before {
  content: '';
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 14px;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='650' height='650' viewBox='50 50 650 650'%3E%3Cpath fill='%232c2e65' stroke='rgba(0,0,0,0)' stroke-width='0' d='M338.9,339.9V94.6c0-19.4,16.2-35.1,36.1-35.1s36.1,15.7,36.1,35.1v245.4h252.8c19.9,0,36.1,15.7,36.1,35.1s-16.2,35.1-36.1,35.1H411.1v245.4c0,19.4-16.2,35.1-36.1,35.1s-36.1-15.7-36.1-35.1V410.1H86.1 C66.2,410.1,50,394.4,50,375s16.2-35.1,36.1-35.1H338.9z'/%3E%3C/svg%3E");
  background-size: 18px;
  background-repeat: no-repeat;
  background-position: center;
  margin-right: 1.25rem;
}

.wp-block-accordion-heading__toggle[aria-expanded="true"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='650' height='650' viewBox='50 50 650 650'%3E%3Cpath fill='%232c2e65' stroke='rgba(0,0,0,0)' stroke-width='0' d='M663.9,327c21.7,0,36.1,14.4,36.1,36.1s-14.4,36.1-36.1,36.1H86.1c-21.7,0-36.1-14.4-36.1-36.1 S64.4,327,86.1,327H663.9z'/%3E%3C/svg%3E");
}

.wp-block-accordion-heading__toggle:focus,
.wp-block-accordion-heading__toggle:hover,
.wp-block-accordion-heading__toggle[aria-expanded="true"] {
  background: #dbf2fa;
  color: #2c2e65;
}

.wp-block-accordion-heading__toggle-icon {
  display: none;
}

.wp-block-accordion-panel {
  padding: 0 0.625rem 1rem 3.375rem;
}

/* ================================================
   RESPONSIVE — Tablet
   ================================================ */
@media (max-width: 991px) {
  .reskin-hero .carousel-item__text h1 {
    font-size: 4.5rem;
  }

  .reskin-hero .carousel-item__label {
    font-size: 1.3rem;
  }

  .reskin-routes__banner-inner {
    flex-direction: column;
    text-align: center;
    gap: 16px;
  }

  .reskin-route-row__image {
    width: 160px;
  }

  .reskin-route-row__name {
    font-size: 0.95rem;
  }
}

/* ================================================
   RESPONSIVE — Mobile
   ================================================ */
@media (max-width: 767px) {
  body.home .navbar__outer,
  body.front-page .navbar__outer {
    background: var(--reskin-navy) !important;
  }

  body.home .navbar__outer .navbar,
  body.front-page .navbar__outer .navbar,
  body.home .navbar__outer .navbar__wrap,
  body.front-page .navbar__outer .navbar__wrap {
    background: var(--reskin-navy) !important;
  }

  body.home .reskin-hero {
    margin-top: 0;
  }


  body.home .main-content .carousel:first-child{
    margin-top: 0;
  }
/*  .reskin-hero,
  .reskin-hero .carousel,
  .reskin-hero .carousel-inner,
  .reskin-hero .carousel-item {
    min-height: 600px;
  }  */

  .reskin-hero .carousel-item__content {
    min-height: 0;
    padding: 0;
  }

  .reskin-hero .carousel-item__text h1 {
    font-size: 3rem;
  }

  .reskin-hero .carousel-item__label {
    font-size: 1.1rem;
  }

  .reskin-hero .carousel-item__text p {
    font-size: 0.95rem;
  }

  .reskin-hero .carousel-indicators {
    bottom: 70px;
  }

  /* Routes */
  .reskin-route-row__card {
    border-radius: 16px;
    flex-wrap: wrap;
  }

  .reskin-route-row__image {
    width: 100%;
    height: 140px;
    border-radius: 16px 16px 0 0;
    order: -1;
  }

  .reskin-route-row__info {
    padding: 12px 16px;
  }

  .reskin-route-row__icon {
    margin-right: 12px;
  }

  /* Info blocks */
  body.home .icon-block,
  body.front-page .icon-block {
    flex-direction: column;
    text-align: center;
    align-items: center;
  }
}

@media (min-width: 1024px) {
     body.home .icon-block__section {
        margin-top: 0;
    }
}

.home-page .footer{
  border-top: none;
  position: relative;
  margin-top: -2px
}

.footer__links{
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  align-content: flex-start;
  display: flex;
}
@media (min-width: 1024px){
  .footer__links div.social{
    margin-right:0;
    margin-left:0
  }
}



.newroute{
  position: absolute;
  left: 0;
  top: -8px;
  width: 120px;
  margin: 0 20px;
  background-color: var(--reskin-pink);
  color: #fff;
  z-index: 1;
  text-align: center;
  font-weight: 350;
  font-style: Medium;
  font-size: 14px;
  line-height: 1em;
  white-space: nowrap;
  padding: 8px;
}
@media (min-width: 992px){
  .newroute{
    width: 100%;
  width: calc(21% - 40px);
    font-size: 18px;
  }
}