/* Contact page – dark blue theme (matches your site variables) */
:root{
  --bg:            #08111f;
  --panel-1:       #0b1428;
  --panel-2:       #0b1c36;
  --card:          #0b1325;
  --border:        #12305a;
  --border-2:      #163a70;

  --text:          #e6f0ff;
  --text-weak:     #cfe1ff;
  --muted:         #9fb3c8;
  --muted-2:       #6e86a6;

  --accent:        #2563eb;
  --accent-2:      #1e40af;
  --accent-ghost:  #0c1a33;

  --success:       #16a34a;
  --danger:        #ef4444;

  --radius:        14px;
  --shadow:        0 10px 26px rgba(3,12,28,.45);
}

/* Base */
body{ background: var(--bg); color: var(--text); }

/* Scope box-sizing so nothing overflows because of padding/borders */
.contact-page, .contact-page * { box-sizing: border-box; }

/* Main page wrapper */
.contact-page{
  width: 100%;
  max-width: 1100px;
  margin: 24px auto;            /* space below header */
  padding: 0 16px 32px;
  overflow-x: hidden;            /* stop any child from causing sideways scroll */
}

/* Hero */
.contact-hero{
  background: linear-gradient(180deg, var(--panel-1) 0%, var(--panel-2) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px;
  text-align: center;
  margin-bottom: 18px;
}
.contact-hero h1{ margin:0 0 6px; font-size: 26px; font-weight: 800; color: var(--text-weak); }
.contact-hero h1 span{ color: #fff; }
.contact-hero p{ margin:0; color: var(--muted); }

/* Grid */
.contact-grid{
  display: grid;
  grid-template-columns: 1.5fr 0.9fr;   /* desktop layout unchanged */
  gap: 18px;
  align-items: start;
  justify-items: stretch;
}
.contact-grid > * { min-width: 0; }     /* critical: allow children to shrink */

/* Cards */
.contact-card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
  overflow: hidden;                     /* prevents internal overflow on mobile */
}
.aside-card{
  background: var(--panel-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
  margin-bottom: 16px;
}
.aside-card h3{
  margin: 0 0 8px; font-size: 16px; font-weight: 800; color: var(--text-weak);
}
.aside-card .pill{
  display:inline-block; padding: 2px 8px; border-radius: 999px;
  background: #0d2a16; color: #b9f6c1; border: 1px solid rgba(22,163,74,.4);
}
.aside-card a{ color: var(--text-weak); text-decoration: none; border-bottom: 1px dashed var(--accent); }
.aside-card a:hover{ color: #fff; border-bottom-color: #fff; }

.tips{ list-style: disc inside; margin: 6px 0 0; color: var(--muted); }
.tips li{ margin: 4px 0; }

/* Form */
.contact-form{ display: grid; gap: 12px; width: 100%; }
.row.two{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.field { min-width: 0; }
.field label{
  display:block; font-size:13px; color: var(--muted); margin-bottom: 6px; text-align:left;
}
.field input,
.field textarea,
.contact-form input,
.contact-form textarea{
  width:100%;
  max-width:100%;                     /* never exceed card width */
  color: var(--text);
  background: #0b1325;
  border:1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
  outline: none;
  display:block;
  text-align:left;
}
.field input:focus, .field textarea:focus{
  border-color: var(--accent); box-shadow: 0 0 0 3px rgba(37,99,235,.15);
}
.contact-form textarea{ resize: vertical; }

/* Honeypot (hidden) */
.hp{ display:none !important; }

/* Alerts */
.alert{
  border-radius: 12px; padding: 10px 12px; font-weight: 600;
  display:flex; align-items:center; gap: 10px; margin-bottom: 8px;
  border:1px solid transparent;
}
.alert.ok{
  background: #072815; color: #b9f6c1; border-color: rgba(22,163,74,.35);
}
.alert.bad{
  background: #2a0b0b; color: #ffd1d1; border-color: rgba(239,68,68,.35);
}

/* Button */
.btn-primary{
  display:inline-flex; align-items:center; gap:8px;
  padding: 10px 14px; border-radius: 999px; border:1px solid var(--border);
  background: var(--accent); color: #fff; font-weight: 800; cursor:pointer;
  transition: transform .1s ease, background-color .2s ease;
}
.btn-primary:hover{ transform: translateY(-1px); background: var(--accent-2); }

.small{ font-size: 12px; }
.muted{ color: var(--muted); }

/* Media & embeds never overflow */
.contact-page img,
.contact-page iframe{
  max-width: 100%;
  height: auto;
  display: block;
}

/* ================== Responsive fixes ================== */

/* Stack cols on tablet/phone and allow true shrinking */
@media (max-width: 900px){
  .contact-grid{
    grid-template-columns: minmax(0,1fr);
  }
}

/* Two-up fields shrink safely; single column on small phones */
@media (max-width: 640px){
  .row.two{
    grid-template-columns: minmax(0,1fr);
  }
}

/* Tighten page padding and ensure no horizontal scroll on small screens */
@media (max-width: 640px){
  .contact-page{
    padding-left: 14px;
    padding-right: 14px;
  }
}

/* Safety net for very narrow devices */
@media (max-width: 480px){
  .contact-page{
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* iOS safe areas (prevents subtle right-side clip on some devices) */
@supports (padding: max(0px)) {
  .contact-page {
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
  }
}