/*
 * responsive.css — mobile fixes for the imported design.
 * The original design used fixed two-column grids (inline styles) and a
 * non-collapsing header nav, which overflow below ~760px. This file adds
 * a mobile hamburger menu and collapses the fixed grids to one column.
 * !important is required in several rules because inline `style="..."`
 * attributes otherwise always win over external stylesheet rules.
 */

.nav-toggle { display: none; }
.mobile-menu { display: none; }

@media (max-width: 760px) {
  .site-nav-desktop,
  .site-cta-desktop {
    display: none !important;
  }
  .nav-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    margin-left: auto;
  }
  .mobile-menu.open {
    display: flex !important;
  }

  /* The footer's 3 blocks (logo, domain, link list) use justify-content:
     space-between, which on desktop spreads them evenly across a wide row.
     On mobile, once anything wraps, that same space-between shoves the
     remaining items to opposite edges with an empty gap between them
     instead of stacking naturally. Stack them instead. */
  .site-footer-inner {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 14px !important;
  }
  .site-footer-inner > div:last-child {
    flex-wrap: wrap !important;
    row-gap: 10px !important;
  }
}

@media (max-width: 700px) {
  /* Large headings (h1 up to 56px, h2 up to 44px) don't shrink on their own
     and long single words (e.g. "entretenimiento") can overflow their box
     since nothing tells them to break — this clips text at the viewport
     edge instead of wrapping. Cap the sizes and force word-breaking. */
  h1 { font-size: clamp(30px, 9vw, 40px) !important; line-height: 1.15 !important; }
  h2 { font-size: clamp(24px, 7vw, 30px) !important; line-height: 1.2 !important; }
  body * { overflow-wrap: break-word; word-break: break-word; }
}

@media (max-width: 860px) {
  .hero-grid {
    grid-template-columns: 1fr !important;
  }
  .legal-grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  .legal-grid > aside {
    position: static !important;
    border-left: none !important;
    border-bottom: 1px solid #ececee;
    padding-left: 0 !important;
    padding-bottom: 18px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px 16px !important;
  }
  .legal-grid > aside > div {
    width: 100%;
  }
}