/* ==========================================================================
   css/pages.css - REUSABLE SUBPAGE DESIGN & CONTACT SYSTEM LAYOUTS
   ========================================================================== */

/* --- PAGE HERO & LAYOUTS --- */
.page-hero { background: linear-gradient(135deg, var(--dark-prime), var(--dark-surface)); padding: 80px var(--site-pad) 60px; border-bottom: 1px solid rgba(20, 184, 166, 0.1); }
.page-hero h1 { font-size: clamp(32px, 5vw, 56px); color: var(--white); font-weight: 900; letter-spacing: -1px; text-transform: uppercase; margin-top: 8px; }

.subpage-split-layout { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 60px; align-items: start; position: relative; z-index: 1; }
.subpage-accent-card { background: var(--dark-surface); color: var(--white); padding: 40px; border-radius: 8px; border-left: 4px solid var(--turquoise); }
.subpage-accent-card h3 { font-size: 14px; font-weight: 800; letter-spacing: 2px; color: var(--turquoise); margin-bottom: 20px; }
.subpage-narrative-block { font-family: var(--font-serif); font-size: clamp(18px, 2.2vw, 22px); line-height: 1.6; color: #334155; }

@media (max-width: 900px) {
  .subpage-split-layout { grid-template-columns: 1fr; gap: 40px; }
  .article-block { flex-direction: column; }
  .article-img { width: 100%; }
}

/* --- ARTICLE BLOCK LAYOUT --- */
.article-block { display: flex; gap: 40px; align-items: center; margin-bottom: 80px; }
.article-img { width: 400px; height: 300px; object-fit: cover; border-radius: 8px; }
.reversed { flex-direction: row-reverse; }
.article-text h2 { margin-bottom: 20px; color: var(--dark-prime); }

/* --- BOOKSTORE LAYOUT --- */
.book-grid-layout { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 30px; }
.book-card { background: var(--white); padding: 20px; border-radius: 8px; text-align: center; color: var(--dark-prime); }
.book-card h3 { margin: 15px 0 5px; font-size: 18px; }
.price-tag { font-weight: 800; margin: 10px 0; color: var(--turquoise); }

/* --- INTERACTIVE SLIDER COMPONENT --- */
.slider-container { position: relative; max-width: 800px; margin: 50px auto; overflow: hidden; border-radius: 10px; box-shadow: 0 4px 10px rgba(0,0,0,0.2); }
.slide { display: none; width: 100%; }
.slide img { width: 100%; height: auto; display: block; }
.fade { animation: fadeEffect 1.5s; }
@keyframes fadeEffect { from { opacity: 0.4; } to { opacity: 1; } }
.prev, .next { cursor: pointer; position: absolute; top: 50%; padding: 16px; color: white; font-weight: bold; background: rgba(0,0,0,0.4); border: none; }
.next { right: 0; }
.dot-container { text-align: center; padding: 10px; }
.dot { cursor: pointer; height: 15px; width: 15px; background-color: #bbb; border-radius: 50%; display: inline-block; margin: 0 4px; }
.active, .dot:hover { background-color: var(--turquoise); }

/* --- CONTACT SYSTEM (Kept for completeness) --- */
.watermark-bg-container { position: relative; overflow: hidden; z-index: 1; background: linear-gradient(to right, rgba(7, 18, 16, 0.6) 30%, rgba(12, 24, 21, 0.6)), url('../assets/logo/undoqo-logo.png'), url('../assets/images/jackal-black-back.jpg'); background-repeat: no-repeat; background-position: center, 15% 65%, center; background-size: auto, 450px, cover; }
.form-card-container { position: relative; z-index: 2; background: #f4faf8; border-radius: 12px; overflow: hidden; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5); }
.btn-submit-inquiry { background: var(--dark-prime); color: var(--white); padding: 14px 28px; font-weight: 800; text-transform: uppercase; border-radius: 6px; }

/* Fix for mobile form layout */
@media (max-width: 640px) {
  .subpage-split-layout {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .contact-form-panel-v2 {
    padding: 20px;
  }
  .contact-actions-v2 {
    grid-template-columns: 1fr;
  }
}

/* Ensure the select dropdown looks consistent with inputs */
.contact-form-panel-v2 select {
  width: 100%;
  cursor: pointer;
  appearance: none; /* Removes default arrow */
  background-image: url('data:image/svg+xml;utf8,<svg fill="black" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>') !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
}

/* Container for the dual-image background effect */
.support-page-container {
  background-image: 
    linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)), /* The 45% filter (1 - 0.55 = 45% visibility) */
    url('../assets/images/sunrise.jpg'),
    url('../assets/images/support.jpg');
  background-size: cover, cover, cover;
  background-position: center, center, center;
  background-attachment: fixed;
  background-blend-mode: overlay, normal, normal;
  color: #ffffff !important; /* Force all text to white */
}

/* Ensure all nested text is white */
.support-page-container h1, 
.support-page-container h2, 
.support-page-container h3, 
.support-page-container h4, 
.support-page-container p, 
.support-page-container li,
.support-page-container strong {
  color: #ffffff !important;
}

/* Ensure article blocks have high contrast or transparency if needed */
.support-page-container .subpage-accent-card {
  background: rgba(0, 0, 0, 0.6); /* Semi-transparent dark background for the aside */
  border-left: 4px solid var(--turquoise);
}

/* Fix for button text if necessary */
.support-page-container .btn-primary-solid {
  background: var(--turquoise);
  color: var(--dark-prime) !important;
  font-weight: 800;
}

/* ==========================================================================
   css/contact.css - STU CONTACT FORM EXPERIENCE
   ========================================================================== */

.contact-page {
  min-height: 100vh;
  background:
    linear-gradient(rgba(7, 18, 16, 0.75), rgba(7, 18, 16, 0.85)),
    url("../assets/images/jackal-black-back.jpg");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

.contact-form-side {
  padding: clamp(36px, 5vw, 64px);
  background:
    linear-gradient(rgba(248, 250, 249, 0.92), rgba(248, 250, 249, 0.94)),
    url("../assets/images/huts-african.jpg");
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
}

.contact-visual-panel {
  position: relative;
  min-height: 640px;
  padding: 56px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background:
    linear-gradient(rgba(7, 18, 16, 0.62), rgba(7, 18, 16, 0.82)),
    url("../assets/images/jackal-black-back.jpg");
  background-size: cover;
  background-position: center;
  color: var(--white);
}
.contact-side-logo {
  width: 144px;
  height: 144px;
  object-fit: contain;
  margin-bottom: 28px;
}

.contact-page-shell {
  min-height: calc(100vh - 90px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(40px, 6vw, 90px) var(--site-pad);
}

.contact-card {
  width: min(1120px, 100%);
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  background: var(--white);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.45);
}

.contact-brand-block,
.contact-side-details {
  position: relative;
  z-index: 1;
}

.contact-side-logo {
  width: 110px;
  height: 110px;
  object-fit: contain;
  margin-bottom: 34px;
}

.contact-brand-block h1 {
  font-size: clamp(38px, 4vw, 58px);
  line-height: 1;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.contact-brand-block p {
  max-width: 430px;
  color: var(--soft-white);
  font-size: 17px;
  line-height: 1.7;
}

.contact-side-details {
  display: grid;
  gap: 22px;
}

.contact-side-details p {
  display: grid;
  gap: 4px;
  color: var(--soft-white);
}

.contact-side-details strong {
  color: var(--turquoise);
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 2px;
}

.contact-side-details a {
  color: var(--white);
  text-decoration: none;
}

.contact-side-details a:hover {
  color: var(--turquoise);
}

.contact-form-side {
  padding: clamp(36px, 5vw, 64px);
  background: #f8faf9;
  display: flex;
  align-items: center;
}

.contact-form {
  width: 100%;
  display: grid;
  gap: 20px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.form-group {
  display: grid;
  gap: 8px;
}

.form-group label {
  color: var(--dark-prime);
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.7px;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  border: 1px solid rgba(7, 18, 16, 0.16);
  background: var(--white);
  color: var(--text-dark);
  border-radius: 6px;
  padding: 15px 16px;
  font-family: var(--font-sans);
  font-size: 15px;
  outline: none;
  transition: var(--transition-smooth);
}

.form-group textarea {
  resize: vertical;
  min-height: 140px;
  line-height: 1.6;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--turquoise);
  box-shadow: 0 0 0 4px rgba(20, 184, 166, 0.14);
}

.contact-submit-btn {
  margin-top: 8px;
  border: none;
  background: var(--dark-prime);
  color: var(--white);
  border-radius: 6px;
  padding: 17px 24px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  transition: var(--transition-smooth);
}

.contact-submit-btn:hover {
  background: var(--turquoise);
  color: var(--dark-prime);
  transform: translateY(-2px);
}

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

  .contact-visual-panel {
    min-height: 420px;
  }
}

@media (max-width: 640px) {
  .contact-page-shell {
    padding: 28px 18px;
  }

  .contact-visual-panel,
  .contact-form-side {
    padding: 30px 24px;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .contact-brand-block h1 {
    font-size: 34px;
  }
}