/* =============================================================
   DESKTOP OVERRIDES (1025px+)
   Full desktop layout + corrected XXL behaviour
============================================================= */
@media (min-width: 1025px) {

  /* Match container-xxl width for consistency down to 1025px */
  .container,
  .container-xl {
      max-width: 1320px !important;
  }

  /* Keep 50/50 split */
  .col-xl-6 {
      flex: 0 0 50% !important;
      max-width: 50% !important;
  }

  /* DESKTOP NAVIGATION ----------------------------------- */
  .navbar-expand-xl .navbar-toggler {
      display: none !important;
  }

  .navbar-expand-xl .navbar-collapse {
      display: flex !important;
      flex-basis: auto !important;
  }

  .navbar-expand-xl .navbar-nav {
      flex-direction: row !important;
      justify-content: flex-end !important;
      text-align: right !important;
  }

  .navbar-expand-xl .navbar-nav .nav-item,
  .navbar-expand-xl .navbar-nav .nav-link {
      text-align: right !important;
  }
}


/* =============================================================
   DESKTOP TRANSITION FIXES (1025px–1199px)
============================================================= */
@media (min-width: 1025px) and (max-width: 1199.98px) {

  .static-top .navbar-collapse .nav > .divider-vertical {
      display: inline-block !important;
  }

  .navbar.navbar-expand-xl {
      padding-top: 0.75rem !important;
      padding-bottom: 0.75rem !important;
      min-height: 72px !important;
  }

  .navbar-expand-xl .navbar-brand {
      display: flex !important;
      align-items: center !important;
  }

  .navbar-expand-xl .custom-container,
  .navbar-expand-xl .container,
  .navbar-expand-xl .container-xl {
      padding-top: 0 !important;
      padding-bottom: 0 !important;
  }

  .navbar-expand-xl .navbar-brand img {
      display: block !important;
      margin: 0 !important;
      padding: 0 !important;
      height: auto;
  }

  .navbar-expand-xl .navbar-brand .siteTitle {
      line-height: 1 !important;
      margin-left: 0.5rem !important;
  }
}


/* =============================================================
   TABLET LAYOUT (768px–1024px)
   Applies ONLY to the TOP hero section + nav
============================================================= */
@media (min-width: 768px) and (max-width: 1024px) {

  /* NAVIGATION ------------------------------ */
  .navbar-expand-xl .navbar-toggler {
      display: block !important;
  }

  .navbar-expand-xl .navbar-collapse {
      display: none !important;
  }

  .navbar-expand-xl .navbar-collapse.show {
      display: block !important;
  }

  .navbar-expand-xl .navbar-nav {
      flex-direction: column !important;
  }

  .navbar-expand-xl .navbar-nav .nav-link {
      display: block !important;
      padding: 0.75rem 0;
  }

  /* LOGO ALIGNMENT FIX ----------------------- */
  .navbar.navbar-expand-xl {
      padding-top: 0.75rem !important;
      padding-bottom: 0.75rem !important;
      min-height: 72px !important;
  }

  .navbar-expand-xl .navbar-brand {
      display: flex !important;
      align-items: center !important;
  }

  .navbar-expand-xl .custom-container,
  .navbar-expand-xl .container,
  .navbar-expand-xl .container-xl {
      padding-top: 0 !important;
      padding-bottom: 0 !important;
  }

  .navbar-expand-xl .navbar-brand img {
      display: block !important;
      margin: 0 !important;
      padding: 0 !important;
      height: auto;
  }

  .navbar-expand-xl .navbar-brand .siteTitle {
      line-height: 1 !important;
      margin-left: 0.5rem !important;
  }

  /* =========================================================
     HERO SECTION ONLY
     Use :first-of-type so only the TOP hero block is affected
  ========================================================== */

  /* HERO background + top padding */
  .xrm-attribute-value > .row.sectionBlockLayout.text-start:first-of-type {
      background-position: 100% 10% !important;
      background-size: 1024px !important;
      padding-top: 20px !important;
  }

  /* HERO column width */
  .xrm-attribute-value > .row.sectionBlockLayout.text-start:first-of-type
  .col-lg-4.columnBlockLayout {
      flex: 0 0 100% !important;
      max-width: 100% !important;
      width: 720px !important;
  }

  /* HERO text stacking */
  .xrm-attribute-value > .row.sectionBlockLayout.text-start:first-of-type
  .ppFlexContainer,
  .xrm-attribute-value > .row.sectionBlockLayout.text-start:first-of-type
  .ppFlexContainer > div {
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      width: 100% !important;
  }

  /* HERO text gradient background */
  .xrm-attribute-value > .row.sectionBlockLayout.text-start:first-of-type
  .ppFlexContainer h1,
  .xrm-attribute-value > .row.sectionBlockLayout.text-start:first-of-type
  .ppFlexContainer h4,
  .xrm-attribute-value > .row.sectionBlockLayout.text-start:first-of-type
  .ppFlexContainer h5,
  .xrm-attribute-value > .row.sectionBlockLayout.text-start:first-of-type
  .ppFlexContainer p {
      display: inline-block;
      padding: 0.2rem 0.6rem;
      background: linear-gradient(
          to right,
          rgba(255, 255, 255, 0.0) 0%,
          rgba(255, 255, 255, 0.1) 30%,
          rgba(255, 255, 255, 0.1) 70%,
          rgba(255, 255, 255, 0.0) 100%
      );
  }
}


