/* === layout.css — Header, top bar, nav, footer (shared chrome) === */
/* Matches icomjapan.com: thin top bar, clean horizontal nav with red active
   underline, and a LIGHT-GRAY footer. Imported after components.css. */

/* ============================================================
   HEADER
   ============================================================ */
.header{ position:fixed; inset:0 0 auto 0; z-index:100; background:#fff; }

/* Thin top utility bar */
.topbar{ background:var(--ink); color:#cfcfcf; font-size:.78rem; transition:height var(--t),opacity var(--t); }
.topbar__inner{ display:flex; align-items:center; justify-content:space-between; gap:1rem; height:34px; }
.topbar a{ display:inline-flex; align-items:center; gap:.35rem; transition:color var(--t); }
.topbar a:hover{ color:#fff; }
.topbar .ico{ color:var(--red); }
.topbar__right{ display:flex; align-items:center; gap:1.3rem; }
.topbar__pill{ background:var(--red); color:#fff!important; font-weight:700; letter-spacing:.04em; padding:.18rem .7rem; border-radius:var(--r); font-size:.7rem; text-transform:uppercase; }
/* Mobile/tablet ≤860px: keep the 34px bar tidy — drop the long address and the
   ICOM pill (already shown by the header logo), and center the tap-to-call phone
   + email so nothing wraps or overflows. Selectors are deliberately specific
   enough (0,2,0) to beat the base `.topbar a{display:inline-flex}` rule (0,1,1). */
@media (max-width:860px){
  .topbar__inner{ justify-content:center; gap:1.5rem; }
  .topbar__inner > .topbar__contact{ display:none; } /* address */
  .topbar__right{ gap:1.5rem; }
  .topbar__right .topbar__pill{ display:none; }       /* redundant ICOM pill */
}
@media (max-width:430px){
  .topbar{ font-size:.72rem; }
  .topbar__right{ gap:1rem; }
}

/* Main nav row */
.nav{ border-bottom:1px solid var(--line); transition:box-shadow var(--t); }
.header.scrolled .nav{ box-shadow:var(--sh-1); }
.header.scrolled .topbar{ height:0; opacity:0; overflow:hidden; }
.header.scrolled .topbar__inner{ height:0; }
.nav__inner{ display:flex; align-items:center; justify-content:space-between; height:82px; gap:1.5rem; }

/* Brand lockup */
.brand{ display:flex; align-items:center; gap:.85rem; flex-shrink:0; }
.brand__logo{ height:42px; width:auto; }
.brand__txt{ display:flex; flex-direction:column; line-height:1.05; }
.brand__name{ font-size:1.4rem; font-weight:900; letter-spacing:-.02em; color:var(--ink); }
.brand__name b{ color:var(--red); }
.brand__tag{ font-size:.62rem; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); }

/* Co-brand ICOM mark (right of nav) — png with inline ring-mark fallback */
.cobrand{ display:none; align-items:center; gap:.6rem; }
.cobrand__sep{ width:1px; height:44px; background:var(--line); }
.cobrand__logo img{ height:48px; width:auto; }
.cobrand__logo .icom-word{ display:none; }
.cobrand__logo.noimg img{ display:none; }
.cobrand__logo.noimg .icom-word{ display:inline-block; }
.cobrand__cap{ font-size:.55rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); max-width:5.5rem; line-height:1.2; }

/* Mobile header (≤1023px): the ICOM logo takes the LEFT slot in place of the
   Sada lockup. The ICOM cobrand is never display:none — it just moves left. */
@media (max-width:1023px){
  .brand{ display:none; }
  .cobrand{ display:flex; order:-1; gap:.5rem; }
  .cobrand__sep,
  .cobrand__cap{ display:none; }
  .cobrand__logo img{ height:38px; }
}

/* Desktop menu */
.menu{ display:none; align-items:center; gap:.2rem; margin-left:auto; }
@media (min-width:1080px){ .menu{ display:flex; } .cobrand{ display:flex; } }
.menu__item{ position:relative; }
.menu__link{ position:relative; display:inline-flex; align-items:center; gap:.3rem; padding:1.6rem .85rem; font-size:.95rem; font-weight:400; color:var(--ink); transition:color var(--t); }
.menu__link::after{ content:""; position:absolute; left:.85rem; right:.85rem; bottom:0; height:3px; background:var(--red); transform:scaleX(0); transition:transform var(--t); }
.menu__link:hover{ color:var(--red); }
.menu__link:hover::after,.menu__link.active::after{ transform:scaleX(1); }
.menu__link.active{ color:var(--red); }
.menu__link .chev{ transition:transform var(--t); }
.menu__item:hover .chev{ transform:rotate(180deg); }
.dropdown{ position:absolute; top:100%; left:.4rem; min-width:13rem; background:#fff; border:1px solid var(--line); box-shadow:var(--sh-2); opacity:0; visibility:hidden; transform:translateY(8px); transition:all var(--t); }
.menu__item:hover .dropdown{ opacity:1; visibility:visible; transform:translateY(0); }
.dropdown a{ display:block; padding:.7rem 1.1rem; font-size:.85rem; color:var(--ink-soft); border-left:3px solid transparent; transition:all var(--t); }
.dropdown a:hover{ background:var(--gray); color:var(--red); border-left-color:var(--red); }

/* Mobile toggle + menu */
.nav__toggle{ display:inline-flex; margin-left:auto; padding:.4rem; color:var(--ink); }
@media (min-width:1080px){ .nav__toggle{ display:none; } }
.nav__toggle svg{ width:26px; height:26px; }
.mobile{ display:block; overflow:hidden; max-height:0; background:#fff; border-bottom:1px solid var(--line); transition:max-height var(--t); }
.mobile.open{ max-height:85vh; overflow-y:auto; }
@media (min-width:1080px){ .mobile{ display:none; } }
.mobile__in{ padding:.75rem var(--gutter) 1.25rem; }
.m-link,.m-acc__btn{ display:flex; align-items:center; justify-content:space-between; width:100%; padding:.85rem .25rem; font-size:.95rem; border-bottom:1px solid var(--line); color:var(--ink); text-align:left; }
.m-link:hover,.m-acc__btn:hover{ color:var(--red); }
.m-acc__panel{ overflow:hidden; max-height:0; transition:max-height var(--t); }
.m-acc.open .m-acc__panel{ max-height:18rem; }
.m-acc.open .chev{ transform:rotate(180deg); }
.m-acc__panel a{ display:block; padding:.65rem 1rem; font-size:.85rem; color:var(--ink-soft); }
.m-acc__panel a:hover{ color:var(--red); }
.mobile .btn{ width:100%; justify-content:center; margin-top:1rem; }

/* ============================================================
   FOOTER — ICOM light-gray style
   ============================================================ */
.footer{ background:var(--gray); border-top:1px solid var(--line); }
.footer__top{ display:grid; grid-template-columns:1fr; gap:2.5rem; padding-block:3.5rem; }
@media (min-width:768px){ .footer__top{ grid-template-columns:2fr 1fr 1fr 1.5fr; } }
.footer__brand .brand__name{ font-size:1.5rem; }
.footer__tag{ font-size:.72rem; color:var(--ink-faint); margin:.4rem 0 1rem; text-transform:uppercase; letter-spacing:.06em; }
.footer__about{ font-size:.86rem; color:var(--ink-soft); margin-bottom:1.3rem; max-width:24rem; }
/* Social icons: 18px glyph in a 36x36 box, transparent w/ hairline border,
   ink color, hover = ICOM red background + white glyph */
.footer__social{ display:flex; gap:.6rem; }
.footer__social a{ width:36px; height:36px; border:1px solid var(--line); background:transparent; border-radius:var(--r); display:flex; align-items:center; justify-content:center; color:var(--ink); transition:all var(--t); }
.footer__social a svg{ width:18px; height:18px; }
.footer__social a:hover{ background:var(--red); color:#fff; border-color:var(--red); }
/* Brand-colour hovers for TikTok / Instagram / YouTube */
.footer__social a[data-net="tiktok"]:hover{ background:#000; border-color:#000; }
.footer__social a[data-net="instagram"]:hover{ background:linear-gradient(45deg,#f09433,#dc2743,#bc1888); border-color:transparent; }
.footer__social a[data-net="youtube"]:hover{ background:#FF0000; border-color:#FF0000; }
.footer h4{ font-size:.95rem; font-weight:700; margin-bottom:1.1rem; }
.footer__links{ display:grid; gap:.7rem; }
.footer__links a{ font-size:.85rem; color:var(--ink-soft); display:inline-flex; align-items:center; gap:.4rem; transition:color var(--t); }
.footer__links a::before{ content:"\203A"; color:var(--red); }
.footer__links a:hover{ color:var(--red); }
.footer__contact{ display:grid; gap:.8rem; }
.footer__contact li{ display:flex; gap:.6rem; font-size:.85rem; color:var(--ink-soft); }
.footer__contact .ico{ color:var(--red); flex-shrink:0; margin-top:2px; }
.footer__contact a:hover{ color:var(--red); }
.footer__bottom{ border-top:1px solid var(--line); padding-block:1.2rem; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.6rem; font-size:.8rem; color:var(--ink-faint); }
.footer__bottom .cobrand-foot{ display:inline-flex; align-items:center; gap:.5rem; }