/* mobile.css — all phone/tablet rules for volten.am.
   Breakpoints: phone <=575px · tablet 576-991px · desktop >=992px (untouched).
   Loaded after the theme CSS so these rules win. */

/* ── Mobile hamburger nav ── */
.nav-toggle { display: none; }

@media (max-width: 991px) {
  .nav-toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 10px;
    background: none;
    border: 0;
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 15px;
    z-index: 1100; /* beats .contact-links z-index:999 */
  }
  .nav-toggle span { display: block; height: 2px; width: 100%; background: #333; }

  /* Lang switch stays put (top-right, next to the hamburger) — the menu opens as
     a dropdown BELOW the header, so the lang never needs to move. */
  .main-header .contact-links { right: 60px; }
  .contact-links ul { padding-left: 0; padding-right: 0; }

  /* Make nav.main-menu static so the open dropdown anchors to .main-header (the
     positioning context with the header's full height), not to nav.main-menu
     (which collapses to 0 height once the menu is absolute → top:100% would be 0). */
  nav.main-menu { position: static !important; }
  /* Override bootstrap.css which forces display:block on .collapse at >=768px */
  nav.main-menu .navbar-collapse.collapse { display: none !important; }
  /* Open menu = full-width dropdown anchored just below the header (positioned
     against .main-header, the positioning context), so it never overlaps the
     logo or the lang switch. */
  nav.main-menu .navbar-collapse.collapse.open {
    display: block !important;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1050;
    background: #ffffff;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
  }
  nav.main-menu ul.navigation { text-align: left; margin: 0; padding: 0; }
  nav.main-menu ul.navigation > li {
    display: block !important;
    padding: 0;
    border-top: 1px solid #eee;
  }
  nav.main-menu ul.navigation > li > a {
    display: block;
    padding: 12px 16px;
    min-height: 44px;
    line-height: 20px;
  }
}

@media (min-width: 992px) { .nav-toggle { display: none !important; } }

/* ── Partner grid phone tweaks ── */
@media (max-width: 575px) {
  /* The h5 text-cards have inline height:161px/line-height:150px that wrap long names.
     Override with !important to beat inline styles; use flex centering so any
     multi-line name stays vertically centred inside the fixed-height box. */
  .partner .part_log h5 {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 120px !important;
    line-height: 1.3 !important;
    font-size: 13px !important;
    white-space: normal !important;
    overflow: hidden !important;
    padding: 6px !important;
    box-sizing: border-box;
  }
  .partner .part_log img { max-height: 120px; }
}

/* ── Hero banner ──
   The hero now scales CONTINUOUSLY (fluid container + clamp font/min-height) to
   avoid a title "jump" when a tablet rotates across 992px. Those rules live in
   the index.astro component <style> (which loads after this file and would
   otherwise win); nothing for the hero is needed here. */

/* ── Page-title banners: compact on phone ── */
@media (max-width: 575px) {
  .page-title { padding: 30px 0; }
  .page-title .title-text h1 {
    font-size: clamp(20px, 6vw, 30px);
    line-height: 1.2;
  }
}

/* ── Footer: single-column stack on phone ── */
@media (max-width: 575px) {
  /* left-column has padding-right:100px in theme — collapse it */
  .footer-top .left-column { padding-right: 15px; }

  /* right-column inner halves: col-md-6 with no xs fallback → force full-width */
  .footer-top .right-column .col-md-6 { width: 100%; margin-bottom: 24px; }

  /* footer-bottom copyright halves */
  .footer-bottom .col-md-6 { width: 100%; text-align: center; }
}

/* ── Contact form: full-width inputs + button on phone ── */
@media (max-width: 575px) {
  /* The col-md-6 halves in ContactForm don't have xs fallback — force full-width */
  .contact-section .contact-form form .col-md-6 { width: 100%; }

  /* inputs already have width:100% from theme; enforce min-height ≥44px */
  .contact-section .contact-form form input[type="text"],
  .contact-section .contact-form form input[type="email"] {
    min-height: 44px;
    height: 44px;
  }

  /* button floats right in theme (float:right) — clear it and go full-width */
  .contact-section .contact-form form button.btn-style-one {
    float: none; /* theme sets float:right which clips on 390px */
    display: block;
    width: 100%;
    min-height: 44px;
    text-align: center;
  }
}

/* ── Contact page map: cap height on phone ── */
@media (max-width: 575px) {
  /* The iframe sits in a bare <div> directly in contact.astro */
  .contact-section ~ div iframe { height: 220px; }
}

