/* ============================================================================
mobile-first.css — Mobile-first override layer for the couples funnel pages
----------------------------------------------------------------------------
Added 2026-07-19 (mobile-first / click-through rework).
Loaded ONLY on: MarriageCounseling.html, AlternativesToCouplesTherapy.html,
CouplesTherapyNotWorking.html, IntensiveCouplesCounseling.html,
coupleintake-.asp (linked directly in each page's , AFTER
main-styles.css so these rules win).
Philosophy: base rules target the PHONE. Larger layouts are added with
min-width media queries. The global main-styles.css is left untouched so
the rest of the site is unaffected. Remove the lines + this file to
fully revert.
========================================================================== */
/* ---------------------------------------------------------------------------
1. TYPOGRAPHY — comfortable reading size on small screens, scaling up.
main-styles.css sets .main-content to 1.4rem / 1.9rem (heavy on phones).
Start smaller on mobile, grow at wider breakpoints.
--------------------------------------------------------------------------- */
.main-content {
font-size: 1.075rem;
line-height: 1.65;
}
@media (min-width: 576px) {
.main-content { font-size: 1.15rem; line-height: 1.7; }
}
@media (min-width: 992px) {
.main-content { font-size: 1.4rem; line-height: 1.9rem; } /* original desktop */
}
.main-content p { margin-bottom: 1rem; }
/* ---------------------------------------------------------------------------
2. SECTION RHYTHM — the pages stack many `.container` blocks with mt-5.
Tighten the vertical gaps on phones so the CTA is reached sooner; restore
the roomier spacing on desktop.
--------------------------------------------------------------------------- */
.main-content .container { margin-top: 0; margin-bottom: 0; }
.main-content .mt-5 { margin-top: 1.75rem !important; }
@media (min-width: 992px) {
.main-content .mt-5 { margin-top: 3rem !important; }
}
/* ---------------------------------------------------------------------------
3. HERO / VIDEO CARDS — main-styles.css floats these and only un-floats
below 768px (desktop-first). Invert it: stacked by default (mobile),
floated only from md up.
--------------------------------------------------------------------------- */
.heroCard,
.videoCardVideoLeft,
.videoCardVideoRight {
float: none;
width: 100%;
margin-left: 0;
margin-right: 0;
}
@media (min-width: 768px) {
.heroCard {
float: left;
width: 30%;
margin-right: 1.4em;
margin-top: 1.8rem;
margin-bottom: 1.5rem;
}
.videoCardVideoLeft {
float: left;
width: 50%;
margin-right: 1.4rem;
margin-bottom: 1rem;
}
.videoCardVideoRight {
float: right;
width: 50%;
margin-left: 1.4rem;
margin-bottom: 1rem;
}
}
/* ---------------------------------------------------------------------------
4. TESTIMONIALS — full width and centred on phones; original narrower
column returns on large screens.
--------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
.testimonials .row > [class*="col-"] {
flex: 0 0 100%;
max-width: 100%;
}
}
/* ---------------------------------------------------------------------------
5. CALL-TO-ACTION BUTTONS — one consistent primary (green) across all
funnel pages, with a full-width, thumb-friendly tap target on mobile.
main-styles.css only greens `#heroCTA .hero-cta-btn`; promote that look to
ANY .hero-cta-btn and to the assessment CTAs.
--------------------------------------------------------------------------- */
.hero-cta-btn,
.assessment-button .btn {
background-color: #1f6222 !important;
border-color: #1f6222 !important;
background: linear-gradient(0deg, #1f6222 0%, #84a185 80%), var(--bs-primary-bg-subtle);
border-style: solid;
color: #ffffff !important;
opacity: 1 !important;
filter: none !important;
font-weight: 600 !important;
}
.hero-cta-btn:hover,
.assessment-button .btn:hover {
background: linear-gradient(0deg, #84a185 0%, #1f6222 80%), var(--bs-primary-bg-subtle);
border-color: #84a185 !important;
color: #ffffff !important;
}
/* Thumb-friendly sizing: min 48px tall, full width on phones. */
.main-content .btn,
.assessment-button .btn,
.hero-cta-btn {
min-height: 48px;
padding-top: .7rem;
padding-bottom: .7rem;
line-height: 1.25;
}
@media (max-width: 575.98px) {
.assessment-button .btn,
.hero-cta-btn {
display: block;
width: 100%;
}
}
/* ---------------------------------------------------------------------------
6. PROGRESSIVE REVEAL ("Read more") for long copy.
Wrap long trailing copy in … .
Styled as a clear, tappable control; label swaps via the [open] state.
--------------------------------------------------------------------------- */
.read-more {
margin: 0.5rem 0 1.5rem;
text-align: center;
}
.read-more > *:not(summary) { text-align: left; }
.read-more > summary {
list-style: none;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: .4rem;
font-family: 'Raleway', sans-serif;
font-weight: 600;
font-size: 1.05rem;
color: #1f6222;
padding: .65rem 1.1rem;
border: 1.5px solid #1f6222;
border-radius: 6px;
min-height: 44px;
user-select: none;
}
.read-more > summary::-webkit-details-marker { display: none; }
.read-more > summary::after {
content: "▾";
font-size: .9em;
transition: transform .2s ease;
}
.read-more[open] > summary::after { transform: rotate(180deg); }
.read-more > summary .rm-more { display: inline; }
.read-more > summary .rm-less { display: none; }
.read-more[open] > summary .rm-more { display: none; }
.read-more[open] > summary .rm-less { display: inline; }
.read-more[open] > summary { margin-bottom: 1rem; }
/* ---------------------------------------------------------------------------
7. FAQ — larger tap targets / spacing on mobile.
--------------------------------------------------------------------------- */
#faq details {
border: 1px solid #d8ddd6;
border-radius: 8px;
margin-bottom: .75rem;
background: #fbfcfb;
}
#faq details > summary {
cursor: pointer;
padding: 1rem 1.1rem;
font-weight: 600;
min-height: 48px;
list-style: none;
}
#faq details > summary::-webkit-details-marker { display: none; }
#faq details[open] > summary { border-bottom: 1px solid #e5e9e3; }
#faq details > p { padding: .5rem 1.1rem 1.1rem; margin: 0; }
/* ---------------------------------------------------------------------------
8. INTAKE FORM — mobile-first field sizing + multi-step wizard.
Paired fields stack on phones (also enforced in markup via col-12 col-sm-6).
Inputs get 16px+ font so iOS does not zoom on focus, and 48px tap height.
--------------------------------------------------------------------------- */
#my-form .form-control,
#my-form .form-select,
#my-form select.form-control {
font-size: 16px; /* prevents iOS auto-zoom on focus */
min-height: 48px;
padding: .6rem .75rem;
border-radius: 8px;
}
#my-form .form-group { margin-bottom: 1.1rem; }
#my-form label.form-control-label {
display: block;
font-weight: 600;
margin-bottom: .35rem;
line-height: 1.3;
}
#my-form input[type="submit"].btn {
width: 100%;
min-height: 52px;
font-size: 1.1rem;
margin-top: .5rem;
}
/* main-styles.css makes `.form-row` display:flex globally, so paired fields
(First/Last name, Live-together/Infidelity, Children/Age) sit side-by-side
and cramp on phones. Stack them below 576px; keep two-up from sm up. */
@media (max-width: 575.98px) {
#my-form .form-row > .col { flex: 1 1 100%; }
}
/* Wizard: default (no JS) shows every step — a safe fallback. When the
enhancer adds .wizard-on, only the active step is shown. */
.wizard-step { border: 0; padding: 0; margin: 0; }
.wizard-step legend {
font-family: 'Raleway', sans-serif;
font-weight: 700;
font-size: 1.15rem;
color: #1f6222;
padding: 0;
margin-bottom: .25rem;
}
.wizard-substep {
font-size: .85rem;
color: #6c757d;
margin-bottom: 1rem;
}
#my-form.wizard-on .wizard-step { display: none; }
#my-form.wizard-on .wizard-step.is-active { display: block; }
.wizard-progress {
display: none;
align-items: center;
gap: .4rem;
margin: 0 0 1.25rem;
}
#my-form.wizard-on ~ .wizard-progress,
.wizard-on .wizard-progress { display: flex; }
.wizard-progress .dot {
flex: 1 1 auto;
height: 6px;
border-radius: 3px;
background: #d8ddd6;
}
.wizard-progress .dot.done { background: #1f6222; }
.wizard-nav {
display: flex;
gap: .75rem;
margin-top: .5rem;
}
/* Next uses .hero-cta-btn — the solid bright-green button (matches the Continue
button on makeanappointment-.asp). Back is a secondary green outline. */
.wizard-nav .btn { flex: 1 1 50%; min-height: 48px; }
.wizard-next { font-weight: 600; }
.wizard-back {
background: #ffffff !important;
color: #1f6222 !important;
border: 1.5px solid #1f6222 !important;
font-weight: 600 !important;
}
.wizard-back:hover {
background: #1f6222 !important;
color: #ffffff !important;
}
/* ---------------------------------------------------------------------------
8b. BOOKING SELECTOR (makeanappointment-.asp) — labeled, stacked, full-width
cascading dropdowns with thumb-friendly sizing.
--------------------------------------------------------------------------- */
#form1 { max-width: 560px; margin: 1.5rem auto 0; }
#form1 .form-group { margin-bottom: 1.15rem; }
#form1 .booking-label {
display: block;
font-family: 'Raleway', sans-serif;
font-weight: 600;
margin-bottom: .4rem;
color: var(--bs-header-text);
}
#form1 .form-select,
#form1 .booking-select {
width: 100%;
font-size: 16px; /* prevents iOS auto-zoom on focus */
min-height: 50px;
padding: .65rem .8rem;
border-radius: 8px;
}
#form1 .booking-continue {
width: 100%;
min-height: 52px;
font-size: 1.1rem;
margin-top: .5rem;
}
#loading {
font-family: 'Raleway', sans-serif;
color: var(--bs-subtle-text);
}
/* ---------------------------------------------------------------------------
9. SCHEDULER IFRAME (coupleappointment.asp) — responsive height, no
horizontal overflow on phones.
--------------------------------------------------------------------------- */
#myIframe {
width: 100%;
max-width: 100%;
min-height: 720px;
height: 80vh;
border: 0;
}
@media (min-width: 768px) {
#myIframe { height: 800px; }
}
/* Prevent stray horizontal scroll from any wide inline element. */
.main-content { overflow-x: hidden; }