/* =============================================================================
   assets/css/site.css — main sections
   Rewritten for readability (same behavior), plus a bulletproof fsModal state
   ============================================================================= */

/* ─────────────────────────────────────────────────────────────
   Tokens
   ───────────────────────────────────────────────────────────── */

:root{
  --panel : #121826;
  --muted : #a7b3c7;
  --line  : #1d2636;
  --red   : #e10600;

  /* 10.3 marquee */
  --marquee-h: 84px;
}

/* ─────────────────────────────────────────────────────────────
   Base
   ───────────────────────────────────────────────────────────── */

html,
body{
  scroll-behavior: smooth;
  background: #0a0f16;
  color: #e9eef6;
  font-family: 'Manrope', Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  overflow-x: hidden;
}

main{
  min-height: 60vh;
}

/* ─────────────────────────────────────────────────────────────
   Hero
   ───────────────────────────────────────────────────────────── */

.pc-hero{
  position: relative;
  min-height: 78vh;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.pc-hero__bg{
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(10,12,16,0.58), rgba(10,12,16,0.78)),
    url('/index/images/Automotive-1.jpg'),
    url('/index/images/Automotive-1.JPG') center/cover no-repeat;
  transition: opacity 0.6s ease;
}

.pc-hero__inner{
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 980px;
  padding: 0 16px;
}

