/* stylemini.css
   Mobile & tablet specific stylesheet for WireTech Website.
   Purpose: Override or simplify desktop layout from style.css for screens below desktop widths.
   Usage: Link this file AFTER style.css in each HTML file.

   Breakpoint guide (adjust as needed):
   - Base: mobile-first (small phones)
   - 380px+: very small device tweaks
   - 520px+: standard phones
   - 680px+: large phones / small tablets portrait
   - 900px+: tablets landscape (just before desktop cutoff)
*/

/* ========== Base (mobile-first) ========== */
/* Hide mobile-only UI elements by default (desktop / large screens) */
.nav-toggle, .nav-toggle-bar, .nav-backdrop { display:none; }
.lang-toggle { display:none; }
body { -webkit-text-size-adjust: 100%; }

/* (Desktop inherits original spacing/typography; mobile overrides moved under max-width:900px) */

/* ========== ≥380px (slightly larger small phones) ========== */
/* Move all sizing adjustments into mobile-specific range to avoid shrinking desktop */

/* Additional component-specific mobile adjustments can be appended below as needed. */

/* ===== Mobile Hamburger Navigation (contact page initial implementation) ===== */
/* Hidden by default on large screens (only define mobile styles here) */
@media (max-width: 900px) {
  html { font-size:15px; }
  header { padding:6px 18px; }
  header .logo img { height:70px; }
  nav ul { gap:18px; }
  nav ul li a { font-size:0.72rem; }
  /* Content scaling */
  .tab-content { padding: 0 16px 32px; }
  .products-header { padding: 34px 12px 24px; }
  .products-header h1 { font-size: 1.55rem; }
  .products-header .products-intro { font-size: 0.92rem; }
  .capability { margin: 0 auto 46px; }
  .capability h2 { font-size: 1.22rem; }
  .capability p { font-size: 0.9rem; }
  footer { padding: 26px 20px 8px; }
  .footer-content { gap: 20px; }
  /* Contact */
  #contact h1 { font-size: 1.6rem; }
  #contact .contact-subhead { font-size: 1.05rem; margin: 28px 0 14px; }
  #contact .contact-card { padding: 14px 14px 16px; }
  #contact .contact-card h3 { font-size: 1.0rem; }
  #contact .contact-card p { font-size: 0.85rem; }
  #contact .map-embed { height: 300px; }
}
/* Progressive enlargements inside mobile range (separate combined queries) */
@media (min-width:380px) and (max-width:900px){ html { font-size:15.5px; } header .logo img { height:76px; } }
@media (min-width:520px) and (max-width:900px){ html { font-size:16px; } header { padding:8px 26px; } nav ul li a { font-size:0.75rem; } .products-header h1, #contact h1 { font-size:1.75rem; } }
@media (min-width:680px) and (max-width:900px){ header { padding:10px 34px; } header .logo img { height:90px; } nav ul { gap:32px; } .capability h2 { font-size:1.32rem; } #contact .contact-card { padding:16px 18px 18px; } }

/* ===== Hero (Main page) mobile adjustments ===== */
@media (max-width:900px){
  #mainpage .hero { padding: clamp(22px,8vh,90px) 20px 40px; min-height: calc(100vh - var(--header-height)); max-width:560px; }
  #mainpage .hero h1 { font-size:clamp(1.65rem, 6.2vw, 2.05rem); line-height:1.18; letter-spacing:.4px; }
  #mainpage .hero-sub { font-size:clamp(.9rem, 3.6vw, 1.05rem); line-height:1.45; max-width:460px; }
  #mainpage .scroll-cue-btn { bottom:110px; width:42px; height:42px; }
  #mainpage .hero-bg__video { object-position:center center; }
}
@media (max-width:600px){
  #mainpage .hero { padding: clamp(18px,7vh,70px) 18px 34px; }
  #mainpage .hero h1 { font-size:clamp(1.55rem, 7vw, 1.9rem); }
  #mainpage .hero-sub { font-size:clamp(.86rem, 3.9vw, .98rem); }
  #mainpage .scroll-cue-btn { bottom:100px; }
}
@media (max-width:460px){
  #mainpage .hero { padding: clamp(16px,6.5vh,60px) 16px 30px; }
  #mainpage .hero h1 { font-size:clamp(1.45rem, 7.6vw, 1.72rem); }
  #mainpage .hero-sub { font-size:clamp(.82rem, 4.1vw, .94rem); }
  #mainpage .scroll-cue-btn { bottom:92px; width:40px; height:40px; }
}

@media (max-width: 900px) {
  /* Re-enable mobile elements */
  .nav-backdrop { display:block; }
  .nav-toggle { display:inline-flex; flex-direction:column; justify-content:center; gap:5px; width:40px; height:40px; background:rgba(255,255,255,0.10); border:1px solid rgba(255,255,255,0.35); border-radius:8px; cursor:pointer; padding:0; transition:background .25s,border-color .25s; position:relative; z-index:1101; }
  header.header--scrolled .nav-toggle { background:var(--color-surface); border-color:var(--color-border-strong); }
  .nav-toggle:hover { background:rgba(255,255,255,0.18); }
  header.header--scrolled .nav-toggle:hover { background:var(--color-surface-accent); }
  .nav-toggle-bar { display:block; height:3px; width:22px; margin:0 auto; background:#ffffff; border-radius:2px; transition:transform .35s ease, opacity .25s ease, background .25s ease; }
  header.header--scrolled .nav-toggle-bar { background:#3A4A59; }
  body.nav-open .nav-toggle-bar:nth-child(1){ transform:translateY(8px) rotate(45deg); }
  body.nav-open .nav-toggle-bar:nth-child(2){ opacity:0; }
  body.nav-open .nav-toggle-bar:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

  /* Inline language switch button (mobile header, next to hamburger) */
  .lang-toggle { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; background:rgba(255,255,255,0.10); border:1px solid rgba(255,255,255,0.35); border-radius:8px; color:#ffffff; font-weight:700; font-size:0.72rem; text-decoration:none; letter-spacing:.06em; text-transform:uppercase; transition:background .25s ease, border-color .25s ease, color .25s ease; margin-left:10px; position:relative; z-index:1210; }
  .lang-toggle:hover { background:rgba(255,255,255,0.18); }
  header.header--scrolled .lang-toggle { background:var(--color-surface); border-color:var(--color-border-strong); color:#3A4A59; }
  header.header--scrolled .lang-toggle:hover { background:var(--color-surface-accent); }

  /* Off-canvas panel */
  #site-nav { position:fixed; top:0; right:0; bottom:0; width:270px; background:var(--color-surface); border-left:1px solid var(--color-border-strong); box-shadow:-4px 0 18px rgba(0,0,0,0.10); padding:96px 26px 40px; transform:translateX(100%); transition:transform .38s cubic-bezier(.65,.05,.36,1); z-index:1200; overflow-y:auto; }
  body.nav-open #site-nav { transform:translateX(0); }
  /* Backdrop element (real DOM node instead of pseudo to avoid swallowing events unintentionally) */
  .nav-backdrop { position:fixed; inset:0; background:rgba(0,0,0,0.45); backdrop-filter:blur(2px); z-index:1100; opacity:0; visibility:hidden; transition:opacity .25s ease; }
  body.nav-open .nav-backdrop { opacity:1; visibility:visible; }
  /* Elevate header to create stacking context above backdrop */
  header { z-index:1220; }
  /* Make sure nav ul becomes vertical */
  #site-nav ul { display:flex; flex-direction:column; }
  /* Ensure toggle above backdrop */
  .nav-toggle { z-index:1210; }
  #site-nav ul { flex-direction:column; gap:26px; }
  #site-nav ul li a { font-size:.90rem; font-weight:600; color:#2f4756; }
  /* Hide language item inside off-canvas to avoid duplication with inline button */
  #site-nav .lang-switch { display:none; }
  header .logo img { height:64px; }
  body.nav-open { overflow:hidden; }
  /* Mobile dropdown (Products & Solutions) becomes collapsible instead of hover */
  #site-nav .nav-has-dropdown { position:static; }
  #site-nav .nav-has-dropdown .nav-dropdown { position:static; border:0; box-shadow:none; padding:4px 0 0; margin:0; opacity:1; visibility:visible; transform:none; display:none; }
  #site-nav .nav-has-dropdown.open > .nav-dropdown { display:block; }
  #site-nav .nav-has-dropdown .nav-dropdown a { padding:8px 4px 8px 14px; font-size:.82rem; border-radius:6px; }
  #site-nav .nav-has-dropdown .nav-dropdown a:hover { background:var(--color-surface-accent); }
  #site-nav .nav-link-products { display:flex; align-items:center; justify-content:space-between; gap:10px; }
  #site-nav .nav-link-products:after { content:"▾"; font-size:.75rem; transition:transform .25s ease; }
  #site-nav .nav-has-dropdown.open > .nav-link-products:after { transform:rotate(180deg); }
}
@media (max-width: 520px){
  #site-nav { width:250px; padding:88px 22px 34px; }
  #site-nav ul { gap:22px; }
  .nav-toggle-bar { width:20px; }
}
@media (prefers-reduced-motion: reduce){
  #site-nav { transition:none; }
  .nav-toggle-bar { transition:none; }
}