/* =============================================================
   MOBILE LAYOUT (0–767px)
   YYI on top, Parent Portal under, then hamburger
============================================================= */
@media (max-width: 767px) {

  /* NAV BEHAVIOUR ---------------------------------------- */
  .navbar-expand-xl .navbar-toggler {
      display: block !important;
  }

  .navbar-expand-xl .navbar-collapse {
      display: none !important;
  }

  .navbar-expand-xl .navbar-collapse.show {
      display: block !important;
  }

  .navbar-expand-xl .navbar-nav {
      flex-direction: column !important;
  }

  .navbar-expand-xl .navbar-nav .nav-link {
      display: block !important;
      padding: 0.75rem 0;
      text-align: left !important;
  }

  /* HEADER LAYOUT: stack and centre ---------------------- */

  /* Make all header wrappers column + centred */
  .navbar.navbar-expand-xl,
  .navbar-header,
  .navbar-expand-xl .custom-container,
  .navbar-expand-xl .container,
  .navbar-expand-xl .container-xl {
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      justify-content: center !important;
      width: 100% !important;
      padding: 0 !important;
  }

  /* Stack logo + title vertically, centred */
  .navbar-expand-xl .navbar-brand,
  .navbar-brand.navbar-header {
      display: flex !important;
      flex-direction: column !important;   /* logo on top, text under */
      align-items: center !important;
      justify-content: center !important;
      width: 100% !important;
      margin: 0 auto !important;
      text-align: center !important;
  }

  /* Logo spacing */
  .navbar-expand-xl .navbar-brand img {
      display: block !important;
      margin: 0 auto 0.25rem auto !important;  /* small gap under logo */
  }

  /* "Parent Portal" text */
  .navbar-brand .siteTitle,
  .navbar-brand .custom-sitetitle,
  .navbar-header .siteTitle,
  .navbar-header .custom-sitetitle {
      display: block !important;
      margin: 0 !important;
      text-align: center !important;
  }

  /* Hamburger on its own row, centred under brand */
  .navbar-expand-xl .navbar-toggler {
      align-self: center !important;
      margin-top: 0.4rem !important;
      margin-bottom: 0.6rem !important;
  }
}


/* =============================================================
   BUTTON STYLE BELOW 1024px
============================================================= */
@media (max-width: 1024px) {

    .button2 {
        background-color: rgba(206, 220, 234, 0.5) !important;
        border-color: #013558 !important;
        color: #013558 !important;
    }

    .button2:active {
        background-color: rgba(206, 220, 234, 0.8) !important;
        transform: scale(0.97);
    }

    .button2:focus {
        background-color: rgba(206, 220, 234, 0.75) !important;
        outline: none !important;
    }
}


/* Mobile: stack YYI logo and "Parent Portal" vertically */
@media (max-width: 767px) {

  .static-top.navbar-dark .navbar-brand.navbar-header .xrm-editable-html,
  .static-top.navbar-dark .navbar-brand.navbar-header .xrm-editable-html a {
      display: flex !important;
      flex-direction: column !important;   /* make them on top of each other */
      align-items: center !important;
      justify-content: center !important;
  }

  /* Center the hamburger on its own row */
  .static-top.navbar-dark .custom-navbar-toggler {
      display: block !important;
      margin: 6px auto 10px auto !important;  /* centre horizontally */
  }

  .static-top .navbar-brand {
        height: auto !important;    /* override the 42px rule */
        position: relative !important; /* prevent layout collapsing */
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .siteTitle.custom-sitetitle {
    display: none !important;
}

.xrm-attribute-value > .row.sectionBlockLayout.text-start:first-of-type {
      background-position: 70% 0% !important;
      
}



}

/* Center mobile menu links */
@media (max-width: 1024px) {

.static-top.navbar .menu-bar > .navbar-nav > li > a {
    text-align: center !important;
}
}

@media (max-width: 767px) {
    .xrm-attribute-value > .row.sectionBlockLayout.text-start:first-of-type {
        position: relative;
        overflow: hidden;
    }

    .xrm-attribute-value > .row.sectionBlockLayout.text-start:first-of-type::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
            to top,
            rgba(255, 255, 255, 0.85) 0%,
            rgba(255, 255, 255, 0.5) 40%,
            rgba(255, 255, 255, 0) 75%
        );
        z-index: 1;
        pointer-events: none;
    }

    .xrm-attribute-value > .row.sectionBlockLayout.text-start:first-of-type * {
        position: relative;
        z-index: 2;
    }
}