.pc-badges{
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.badge{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  color: #cfd7e6;
  border: 1px solid rgba(255,255,255,0.10);
}

.pc-hero h1{
  font-size: clamp(2rem, 4.8vw, 3.6rem);
  line-height: 1.1;
  margin: 0.2rem 0;
}

.pc-hero p{
  color: var(--muted);
  max-width: 820px;
  margin: 0 auto 16px;
}

.pc-cta{
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.btn-lg{
  padding: 12px 18px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.06);
  background: linear-gradient(180deg, #e10600, #b30d09);
  font-weight: 800;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 12px 30px rgba(225,6,0,0.32);
}

.btn-ghost{
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.08);
  color: #fff;
  text-decoration: none;
}

.container{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ─────────────────────────────────────────────────────────────
   Logo marquee (legacy keyframes)
   ───────────────────────────────────────────────────────────── */

.logo-track:hover{
  animation-play-state: paused;
}

@keyframes marq{
  from{ transform: translateX(0); }
  to  { transform: translateX(-50%); }
}

/* ─────────────────────────────────────────────────────────────
   Sections / grids / cards
   ───────────────────────────────────────────────────────────── */

.section{
  padding: 64px 0;
}

.section h2{
  margin: 0 0 10px;
}

.section .lead{
  color: var(--muted);
}

.grid{
  display: grid;
  gap: 18px;
}

.cols-3{
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cols-2{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 900px){
  .cols-3{
    grid-template-columns: 1fr 1fr;
  }
  .cols-2{
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 560px){
  .cols-3,
  .cols-2{
    grid-template-columns: 1fr;
  }
}

.card{
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 18px;
}

.card h3{
  margin: 0.2rem 0 0.4rem;
}

.card p{
  margin: 0;
  color: #cdd6e5;
}

.figure{
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.08);
}

.figure img{
  display: block;
  width: 100%;
  height: auto;
}

/* ─────────────────────────────────────────────────────────────
   Details (accordion)
   ───────────────────────────────────────────────────────────── */

details.details-card{
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
  margin-bottom: 18px;
  overflow: hidden;
}

details.details-card summary{
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  font-weight: 700;
}

details.details-card summary::-webkit-details-marker{
  display: none;
}

details.details-card[open] summary{
  border-bottom: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
}

details.details-card .details-body{
  padding: 14px;
}

details.details-card h3{
  margin: 0;
}

/* ─────────────────────────────────────────────────────────────
   Contact page
   ───────────────────────────────────────────────────────────── */

.contact-hero{
  position: relative;
  min-height: 60vh;
  display: grid;
  place-items: center;
  text-align: center;
  color: #fff;
  overflow: hidden;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.contact-hero__bg{
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(10,12,16,0.58), rgba(10,12,16,0.78)),
    url('/index/images/contact-hero.jpg'),
    url('/index/images/contact-hero.JPG') center/cover no-repeat;
  z-index: -1;
}

.contact-hero__inner{
  max-width: 900px;
  padding: 0 16px;
}

.contact-hero h1{
  font-size: clamp(2rem, 4vw, 3rem);
  margin: 0.2rem 0;
}

.contact-hero p{
  color: var(--muted);
  margin: 0 auto;
}

.contact-layout{
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr 1fr;
  align-items: start;
}

.contact-info{
  display: flex;
  flex-direction: column;
  gap: 16px;
}

@media (max-width: 900px){
  .contact-layout{
    grid-template-columns: 1fr;
  }
}

/* ─────────────────────────────────────────────────────────────
   Client Portal
   ───────────────────────────────────────────────────────────── */

.portal-wrap{
  max-width: 1280px;
  margin: 0 auto;
  padding: 20px;
  display: grid;
  grid-template-columns: 280px 1fr 320px;
  gap: 18px;
  min-height: calc(100vh - 160px);
}

.portal-col{
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 14px;
  display: flex;
  flex-direction: column;
}

.portal-menu .menu-group{
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  margin-bottom: 10px;
  background: rgba(255,255,255,0.04);
}

.portal-menu button{
  width: 100%;
  text-align: left;
  padding: 12px 12px;
  border: 0;
  background: transparent;
  color: #fff;
  font-weight: 700;
  display: flex;
  justify-content: space-between;
}

.portal-center .drop{
  flex: 1;
  border: 2px dashed rgba(255,255,255,0.22);
  border-radius: 14px;
  display: grid;
  place-items: center;
  margin-bottom: 12px;
  background: rgba(0,0,0,0.10);
}

.portal-center .drop .hint{
  color: #cfd7e6;
  text-align: center;
}

.portal-right .meta{
  display: grid;
  gap: 8px;
}

.portal-right .pill{
  padding: 10px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
}

.table{
  width: 100%;
  border-collapse: collapse;
}

.table th,
.table td{
  padding: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  text-align: left;
}

@media (max-width: 1100px){
  .portal-wrap{
    grid-template-columns: 1fr;
  }
  .portal-right{
    order: 3;
  }
  .portal-menu{
    order: 1;
  }
  .portal-center{
    order: 2;
  }
}

/* ─────────────────────────────────────────────────────────────
   Forms
   ───────────────────────────────────────────────────────────── */

.form{
  display: grid;
  gap: 10px;
  max-width: 680px;
}

.input,
.textarea{
  width: 100%;
  padding: 11px 13px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.08);
  background: #0f1624;
  color: #fff;
}

.textarea{
  min-height: 140px;
  resize: vertical;
}

/* ─────────────────────────────────────────────────────────────
   10.2 marquee fix
   ───────────────────────────────────────────────────────────── */

.logo-marquee{
  --logo-h: 44px;
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02));
  overflow: hidden;
  padding: 10px 0;
}

.logo-rail{
  display: flex;
  align-items: center;
  gap: 28px;
  height: calc(var(--logo-h) + 22px);
}

.logo-track{
  display: flex;
  gap: 28px;
  will-change: transform;
  animation: logo-scroll 28s linear infinite;
}

.logo-track:hover{
  animation-play-state: paused;
}

.logo-seq{
  display: flex;
  gap: 28px;
}

.logo-item{
  flex: 0 0 auto;
  min-width: 120px;
  height: var(--logo-h);
  display: grid;
  place-items: center;
  padding: 8px 14px;
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
}

.logo-item img{
  max-height: calc(var(--logo-h) - 10px);
  width: auto;
  filter: grayscale(0.10) contrast(1.10);
}

@keyframes logo-scroll{
  from{ transform: translateX(0); }
  to  { transform: translateX(-50%); }
}

/* ─────────────────────────────────────────────────────────────
   10.3 marquee fix (overrides)
   ───────────────────────────────────────────────────────────── */

