/* ========== Base Styles ========== */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

main {
  padding: 2em;
  max-width: 1000px;
  margin: auto;
}




h1 {
  margin-top: 0;
}

img.inline-img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1em 0;
}

footer {
  background: #003366;
  color: white;
  text-align: center;
  padding: 1em;
  margin-top: 3em;
}

/* ========== Top Bar ========== */
.top-bar {
  background: #003366;
  color: white;
  display: flex;
  justify-content: space-between;
  padding: 0.5em 1em;
  font-size: 0.9em;
}

.top-bar a {
  color: white;
  text-decoration: none;
  margin-left: 0.5em;
}

/* ========== Header & Nav ========== */
header {
  background: white;
  display: flex;
  align-items: center;
  padding: 1em;
  flex-wrap: wrap;
}

header img.logo {
  height: 60px;
  margin-right: 1em;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}

nav li {
  position: relative;
}

nav a {
  display: block;
  padding: 1em;
  text-decoration: none;
  color: #333;
}

nav li:hover > ul {
  display: block;
}

nav ul ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: white;
  border: 1px solid #ccc;
  z-index: 100;
}

nav ul ul li {
  width: 250px;
}

.has-submenu ul {
  display: none;
}

@media (min-width: 768px) {
  .has-submenu:hover ul {
    display: block;
  }
}

/* ========== Hero Image ========== */
.hero-image {
  background-image: url('images/curved.jpg'); /* update as needed */
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 300px;
}

@media (max-width: 768px) {
  .hero-image {
    height: 180px;
  }
}

.video-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 ratio */
  height: 0;
  overflow: hidden;
  max-width: 100%;
  margin: 20px 0;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


/* ========== Grid Gallery - Complete Override ========== */
.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1em;
  margin-top: 1.5em;
}

.grid-container figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  padding: 0;
  width: 100%;
}

/* Style only forms inside .grid-container */
.grid-container form {
  display: grid;
  grid-template-columns: 1fr; /* default single column on mobile */
  gap: 0.8em;
  width: 100%;
  padding: 1em;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-sizing: border-box;
}

/* Side-by-side fields when wide enough */
@media (min-width: 768px) {
  .grid-container form {
    grid-template-columns: 1fr 1fr; /* two columns */
  }
  .grid-container form label {
    grid-column: span 2; /* labels over both cols */
  }
  .grid-container form textarea {
    grid-column: span 2;
  }
  .grid-container form button {
    grid-column: span 2;
  }
}

/* Inputs */
.grid-container form label {
  font-weight: 600;
}
.grid-container form input,
.grid-container form select,
.grid-container form textarea {
  width: 100%;
  padding: 0.5em;
  border: 1px solid #ccc;
  border-radius: 6px;
  font: inherit;
  box-sizing: border-box;
}

/* Button */
.grid-container form button {
  background: #003366;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 0.75em;
  cursor: pointer;
  font-weight: 700;
}
.grid-container form button:hover {
  background: #022a55;
}


/* Default: keep full image visible unless orientation class is set */
.grid-container img,
.grid-container.gallery img {
  width: 100% !important;
  height: auto !important;
  min-height: 250px !important;
  max-height: none !important;
  max-width: 100% !important;
  object-fit: contain !important; /* preserve original unless overridden below */
  display: block !important;
  margin: 0 !important;
}

/* Soft crop rules applied only when JS tags image as .landscape or .portrait */
.grid-container img.landscape {
  aspect-ratio: 4 / 3;                /* consistent ratio for horizontals */
  object-fit: cover !important;       /* allow slight crop */
  object-position: center 35%;        /* bias upward to save heads */
}

.grid-container img.portrait {
  aspect-ratio: 3 / 4;                /* consistent ratio for verticals */
  object-fit: cover !important;       /* allow slight crop */
  object-position: center 35%;
}

.grid-container img.square {
  aspect-ratio: 1 / 1;                 /* perfect square */
  object-fit: cover !important;        /* allow slight crop */
  object-position: center 35%;
}

.grid-container figcaption {
  margin-top: 0.8em;
  font-size: 0.9em;
  color: #333;
  text-align: center;
  line-height: 1.3;
  width: 100%;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .grid-container {
    grid-template-columns: 1fr;
    gap: 1.5em;
  }
  
  .grid-container img,
  .grid-container.gallery img {
    min-height: 200px !important;
  }
}
.grid-container.gallery img.formula,
.grid-container.gallery img.diagram {
  height: auto;
  object-fit: contain;
}


/* === Specific fix for overflowing wide images in articles === */
main figure img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

/* Optional tighter bounding box for formula-type images */
main figure.wide-formula img {
  max-width: 100%;
  max-height: 300px;
  width: auto;
}

/* === Specific fix for overflowing wide images in articles === */
main figure img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

