/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

/* =============================================================
   IA West PTIA — Site Styles
   Classes map directly to elements visible in the Bricks editor.
   ============================================================= */

/* ── Base resets ── */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
.brxe-section  { width: 100% !important; max-width: 100% !important; }
.brxe-container { width: 100% !important; }

/* ── Hero section ── */
.ptia-hero {
  background-color: #1a1a2e;
  background-image: url('https://iawestptia.org/wp-content/uploads/classroom-bg.jpg');
  background-position: center center;
  background-size: cover;
  min-height: 100vh;
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 80px 24px;
  position: relative;
}
.ptia-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(13, 27, 62, 0.75);
  z-index: 0;
}
.ptia-hero > * { position: relative; z-index: 1; }

.ptia-hero__inner {
  width: 100% !important;
  max-width: 800px !important;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 24px;
  margin: 0 auto;
  padding: 0;
}

.ptia-hero__title {
  color: #ffffff;
  font-size: clamp(28px, 5vw, 56px);
  font-weight: 800;
  line-height: 1.15;
  margin: 0;
  width: 100%;
}

.ptia-hero__subtitle {
  color: #cce0f0;
  font-size: clamp(16px, 2.5vw, 20px);
  line-height: 1.7;
  width: 100%;
}

/* ── Shared: eyebrow label ── */
.ptia-eyebrow {
  color: #7ecfed;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
}

/* ── Shared: CTA button ── */
.ptia-btn {
  display: inline-block !important;
  background-color: #e8a020 !important;
  color: #ffffff !important;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 15px 32px !important;
  border-radius: 4px;
  text-decoration: none;
  margin-top: 8px;
  transition: background-color 0.2s;
  white-space: nowrap;
}
.ptia-btn:hover { background-color: #c9881a !important; }

/* ── About section ── */
.ptia-about {
  background-color: #f5f8fc;
  padding: 80px 24px;
}

.ptia-about__inner {
  width: 100% !important;
  max-width: 860px !important;
  margin: 0 auto;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 20px;
  padding: 0;
}

/* About eyebrow is handled by .ptia-eyebrow above,
   but the about section uses gold instead of sky blue */
.ptia-about .ptia-eyebrow {
  color: #ffa64d;
}

/* ── Shared: section headings & body ── */
.ptia-section-title {
  color: #0d1b3e;
  font-size: clamp(24px, 3.5vw, 36px);
  font-weight: 800;
  line-height: 1.2;
  width: 100%;
}

.ptia-section-subtitle {
  color: #0d1b3e;
  font-size: clamp(20px, 2.5vw, 26px);
  font-weight: 700;
  line-height: 1.3;
  width: 100%;
  margin-top: 12px;
}
/*
	.ptia-body-text {
	  color: #4a5568;
	  font-size: clamp(16px, 2vw, 18px);
	  line-height: 1.8;
	  width: 100%;
	}
*/

.ptia-mission-list ul {
  text-align: left;
  color: #4a5568;
  font-size: clamp(15px, 1.8vw, 17px);
  line-height: 1.8;
  padding-left: 20px;
  margin: 0;
}

/* ── Signup / Email list section ── */
.ptia-signup {
  background-color: #0d1b3e;
  padding: 90px 24px;
}

.ptia-signup__inner {
  width: 100% !important;
  max-width: 680px !important;
  margin: 0 auto;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 20px;
  padding: 0;
}

/* Override shared classes for the dark signup section */
.ptia-signup .ptia-section-title { color: #ffffff; }
.ptia-signup .ptia-body-text     { color: #a0b8cc; }
.ptia-signup .wsf-form,
.ptia-signup .wsf-form-canvas    { width: 100% !important; max-width: 100% !important; }

/* ── Footer ── */
.ptia-footer {
  background-color: #070f1f;
  padding: 32px 24px;
}

.ptia-footer__inner {
  display: flex !important;
  justify-content: center;
  text-align: center;
  width: 100%;
}

.ptia-footer__text {
  color: #4a6080;
  font-size: 13px;
}

/* ── WS Form: light text on dark background ── */
.ptia-signup .wsf-form {
  --wsf-form-color-base:          #ffffff;       /* general form text          */
  --wsf-field-label-color:        #ffffff;       /* field labels (First Name…)  */
  --wsf-field-color-placeholder:  rgba(0, 0, 0, 0.45); /* placeholder hint text */
}

/* Direct rule for typed text — bypasses the CSS variable chain */
.ptia-signup .wsf-form input.wsf-field,
.ptia-signup .wsf-form textarea.wsf-field,
.ptia-signup .wsf-form select.wsf-field {
  color: #5b5c5c !important;
}

/* ── Responsive: Tablet (≤768px) ── */
@media (max-width: 768px) {
  .ptia-hero    { padding: 60px 20px; }
  .ptia-about   { padding: 56px 20px; }
  .ptia-signup  { padding: 60px 20px; }
  .ptia-footer  { padding: 28px 20px; }
  .ptia-hero__inner,
  .ptia-about__inner,
  .ptia-signup__inner { gap: 16px; }
}

/* ── Responsive: Mobile (≤480px) ── */
@media (max-width: 480px) {
  .ptia-hero   { padding: 48px 16px; min-height: 100svh; }
  .ptia-btn    { width: 100% !important; text-align: center; padding: 15px 20px !important; }
  .ptia-about  { padding: 48px 16px; }
  .ptia-signup { padding: 48px 16px; }
  .ptia-footer { padding: 24px 16px; }
}