.logo-marquee{
  position: relative;
  overflow: hidden;
  height: var(--marquee-h);
  display: block;
}

.logo-track{
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  display: flex;
  gap: 26px;
  align-items: center;
  white-space: nowrap;
  will-change: transform;
  animation: marq 26s linear infinite;
}

.logo-item{
  min-width: 110px;
  min-height: 56px;
  display: grid;
  place-items: center;
  padding: 8px 14px;
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
}

.logo-item img{
  max-width: 100%;
  max-height: 32px;
  display: block;
}

@media (max-width: 480px){
  :root{
    --marquee-h: 68px;
  }

  .logo-track{
    gap: 16px;
  }

  .logo-item{
    min-width: 92px;
    min-height: 52px;
    padding: 6px 10px;
  }

  .logo-item img{
    max-height: 28px;
  }
}

/* ─────────────────────────────────────────────────────────────
   10.3 Fullscreen Modal (fsModal)
   - Bulletproof hidden state to prevent click-blocking overlays
   ───────────────────────────────────────────────────────────── */

.fs-modal{
  position: fixed;
  inset: 0;
  z-index: 1400;

  /* Hidden by default = cannot intercept clicks */
  display: none;
  pointer-events: none;

  align-items: center;
  justify-content: center;

  background: rgba(5,8,14,0.60);
  backdrop-filter: blur(6px);
}

.fs-modal.is-open,
.fs-modal[aria-hidden="false"]{
  display: flex;
  pointer-events: auto;
  animation: fadeIn 0.18s ease-out;
}

.fs-modal__panel{
  width: min(980px, 92vw);
  max-height: 86vh;
  overflow: auto;

  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.50);

  transform: translateY(8px) scale(0.98);
  animation: panelIn 0.22s ease-out forwards;
}

.fs-modal__head{
  position: sticky;
  top: 0;

  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;

  padding: 14px 16px;

  background: rgba(10,15,22,0.80);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(4px);
}

.fs-modal__title{
  font-weight: 800;
  letter-spacing: 0.02em;
  margin: 0;
}

.fs-modal__close{
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;

  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  cursor: pointer;
}

.fs-modal__body{
  padding: 16px;
}

@keyframes fadeIn{
  from{ opacity: 0; }
  to  { opacity: 1; }
}

@keyframes panelIn{
  from{
    transform: translateY(8px) scale(0.98);
    opacity: 0.80;
  }
  to{
    transform: none;
    opacity: 1;
  }
}

/* ─────────────────────────────────────────────────────────────
   10.3 details cleanup & transitions (mobile only)
   ───────────────────────────────────────────────────────────── */

details.details-card summary{
  list-style: none;
  cursor: pointer;
  padding: 14px 16px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 10px;
}

details.details-card summary::-webkit-details-marker{
  display: none;
}

details.details-card .details-body{
  padding: 0 16px 16px;
  animation: none;
}

details.details-card[open] .details-body{
  animation: slideDown 0.2s ease-out;
}

@keyframes slideDown{
  from{
    opacity: 0.60;
    transform: translateY(-2px);
  }
  to{
    opacity: 1;
    transform: none;
  }
}

/* ─────────────────────────────────────────────────────────────
   Supplier scroller stability (as provided)
   ───────────────────────────────────────────────────────────── */

.logo-seq{
  display: flex;
  gap: 22px;
  align-items: center;
  overflow: hidden;
  white-space: nowrap;
}

.logo-item{
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  background: #0f1521;
  border: 1px solid #26324a;
  border-radius: 10px;
}

.logo-item img{
  display: block;
  max-height: 42px;
  height: auto;
  width: auto;
  object-fit: contain;
}

/* optional: simple scroll animation; uncomment if needed
@keyframes scrolllogos{
  from{ transform: translateX(0); }
  to  { transform: translateX(-50%); }
}
.logo-seq.is-animating{
  animation: scrolllogos 40s linear infinite;
}
*/