/* Responsive overrides — desktop stays on original content-box layout */

.nav-toggle {
  display: none;
}

/* Desktop: keep hero button, hide mobile-only classes link */
.mobile-classes-link {
  display: none;
}

@media screen and (max-width: 979px) {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  img,
  video {
    max-width: 100%;
    height: auto;
  }

  body {
    font-size: 87.5%; /* ~14px */
    overflow-x: hidden;
  }

  #wrap,
  #body,
  #wrapper,
  #header,
  #mainHeader,
  #mainHeaderWrap,
  #insideHeader,
  #insideHeader #mainHeaderWrap,
  #mainContent,
  #mainContent #contentWrapper,
  #home,
  #inside,
  #footer {
    width: 100%;
    max-width: 100%;
  }

  #body {
    background-image: none;
    background-color: #fff;
  }

  #wrapper {
    padding: 0;
    background-image: none;
  }

  #header {
    min-height: 0;
    padding: 8px 12px;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }

  #logo {
    float: none;
    flex: 0 1 auto;
    width: min(210px, 58vw);
    height: 54px;
    padding: 0;
    overflow: hidden;
  }

  #logo p {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
  }

  #logo h1,
  #logo p a {
    width: 100%;
    height: 100%;
    padding: 0;
    overflow: hidden;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left center;
  }

  #headerInfo {
    float: none;
    flex: 0 0 auto;
    width: auto;
    max-width: 38%;
    padding: 0;
  }

  #headerInfo p {
    width: 110px;
    max-width: 100%;
    height: 40px;
    padding: 0;
    overflow: hidden;
    white-space: nowrap;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right center;
  }

  /* --- Main navigation --- */
  #mainNav {
    width: 100%;
    min-height: 0;
    padding: 0;
    position: relative;
  }

  #mainNav .nav-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin: 0;
    padding: 12px 16px;
    border: 0;
    background: #8f1f2b;
    color: #fff;
    font: inherit;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    cursor: pointer;
  }

  #mainNav .nav-toggle-icon {
    display: block;
    width: 22px;
    height: 2px;
    background: #fff;
    position: relative;
    box-shadow:
      0 -7px 0 #fff,
      0 7px 0 #fff;
  }

  #mainNav.nav-open .nav-toggle-icon {
    background: transparent;
    box-shadow: none;
  }

  #mainNav.nav-open .nav-toggle-icon::before,
  #mainNav.nav-open .nav-toggle-icon::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 22px;
    height: 2px;
    background: #fff;
  }

  #mainNav.nav-open .nav-toggle-icon::before {
    transform: rotate(45deg);
  }

  #mainNav.nav-open .nav-toggle-icon::after {
    transform: rotate(-45deg);
  }

  #mainNav ul {
    display: none;
    margin: 0;
    padding: 0 0 8px;
    background: #b82837;
  }

  #mainNav.nav-open ul {
    display: block;
  }

  #mainNav ul li {
    float: none;
    padding: 0;
    background: none;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
  }

  #mainNav ul li a {
    padding: 12px 20px 12px 28px;
    background-position: 14px 50%;
  }

  #mainNav ul li.last {
    display: none;
  }

  #mainNav .clear {
    display: none;
  }

  /* --- Home hero --- */
  #mainHeader,
  #mainHeaderWrap {
    height: auto;
    background: #ecc260;
  }

  #mainHeader #mainHeaderOuter {
    width: 100%;
    height: auto;
    padding: 8px;
    background: none;
  }

  /* Show bull + text with matching side margins (crop empty right) */
  #mainHeader #mainHeaderInner {
    width: 100%;
    height: auto;
    min-height: 0;
    padding: 0;
    padding-top: 41.0334%; /* 270 / 658 cropped width */
    display: block;
    background-color: #ecc260;
    background-repeat: no-repeat;
    background-position: left top;
    background-size: 141.0334% auto; /* 928 / 658 */
  }

  #mainHeader #mainHeaderInner p.viewClass {
    display: none;
  }

  #home .mobile-classes-link {
    display: block;
  }

  /* --- Interior header --- */
  #insideHeader,
  #insideHeader #mainHeaderWrap {
    height: auto;
    background: #f9eec6;
  }

  #insideHeader #mainHeaderOuter {
    width: 100%;
    height: auto;
    padding: 8px;
    background: none;
  }

  #insideHeader #mainHeaderInner {
    width: 100%;
    height: auto;
    min-height: 0;
    padding: 0;
    background: #f9eec6;
  }

  #insideHeader #mainHeaderInner {
    display: flex;
    flex-direction: column;
  }

  #subnav {
    width: 100%;
    min-height: 0;
    padding: 0;
    order: 2;
    border-top: 1px solid #e0d6b1;
  }

  #subnav:empty,
  #subnav:not(:has(ul)) {
    display: none;
    border: none;
  }

  #subnav ul {
    display: block;
    margin: 0;
    padding: 0;
  }

  #subnav .clear {
    display: none;
  }

  #subnav ul li {
    float: none;
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    background: none;
    border-bottom: 1px solid #e0d6b1;
    line-height: normal;
  }

  #subnav ul li.last {
    border-bottom: none;
  }

  #subnav ul li a {
    display: block;
    padding: 11px 16px;
    color: #72624a;
  }

  #subnav ul li.active a,
  #subnav ul li a:hover {
    color: #b82837;
    background: rgba(184, 40, 55, 0.06);
  }

  #insideHeader #mainHeaderContent,
  #insideHeader #mainHeaderContact,
  #insideHeader #mainHeaderWhyAtHispania,
  #insideHeader #mainHeaderWhySpanish,
  #insideHeader #mainHeaderAboutUs,
  #insideHeader #mainHeaderDiploma,
  #insideHeader #mainHeaderGraduates,
  #insideHeader #mainHeaderClassroom {
    width: 100%;
    height: auto;
    min-height: 160px;
    padding: 28px 16px;
    order: 1;
    clear: both;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    position: relative;
    isolation: isolate;
    background-color: #f9eec6;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center right;
  }

  #insideHeader #mainHeaderContent::before,
  #insideHeader #mainHeaderContact::before,
  #insideHeader #mainHeaderWhyAtHispania::before,
  #insideHeader #mainHeaderWhySpanish::before,
  #insideHeader #mainHeaderAboutUs::before,
  #insideHeader #mainHeaderDiploma::before,
  #insideHeader #mainHeaderGraduates::before,
  #insideHeader #mainHeaderClassroom::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(
      90deg,
      rgba(249, 238, 198, 0.97) 0%,
      rgba(249, 238, 198, 0.9) 42%,
      rgba(249, 238, 198, 0.35) 68%,
      rgba(249, 238, 198, 0) 100%
    );
  }

  #insideHeader h1,
  #insideHeader h2 {
    position: relative;
    z-index: 1;
    max-width: 85%;
    text-shadow: none;
  }

  #insideHeader h1 {
    font-size: 1.7em;
    letter-spacing: -1px;
    padding: 4px 0 2px;
    color: #b82837;
  }

  #insideHeader h2 {
    font-size: 1.2em;
    margin: 0;
    padding: 0 0 2px;
    color: #4f4030;
    font-weight: bold;
  }

  /* --- Content + sidebar stack --- */
  #mainContent {
    padding: 0;
    background: #b82837;
  }

  #mainContent #contentWrapper {
    background: #f1ebbc;
  }

  #home #content,
  #inside #content {
    float: none;
    width: 100%;
    padding: 20px 16px 10px;
    background: none;
  }

  #sidebar,
  #inside #sidebar {
    float: none;
    width: 100%;
    padding: 10px 16px 24px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  p.viewTeachers,
  p.viewDiploma,
  p.viewClasses,
  p.viewClasses2,
  p.facebook {
    width: 100%;
    max-width: 324px;
    margin: 0 auto;
    padding: 0;
  }

  p.viewTeachers a,
  p.viewClasses a,
  p.viewClasses2 a,
  p.viewDiploma a,
  p.facebook a {
    width: 100%;
    max-width: 324px;
    box-sizing: border-box;
    background-size: 100% auto;
    background-position: top center;
    background-repeat: no-repeat;
  }

  p.facebook a {
    height: auto;
    aspect-ratio: 324 / 70;
  }

  #breadcrumbs {
    width: 100%;
    padding: 16px 16px 20px;
  }

  #breadcrumbs ul li {
    float: none;
    display: inline;
  }

  /* --- Footer --- */
  #footer {
    padding: 12px 16px 24px;
  }

  #footer p {
    line-height: 1.6;
  }

  #footer p .footer-sep {
    display: none;
  }

  #footer p span {
    display: block;
    padding: 2px 0;
  }

  /* --- Forms --- */
  .formModule dl,
  .formModule dl.captcha,
  .formModule form dl.inline {
    float: none;
    width: 100%;
    padding: 0 0 12px;
  }

  .formModule form input,
  .formModule form textarea,
  input,
  textarea,
  select {
    width: 100%;
    max-width: 100%;
  }

  .formModule p.send {
    padding: 16px 0 0;
    display: flex;
    justify-content: center;
  }

  #validation-advice,
  #advice-requiredCaptcha-security_code {
    padding-left: 0;
  }

  /* --- Content helpers --- */
  ol.double_col,
  div.double_col {
    column-count: 1;
    column-gap: normal;
  }

  .diploma_image {
    float: none;
    display: block;
    margin: 0 auto 16px;
    max-width: 100%;
  }

  .left,
  .right {
    float: none;
  }

  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

@media screen and (max-width: 480px) {
  body {
    font-size: 93.75%; /* ~15px */
  }

  #logo {
    width: min(200px, 62vw);
    height: 50px;
  }

  #headerInfo {
    display: none;
  }

  #mainHeader #mainHeaderInner {
    padding-top: 41.0334%;
    min-height: 0;
  }

  #insideHeader #mainHeaderContent,
  #insideHeader #mainHeaderContact,
  #insideHeader #mainHeaderWhyAtHispania,
  #insideHeader #mainHeaderWhySpanish,
  #insideHeader #mainHeaderAboutUs,
  #insideHeader #mainHeaderDiploma,
  #insideHeader #mainHeaderGraduates,
  #insideHeader #mainHeaderClassroom {
    min-height: 140px;
    padding: 24px 12px;
    background-position: 70% center;
  }

  #insideHeader h1 {
    max-width: 75%;
  }

  h1 {
    font-size: 1.65em;
    letter-spacing: -1px;
  }

  h3 {
    font-size: 1.3em;
    letter-spacing: -1px;
  }
}