/* Optional tighter bounding box for formula-type images */
main figure.wide-formula img {
  max-width: 100%;
  max-height: 300px;
  width: auto;
}


/* ========== Footer Links Grid ========== */
.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 18px;
  max-width: 1100px;
  margin: 0 auto 10px;   /* centers & adds a bit of space above the copyright line */
}

.footer-links a {
  color: #ffffff; /* white links */
  text-decoration: none;
  font-size: 0.95em;
  line-height: 1.8;
  padding: 4px 12px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 9999px; /* pill shape */
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.05s ease;
}

.footer-links a:hover {
  background: #ffcc00; /* gold background on hover */
  color: #003366; /* dark blue text on hover */
  border-color: #ffcc00;
}


.footer-links a:active { transform: translateY(1px); }

.footer-bottom {
  font-size: 0.85em;
  opacity: 0.9;
}

/* Mobile tweaks */
@media (max-width: 600px) {
  .footer-links { gap: 6px 10px; }
  .footer-links a { font-size: 0.9em; padding: 4px 10px; }
}

/* Make the three grid items feel equal and tighten the form on desktop */
.grid-container form h2 {
  margin: 0 0 0.25em 0;
}

/* Desktop layout: labels + inputs share a row (cuts form height ~in half) */
@media (min-width: 768px) {
  .grid-container form {
    grid-template-columns: 1fr 1fr;  /* two columns */
    align-items: center;
  }
  /* Title spans full width to prevent awkward mid-line breaks */
  .grid-container form h2 {
    grid-column: 1 / -1;
  }
  /* Put label and its input on the same row (no more label spanning both cols) */
  .grid-container form label {
    grid-column: auto;         /* column 1 */
    margin-top: 0.4em;
  }
  .grid-container form input,
  .grid-container form select {
    grid-column: auto;         /* column 2 */
  }
  /* Big elements should span across both columns */
  .grid-container form textarea,
  .grid-container form button {
    grid-column: 1 / -1;
  }
}

/* OPTIONAL: if your form still feels taller than the images on some screens,
   cap its height and allow internal scrolling. Uncomment if you want this. */
/*
.grid-container form {
  max-height: 520px;
  overflow: auto;
}
*/


/* --- Chamber Referral Layout --- */
.referral-wrap {
  display: grid;
  grid-template-columns: 1.2fr 1fr; /* copy | form */
  gap: 2rem;
  align-items: start;
  margin-block: 2.5rem 3rem;
}

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

/* Tighten headings so they don't break early */
h1, h2, h3, .tight {
  hyphens: auto;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

/* Copy column */
.referral-copy ul.benefits {
  margin: 1rem 0 0;
  padding-left: 1.25rem;
}
.referral-copy ul.benefits li {
  margin: 0.4rem 0;
}

/* Card form */
.referral-card {
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 14px;
  padding: 1.25rem;
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}

.referral-card h3 {
  margin-top: 0;
  margin-bottom: 0.75rem;
  font-size: 1.25rem;
}

/* Form rows */
.form-row { margin-bottom: 0.9rem; }
.form-row label {
  display: block;
  font-size: 0.95rem;
  margin-bottom: 0.35rem;
}
.referral-card input[type="text"],
.referral-card input[type="tel"],
.referral-card input[type="email"],
.referral-card textarea {
  width: 100%;
  border: 1px solid #d2d6dc;
  border-radius: 10px;
  padding: 0.65rem 0.8rem;
  font-size: 1rem;
  outline: none;
  transition: border-color 120ms ease, box-shadow 120ms ease;
  background: #fafafa;
}

.referral-card textarea { resize: vertical; }

.referral-card input:focus,
.referral-card textarea:focus {
  border-color: #7aa2ff;
  box-shadow: 0 0 0 3px rgba(122,162,255,0.2);
  background: #fff;
}

/* Button */
.btn-primary {
  display: inline-block;
  border: 0;
  background: #0f62fe;   /* readable blue; change to your brand color */
  color: #fff;
  font-weight: 600;
  padding: 0.75rem 1rem;
  border-radius: 12px;
  cursor: pointer;
  transition: transform 80ms ease, box-shadow 120ms ease;
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 16px rgba(0,0,0,0.12); }
.btn-primary:active { transform: translateY(0); box-shadow: none; }

.tiny-note {
  color: #6b7280;
  font-size: 0.85rem;
  margin-top: 0.5rem;
}

/* Optional: make images in your .gallery not dwarf the form */
.gallery .diagram {
  width: 100%;
  height: auto;
  border-radius: 8px;
  display: block;
}

/* make widths include padding + border so 100% really means 100% */
.referral-card, .referral-card * { box-sizing: border-box; }

/* belt-and-suspenders: prevent any tiny overflow */
.referral-card { overflow: hidden; }