/* ==========================================================================
   Maniro — Responsive Rules (Header component)
   ========================================================================== */

/* Tablet */
@media (max-width: 960px) {
  .hero-inner {
    padding-block: 48px;
  }

  .hero-content {
    max-width: none;
  }

  .hero-text {
    max-width: none;
  }
}

/* On narrower screens the text spans full width, so darken the whole
   photo evenly instead of only the right side */
@media (max-width: 760px) {
  .hero::before {
    background: linear-gradient(
        180deg,
        rgba(6, 10, 16, 0.55) 0%,
        rgba(6, 10, 16, 0.78) 100%
      ),
      rgba(6, 10, 16, 0.35);
  }
}

/* Mobile nav collapses into a sheet.
   960px is our tablet cutoff for hero content; the nav itself needs to
   switch a bit earlier-in-the-wide-sense breakpoint (900px) because six
   Persian nav labels + logo + theme toggle no longer fit comfortably on
   common tablet widths (e.g. a 768px iPad portrait) once padding and gaps
   are accounted for. */
@media (max-width: 900px) {
  .menu-toggle {
    display: flex;
  }

  .nav-links {
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    margin: 0;
    padding: 12px;
    max-height: calc(100vh - var(--header-height));
    overflow-y: auto;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-md);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform 0.2s var(--ease), opacity 0.2s var(--ease);
  }

  .nav-links.is-open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .nav-link {
    padding: 13px 14px;
  }

  .nav-link.is-active::after {
    display: none;
  }

  .nav-link.is-active {
    background: var(--color-bg-subtle);
  }
}

/* Small phones */
@media (max-width: 480px) {
  .hero-title {
    font-size: 34px;
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .btn {
    width: 100%;
  }

  .brand-name {
    font-size: 17px;
  }
}

/* Extra-small phones (older/narrow devices, e.g. ~320–374px wide) */
@media (max-width: 380px) {
  .container {
    padding-inline: 16px;
  }

  .hero-title {
    font-size: 28px;
  }

  .hero-eyebrow {
    font-size: 12px;
  }

  .hero-text {
    font-size: 15.5px;
  }

  .brand-name {
    font-size: 15.5px;
  }

  .brand-logo {
    height: 28px;
  }
}

/* Short viewports (landscape phones, small laptops with the browser UI
   eating vertical space) — a 90vh hero would otherwise force the fold
   almost to the bottom of the screen, or overflow on very short screens */
@media (max-height: 560px) and (max-width: 900px) {
  .hero {
    min-height: auto;
  }

  .hero-inner {
    padding-block: 40px;
  }
}