/* styles.css — expanseElectronics modern UI */
:root{
  --bg: #0b0d12;
  --bg-elev: #121522;
  --text: #e8eaf0;
  --muted: #a9b0c3;
  --brand: #3a50f9;
  --brand-600: #2e3fcb;
  --ring: rgba(58,80,249,.35);
  --maxw: 1120px;
  --radius: 14px;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Layout */
.container{width:min(100% - 2rem, var(--maxw));margin-inline:auto;}
.grid{display:grid;gap:2rem;}
@media(min-width:900px){.grid-2{grid-template-columns:1fr 1fr;}}

/* Header */
.header{
  position:sticky;top:0;z-index:100;
  background:rgba(11,13,18,.85);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;
  padding:.75rem 0;
}
.logo img{
  height:48px;max-height:48px;
  width:auto;display:block;
  object-fit:contain;
}

/* Tagline bubble in hero */
.tagline {
  display: inline-block;
  margin-top: 1rem;
  padding: .6rem 1.2rem;
  border-radius: 999px;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 6px 16px rgba(0,0,0,.35);
  text-align: center;
  font-weight: 500;
  font-size: 1.05rem;
  backdrop-filter: blur(8px);
}
:root[data-theme="light"] .tagline {
  background: rgba(255,255,255,.8);
  border-color: rgba(0,0,0,.1);
  color: var(--text);
}


/* Buttons */
.btn{
  border:1px solid transparent;
  padding:.75rem 1.25rem;
  border-radius:var(--radius);
  font-weight:600;
  text-decoration:none;
  display:inline-flex;align-items:center;gap:.5rem;
  color:#fff;background:var(--brand);
  box-shadow:0 8px 16px rgba(58,80,249,.25);
  transition:background .25s ease,transform .2s ease;
}
.btn:hover{background:var(--brand-600);transform:translateY(-1px);}
.btn.ghost{background:transparent;border:1px solid rgba(255,255,255,.2);color:var(--text);box-shadow:none;}
.btn.ghost:hover{border-color:rgba(255,255,255,.35);}

/* Hero */
.hero{
  position:relative;min-height:70vh;display:grid;place-items:center;
  background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.75)),
             url('images/gen3.jpg') center/cover no-repeat;
  text-align:center;
}
.hero-content{padding:3rem 1rem;}
.hero .brandmark{
  max-width:280px;width:50%;height:auto;margin:0 auto 1.5rem;
  object-fit:contain;
}
.hero h1{font-size:clamp(2.2rem,6vw,4rem);margin:.5rem 0;line-height:1.1;}

/* Sections */
.section{padding:clamp(2rem,5vw,5rem) 0;}
.section.alt{background:var(--bg-elev);}
.lede{font-size:1.15rem;color:var(--muted);max-width:65ch;}

/* Media */
.media-img{
  border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow);
}
.media-img img{width:100%;height:auto;display:block;}

/* Contact */
.contact-block{padding:2rem;background:var(--bg-elev);border-radius:var(--radius);box-shadow:var(--shadow);}
.contact-block a{color:var(--brand);text-decoration:none;}
.contact-block a:hover{text-decoration:underline;}

/* Embed */
.embed iframe{
  width:100%;max-width:100%;border:none;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

/* Footer */
.footer{padding:2rem 0;color:var(--muted);font-size:.95rem;border-top:1px solid rgba(255,255,255,.08);text-align:center;}

:focus-visible{outline:3px solid var(--ring);outline-offset:3px;border-radius:8px;}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important;}
}


/* --- Form Styles --- */
form{ width:100%; }
form label{ display:block; font-weight:500; margin-bottom:.25rem; color: var(--text); }
form input, form textarea, form select{
  width:100%;
  padding:.65rem .75rem;
  border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.15);
  background:rgba(255,255,255,.05);
  color:var(--text);
  font:inherit;
  line-height:1.4;
  transition:border-color .2s, box-shadow .2s, background .2s;
}
form input::placeholder, form textarea::placeholder{
  color:var(--muted);
}
form input:focus, form textarea:focus, form select:focus{
  outline:none;
  border-color:var(--brand);
  box-shadow:0 0 0 3px var(--ring);
  background:rgba(255,255,255,.08);
}
form textarea{ resize:vertical; min-height:120px; }
form button[type=submit]{
  margin-top:.5rem;
}