/* ── Service grid (home): breathing room between cards on phone ── */
@media (max-width: 575px) {
  /* serv-info already has margin:15px 0 from theme; add bottom gap between rows */
  .service-section-serv .col-md-4 { margin-bottom: 8px; }
}

/* ── Task 7: Fluid typography, spacing rhythm, touch targets ── */

/* Section / page titles: fluid scale tablet→phone so large desktop h4/h2 don't
   overflow or look disproportionate on narrower screens. */
@media (max-width: 991px) {
  /* Section headings (partners title h4, service/about section titles h3/h4).
     NOTE: .produce-title and h2.section-title were dead selectors (markup uses
     <div class="section-title"><h3> or <h4></div> and <div class="part_ttl"><h4>).
     Replaced with the real live selectors. */
  .part_ttl h4,
  .section-title h3,
  .section-title h4 { font-size: clamp(24px, 5.5vw, 38px); }

  /* Tighten the generous desktop vertical padding on key sections */
  .partner { padding-top: 36px !important; padding-bottom: 36px !important; }
  .service-section-serv { padding-top: 36px; padding-bottom: 36px; }

  /* Touch targets: lang-switch links and Facebook link — scoped to interactive
     controls only, not inline text. 44px min-height via padding so layout is safe. */
  .lang_icon li.lg a {
    display: inline-block;
    padding-top: 10px;
    padding-bottom: 10px;
    min-height: 44px;
    line-height: 24px;
  }
  .lang_icon .face_link a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    min-width: 44px;
  }

  /* Hero dots touch target — NOTE: index.astro scoped <style> governs (loads after this file).
     These rules are superseded by the @media rules in that scoped block. */
  .hero-dots .hero-dot {
    width: 14px;
    height: 14px;
    padding: 15px;       /* invisible tap area brings effective target to 44px */
    box-sizing: content-box;
    cursor: pointer;
  }
}

@media (max-width: 575px) {
  /* Phone-only: further compress section spacing */
  .partner { padding-top: 28px !important; padding-bottom: 28px !important; }

  /* Hero dots: slightly smaller visual dot on phone — governed by index.astro scoped <style> */
  .hero-dots .hero-dot { width: 10px; height: 10px; }

  /* Part_ttl margin compress */
  .part_ttl { margin-bottom: 28px !important; }
}

/* ── Header logo: pin it so it never jumps when a tablet rotates ──
   The theme positions the logo differently per breakpoint (absolute at ≥1200px,
   relative + indented below) and toggles its horizontal padding + a right border,
   so the logo slides and resizes across breakpoints. Pin it to one absolute
   top-left position with a consistent size at every width. */
.main-header { position: relative !important; }     /* the ONE positioning context */
.main-header .container { position: static !important; }
.main-header .header-area { position: static !important; min-height: 96px; }
.main-header .main-logo { position: absolute !important; top: 0 !important; left: 15px !important; }
.main-header .main-logo img { padding: 16px 0; border-right: none; }
/* The logo is now out of flow; keep the inline desktop nav centered at ALL desktop
   widths so it clears the pinned logo (the theme left-aligns it at 992–1199px). */
@media (min-width: 992px) {
  .main-header .main-menu { text-align: center !important; }
}

/* ── Phone header: explicit 2-row layout ──
   A ~360px top bar can't fit logo + language switch + hamburger in one row. The
   reused theme tried to drop the lang switch to a 2nd row via top:115px, but with
   the pinned compact header that pushed it OUT of the header and over the
   page-title banner. Lay it out explicitly instead: logo + hamburger on row 1,
   the language switch contained as row 2, header sized to hold both so the
   page-title banner / hero starts cleanly below. */
@media (max-width: 575px) {
  /* Flex layout auto-contains the rows (no magic heights, no overlap): row 1 =
     logo + hamburger, row 2 = language switch (wraps via flex-basis:100%), the
     open menu still drops as an absolute dropdown below. */
  .main-header .header-area {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    padding: 12px 0;
    min-height: 0 !important;
  }
  .main-header .main-logo { position: static !important; order: 0; margin: 0; }
  .main-header .main-logo img { width: 120px; height: auto; padding: 0; }
  .main-header .nav-toggle {
    position: static !important;
    order: 1;
    margin-left: auto;
    top: auto !important;
    transform: none !important;
  }
  .main-header .contact-links {
    position: static !important;
    order: 2;
    flex-basis: 100%;
    width: 100%;
    height: auto !important;
    top: auto !important; right: auto !important; left: auto !important;
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }
  .main-header .contact-links ul { padding: 0 !important; margin: 0 !important; display: flex; align-items: center; }
  .main-header .main-menu { order: 3; flex-basis: 100%; }
}