/* ===== Forms (polished) ===== */
form { width: 100%; }
label { display: block; font-weight: 600; margin-bottom: .25rem; color: var(--text); }
label + small { display: block; color: var(--muted); margin-top: .25rem; }

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="search"],
textarea,
select {
  width: 100%;
  margin-top: .35rem;
  margin-bottom: .9rem;
  padding: .85rem 1rem;
  background: rgba(255,255,255,.04);
  color: var(--text);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  outline: none;
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

textarea { resize: vertical; min-height: 120px; }

input::placeholder,
textarea::placeholder { color: #b8bfd6; opacity: .8; }

input:focus,
textarea:focus,
select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 4px var(--ring);
  background: rgba(255,255,255,.05);
}

input:disabled,
textarea:disabled,
select:disabled {
  opacity: .6;
  cursor: not-allowed;
}

/* Inline validation (optional) */
.input-error { border-color: #ff6b6b !important; }
.input-success { border-color: #4cd97b !important; }

.form-row { display: grid; gap: 1rem; }
@media (min-width: 720px) {
  .form-row.two { grid-template-columns: 1fr 1fr; }
  .form-row.three { grid-template-columns: 1fr 1fr 1fr; }
}

/* Align actions */
.form-actions { display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; }
.form-actions .btn { margin-top: .25rem; }

/* Radios & Checkboxes */
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--brand);
}

/* Success/notice banners */
.notice {
  padding: .9rem 1rem;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.04));
  color: var(--text);
}
.notice.success { border-color: rgba(76,217,123,.35); }
.notice.error { border-color: rgba(255,107,107,.35); }

/* Buttons in dark forms */
button[type="submit"].btn, .btn[type="submit"] { cursor: pointer; }


/* === Layout helpers for new markup === */
.grid.grid-2{ display:grid; gap:2rem; grid-template-columns: 1fr; }
@media (min-width: 900px){
  .grid.grid-2{ grid-template-columns: 1fr 1fr; align-items: start; }
}
.media-img img{
  display:block; width:100%; height:auto;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* === Contact blocks === */
.contact-block{
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius);
  padding: clamp(1rem, 2.5vw, 1.5rem);
  box-shadow: var(--shadow);
}
.contact-block h2, .contact-block h3{ margin-top:0; }
.contact-block a{ color: var(--text); text-decoration: underline; text-decoration-color: rgba(255,255,255,.35); }
.contact-block a:hover{ text-decoration-color: rgba(255,255,255,.6); }

/* Make the inner .card blend with the parent block (no double padding look) */
.contact-block .card{
  background: transparent;
  border: 1px dashed rgba(255,255,255,.10);
  padding: 1rem;
  box-shadow: none;
  border-radius: 10px;
}

/* === Form fine-tuning === */
form.stack label{ font-weight:600; }
form.stack input, form.stack textarea, form.stack select{
  font: inherit;
}
form .btn{ width: fit-content; }

/* Optional: two-up fields with .form-row.two */
.form-row.two > * { min-width: 0; }

/* === Embed section spacing === */
.section.embed #my-store-32575378{ margin-top: .5rem; }


/* === Theme support === */
:root[data-theme="light"] {
  --bg: #fdfdfd;
  --bg-elev: #ffffff;
  --text: #1a1a1a;
  --muted: #555;
  --brand: #3a50f9;
  --brand-600: #2e3fcb;
  --ring: rgba(58,80,249,.35);
}

#theme-toggle {
  font-size: 1rem;
  padding: .4rem .6rem;
  border-radius: 50%;
  line-height: 1;
  min-width: 2.2rem;
  justify-content: center;
}

/* Pride message */
.pride {
  margin-top: 1rem;
  font-weight: 600;
  background-image: linear-gradient(90deg,
    #e40303, #ff8c00, #ffed00, #008026, #004dff, #750787);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}