/*
Theme Name: Custom Theme
Theme URI: http://wordpress.org/themes/twentythirteen
Author: John Dev
Author URI: http://johndev.com/
Description: The 2013 theme for WordPress takes us back to the blog, featuring a full range of post formats, each displayed beautifully in their own unique way. Design details abound, starting with a vibrant color scheme and matching header images, beautiful typography and icons, and a flexible layout that looks great on any device, big or small.
Version: 2.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: black, brown, orange, tan, white, yellow, light, one-column, two-columns, right-sidebar, flexible-width, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, translation-ready
Text Domain: twentythirteen
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/
/* =============================================================================
HARBOR INTAKE FORMS — RESPONSIVE LAYER (K-12 + COLLEGE, merged)
Dr. Rance L. Harbor, Ph.D. — Initial Intake for Diagnostic Interview
Replaces k12-form-responsive.css. Load this one file on BOTH form pages.
HOW TO USE
1. Load AFTER your existing form stylesheet (or paste at the bottom of
style.css / Appearance > Customize > Additional CSS).
2. Your theme needs in or none of this fires.
3. No shortcode changes required. Column targeting is done with
:nth-child(), because every table row in these forms has a fixed
number of columns.
ORGANISATION
Rules are tagged so you can find things fast:
[BOTH] shared by the K-12 and College forms
[K-12] only exists on the K-12 form
[COLLEGE] only exists on the College form
Rules that target a class the current page doesn't have simply do nothing,
so it is safe to load the whole file everywhere.
BREAKPOINTS (Bootstrap 5)
lg <= 991.98px tablets -> 2-column layouts
md <= 767.98px phones -> tables become stacked cards
sm <= 575.98px small phones -> everything single column
============================================================================= */
/* =============================================================================
0. GLOBAL SAFETY — applies at every size, changes nothing on desktop
============================================================================= */
.wpcf7-form,
.wpcf7-form *,
.wpcf7-form *::before,
.wpcf7-form *::after {
box-sizing: border-box;
}
.wpcf7-form input,
.wpcf7-form select,
.wpcf7-form textarea {
max-width: 100%;
}
/* Grid children must be allowed to shrink below their content width or the
whole table pushes the page sideways. #1 cause of horizontal scroll. */
.form-block .form-table > *,
.form-block .block-content > *,
.form-block .checkbox-column,
.form-block .status-options,
.form-block .question-text {
min-width: 0;
}
/* CF7 wraps every field in an inline , which is why fields refuse to
fill their cell. Only promote it to block where the field owns the whole
cell — inline groups like "Other: ____" are deliberately excluded. */
.form-block .table-cell:not(.simple-field-label) > .wpcf7-form-control-wrap,
.form-block .form-group > .wpcf7-form-control-wrap,
.form-block .input-group > .wpcf7-form-control-wrap,
.textarea-container > .wpcf7-form-control-wrap,
.drag-drop-zone > .wpcf7-form-control-wrap {
display: block;
width: 100%;
}
/* =============================================================================
1. TABLET AND BELOW (<= 991.98px)
============================================================================= */
@media (max-width: 991.98px) {
/* --- [BOTH] typography + spacing ---------------------------------------- */
.form-block {
margin-bottom: 28px;
}
.form-block .block-title {
font-size: 18px;
padding: 10px 14px;
}
.form-block .block-content {
padding: 16px 14px;
}
.form-block .sub-section-title,
.form-block .section-subtitle,
.form-block .schedule-title,
.form-block .education-title,
.form-block .additional-title {
font-size: 16px;
}
/* 16px minimum stops iOS Safari zooming in when a field is focused. */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="date"],
.wpcf7-form input[type="number"],
.wpcf7-form select,
.wpcf7-form textarea {
font-size: 16px;
width: 100%;
min-height: 42px;
}
.wpcf7-form textarea {
min-height: 140px;
}
/* Inline underline-style fields stay compact. */
.wpcf7-form .simple-field,
.wpcf7-form .underline-input,
.wpcf7-form .line-input {
min-height: 34px;
}
/* --- [BOTH] checkboxes: real tap targets, never squashed ---------------- */
.wpcf7-form input[type="checkbox"],
.wpcf7-form input[type="radio"] {
width: 18px;
height: 18px;
min-width: 18px;
flex: 0 0 auto;
margin-right: 0px;
}
.wpcf7-form .wpcf7-checkbox,
.wpcf7-form .wpcf7-radio {
display: flex;
flex-wrap: wrap;
gap: 6px 20px;
}
.wpcf7-form .wpcf7-list-item {
display: inline-flex;
align-items: center;
margin: 0;
}
.wpcf7-form .wpcf7-list-item-label {
line-height: 1.35;
}
.form-block .cb-label {
display: flex;
align-items: flex-start;
line-height: 1.4;
}
/* --- [BOTH] date completed ---------------------------------------------- */
.date-completed-wrapper {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
padding: 0 14px;
}
.date-completed-wrapper .wpcf7-form-control-wrap {
width: auto;
flex: 1 1 200px;
}
/* --- [BOTH] client information: 4 cols -> 2 cols ------------------------ */
.form-block .block-content.grid-4-col {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px 16px;
}
.form-block .block-content.grid-4-col .col-span-2 {
grid-column: span 2;
}
/* --- [BOTH] current concerns: 4 columns of checkboxes -> 2 -------------- */
.form-block .checkbox-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 4px 20px;
}
.form-block .cb-inline-group {
display: flex;
flex-wrap: wrap;
gap: 4px 14px;
}
/* --- [BOTH] childhood concerns / [K-12] prenatal + pregnancy ------------ */
/* 4-column tables: [condition][answer][condition][answer]. Drop to 2 so
each condition keeps its own answer beside it, and hide the duplicate
pair of headers. */
.form-block .form-table.grid-prenatal,
.form-block .form-table.grid-onset {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
}
.form-block .form-table.grid-prenatal > .table-header:nth-child(3),
.form-block .form-table.grid-prenatal > .table-header:nth-child(4),
.form-block .form-table.grid-onset > .table-header:nth-child(3),
.form-block .form-table.grid-onset > .table-header:nth-child(4) {
display: none;
}
.form-block .form-table.grid-onset .table-cell:nth-child(2n) input {
max-width: 90px;
}
.form-block .trimester-bubbles {
display: flex;
gap: 6px;
justify-content: center;
}
.form-block .simple-field-label {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
}
.form-block .simple-field-label .wpcf7-form-control-wrap {
width: auto;
flex: 1 1 90px;
}
.form-block .top-checkbox-group {
display: flex;
flex-wrap: wrap;
gap: 8px 20px;
}
/* --- [BOTH] education field rows: 3-col / 2-col -> 2 up ----------------- */
.form-block .form-grid.grid-3-col,
.form-block .form-grid.grid-2-col,
.form-block .form-grid.grid-college-top {
display: grid;
grid-template-columns: repeat(1, minmax(0, 1fr));
gap: 0px 4px;
}
/* --- [COLLEGE] current status row --------------------------------------- */
.form-block .status-row {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
.form-block .status-options {
display: flex;
flex-wrap: wrap;
gap: 8px 20px;
width: 100%;
}
.form-block .status-options .check-label {
display: inline-flex;
align-items: center;
}
/* --- [COLLEGE] credits / GPA / graduation date footer ------------------- */
.form-block .form-footer-metrics {
display: flex;
flex-wrap: wrap;
gap: 14px 24px;
}
.form-block .underline-input-group {
display: flex;
align-items: center;
gap: 8px;
flex: 1 1 220px;
}
.form-block .underline-input-group .wpcf7-form-control-wrap {
display: block;
width: auto;
flex: 1 1 90px;
min-width: 80px;
}
/* --- [BOTH] upload area -------------------------------------------------- */
.upload-flex,
.drag-drop-zone {
width: 100%;
}
/* College form nests a second .drag-drop-zone inside the first — neutralise
the inner one so you don't get a box inside a box. */
.drag-drop-zone .drag-drop-zone {
min-height: 0;
padding: 0;
border: 0;
background: none;
}
}
/* =============================================================================
2. PHONE (<= 767.98px) — the tables become stacked cards
============================================================================= */
@media (max-width: 767.98px) {
/* ---------------------------------------------------------------------------
2a. [BOTH] The stacking engine
------------------------------------------------------------------------ */
.form-block .form-table.repeater-layout-set {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 10px;
padding: 3px 10px;
}
.form-block .form-table.repeater-layout-set .table-cell,
.form-block .form-table.grid-screening .table-cell,
.form-block .form-table.grid-schedule .table-cell,
.form-block .form-table.grid-college-matrix .table-cell {
width: 100%;
padding: 0;
border: 0;
}
/* The small uppercase label above each stacked field. `content` is none
here and switched on per column further down, so the shared styling is
written once and inherited. */
.form-block .form-table .table-cell::before {
content: none;
display: block;
margin-bottom: 4px;
font-size: 13px;
font-weight: 500;
letter-spacing: 0.04em;
text-transform: uppercase;
color: rgb(0 0 0 / 81%);
}
/* Row dividers, grouped by how many columns the row has. ------------------ */
/* 2 columns */
.form-block .Recreation-Col .repeater-layout-set .table-cell:nth-child(2n + 1), .form-block .Not-Living .repeater-layout-set, .form-block .Free-Time .form-block .Family-Act .repeater-layout-set .table-cell:nth-child(3n + 1), .form-block .Provider-Info .table-cell:nth-child(3n + 1), .form-block .Current-Diagnoses .repeater-layout-set .table-cell:nth-child(3n + 1), .form-block .Outpatient-Treat .repeater-layout-set .table-cell:nth-child(3n + 1), .form-block .Hospitalization .repeater-layout-set .table-cell:nth-child(3n + 1), .form-block .Extra-Curricular .repeater-layout-set .table-cell:nth-child(3n + 1), .form-block .All-Current-Med .repeater-layout-set .table-cell:nth-child(4n + 1), .form-block .College-Family-Member .repeater-layout-set .table-cell:nth-child(4n + 1), .form-block .Living-Client .repeater-layout-set .table-cell:nth-child(5n + 1), .form-block .Current-Class .repeater-layout-set .table-cell:nth-child(5n + 1), .form-block .High-School-His .repeater-layout-set .table-cell:nth-child(5n + 1) {
margin-top: 6px;
padding-top: 14px;
border-top: 2px solid rgba(0, 0, 0, 0.12);
}
.form-block .repeater-layout-set .table-cell:first-child {
margin-top: 0;
padding-top: 0;
border-top: 0;
}
/* Header rows have nothing left to align to once the table is stacked. */
.form-block .Living-Client .form-table.grid-living,
.form-block .Not-Living .form-table.grid-not-living,
.form-block .Free-Time .form-table.grid-activities,
.form-block .Family-Act .form-table.grid-activities,
.form-block .Provider-Info .form-table.grid-provider,
.form-block .Current-Diagnoses .form-table.grid-diagnoses,
.form-block .All-Current-Med .form-table.grid-medications,
.form-block .Outpatient-Treat .form-table.grid-outpatient,
.form-block .Hospitalization .form-table.grid-diagnoses,
.form-block .Extra-Curricular .form-table.grid-extracurricular,
.form-block .Current-Class .form-table.grid-class-schedule,
.form-block .Recreation-Col .form-table.grid-recreation,
.form-block .College-Family-Member .form-table.grid-college-family-member,
.form-block .High-School-His .form-table.grid-high-school,
.form-block .form-table.grid-screening > .table-header,
.form-block .form-table.grid-schedule > .table-header,
.form-block .form-table.grid-college-matrix > .table-header {
display: none;
}
/* Severity bubbles read as a plain 1-2-3-4 row once the header is gone. */
.form-block .trimester-bubbles.radio-custom {
justify-content: flex-start;
gap: 10px;
}
/* Centred cells make no sense in a stacked card. */
.form-block .repeater-layout-set .table-cell.cell-center,
.form-block .repeater-layout-set .table-cell.text-center {
text-align: left;
}
/* ---------------------------------------------------------------------------
2b. [BOTH] Column labels — sections that appear on both forms
------------------------------------------------------------------------ */
/* Leisure interests + family activities (3 cols) */
.form-block .Free-Time .repeater-layout-set .table-cell:nth-child(3n + 1)::before,
.form-block .Family-Act .repeater-layout-set .table-cell:nth-child(3n + 1)::before { content: "Activity"; }
.form-block .Free-Time .repeater-layout-set .table-cell:nth-child(3n + 2)::before,
.form-block .Family-Act .repeater-layout-set .table-cell:nth-child(3n + 2)::before { content: "How enjoyable?"; }
.form-block .Free-Time .repeater-layout-set .table-cell:nth-child(3n + 3)::before,
.form-block .Family-Act .repeater-layout-set .table-cell:nth-child(3n + 3)::before { content: "How often?"; }
/* Provider information (3 cols) */
.form-block .Provider-Info .repeater-layout-set .table-cell:nth-child(3n + 1)::before { content: "Specialty"; }
.form-block .Provider-Info .repeater-layout-set .table-cell:nth-child(3n + 2)::before { content: "Name"; }
.form-block .Provider-Info .repeater-layout-set .table-cell:nth-child(3n + 3)::before { content: "Date last visit"; }
/* Current diagnoses (3 cols) */
.form-block .Current-Diagnoses .repeater-layout-set .table-cell:nth-child(3n + 1)::before { content: "Medical or mental health diagnosis"; }
.form-block .Current-Diagnoses .repeater-layout-set .table-cell:nth-child(3n + 2)::before { content: "Initial date"; }
.form-block .Current-Diagnoses .repeater-layout-set .table-cell:nth-child(3n + 3)::before { content: "How serious — 1 none, 2 some, 3 moderate, 4 very"; }
/* All current medications (4 cols) */
.form-block .All-Current-Med .repeater-layout-set .table-cell:nth-child(4n + 1)::before { content: "Medication name"; }
.form-block .All-Current-Med .repeater-layout-set .table-cell:nth-child(4n + 2)::before { content: "Dosage"; }
.form-block .All-Current-Med .repeater-layout-set .table-cell:nth-child(4n + 3)::before { content: "Estimated date began"; }
.form-block .All-Current-Med .repeater-layout-set .table-cell:nth-child(4n + 4)::before { content: "Brief reason"; }
/* Outpatient treatment (3 cols) */
.form-block .Outpatient-Treat .repeater-layout-set .table-cell:nth-child(3n + 1)::before { content: "Outpatient therapy"; }
.form-block .Outpatient-Treat .repeater-layout-set .table-cell:nth-child(3n + 2)::before { content: "Dates"; }
.form-block .Outpatient-Treat .repeater-layout-set .table-cell:nth-child(3n + 3)::before { content: "Provider"; }
/* Hospitalizations (3 cols) */
.form-block .Hospitalization .repeater-layout-set .table-cell:nth-child(3n + 1)::before { content: "Hospitalization"; }
.form-block .Hospitalization .repeater-layout-set .table-cell:nth-child(3n + 2)::before { content: "Initial date"; }
.form-block .Hospitalization .repeater-layout-set .table-cell:nth-child(3n + 3)::before { content: "How serious — 1 mild, 2 some, 3 moderate, 4 severe"; }
/* Yes / no question rows */
.form-block .question-row {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
padding: 12px 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.form-block .question-row .question-text {
width: 100%;
line-height: 1.45;
}
.form-block .question-row .question-options {
display: flex;
gap: 28px;
width: 100%;
}
.form-block .question-row .check-label {
display: inline-flex;
align-items: center;
}
/* Upload + submit */
.upload-action-bar .upload-flex {
display: flex;
flex-direction: column;
gap: 12px;
}
.drag-drop-zone {
width: 100%;
min-height: 110px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 16px;
}
.form-submit-row {
display: flex;
justify-content: center;
}
/* ---------------------------------------------------------------------------
2c. [K-12] Sections that only exist on the K-12 form
------------------------------------------------------------------------ */
/* Family members living with client (5 cols) */
.form-block .Living-Client .repeater-layout-set .table-cell:nth-child(5n + 1)::before { content: "First name"; }
.form-block .Living-Client .repeater-layout-set .table-cell:nth-child(5n + 2)::before { content: "Last name"; }
.form-block .Living-Client .repeater-layout-set .table-cell:nth-child(5n + 3)::before { content: "Lives with client full / part time"; }
.form-block .Living-Client .repeater-layout-set .table-cell:nth-child(5n + 4)::before { content: "Phone"; }
.form-block .Living-Client .repeater-layout-set .table-cell:nth-child(5n + 5)::before { content: "Email address"; }
/* Family members not living with client (3 cols) */
.form-block .Not-Living .repeater-layout-set .table-cell:nth-child(3n + 1)::before { content: "First and last name"; }
.form-block .Not-Living .repeater-layout-set .table-cell:nth-child(3n + 2)::before { content: "Relationship"; }
.form-block .Not-Living .repeater-layout-set .table-cell:nth-child(3n + 3)::before { content: "Age"; }
.form-block .Not-Living .repeater-layout-set .table-cell:nth-child(3n + 3) input { max-width: 110px; }
/* Extra-curricular, both tables (3 cols) */
.form-block .Extra-Curricular .repeater-layout-set .table-cell:nth-child(3n + 1)::before { content: "Activity, hobby, or club"; }
.form-block .Extra-Curricular .repeater-layout-set .table-cell:nth-child(3n + 2)::before { content: "Instructor / coach / sponsor"; }
.form-block .Extra-Curricular .repeater-layout-set .table-cell:nth-child(3n + 3)::before { content: "How active?"; }
/* Keep the "Reading, Listening to Music, ..." header hint readable. */
.form-block .header-hint {
display: block;
font-size: 12px;
font-weight: 400;
line-height: 1.4;
}
/* Health screening (4 cols — headers first, then cells, one grid) */
.form-block .form-table.grid-screening {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 8px;
}
.form-block .grid-screening .table-cell:nth-child(4n + 1) {
margin-top: 6px;
padding-top: 14px;
border-top: 2px solid rgba(0, 0, 0, 0.12);
}
.form-block .grid-screening .table-cell:nth-child(5) {
margin-top: 0;
padding-top: 0;
border-top: 0;
}
/* The question is a read-only input — show it as a card heading. */
.form-block .grid-screening .table-cell.cell-disabled input {
border: 0;
background: transparent;
padding: 0;
font-weight: 600;
font-size: 15px;
min-height: 0;
pointer-events: none;
}
.form-block .grid-screening .table-cell:nth-child(4n + 2)::before { content: "Yes / no"; }
.form-block .grid-screening .table-cell:nth-child(4n + 3)::before { content: "If yes, date of most recent"; }
.form-block .grid-screening .table-cell:nth-child(4n + 4)::before { content: "Outcome"; }
.form-block .grid-screening .yn-checkbox-group {
display: flex;
gap: 18px;
justify-content: flex-start;
}
.form-block .grid-screening .cell-center {
text-align: left;
}
/* K-12 class schedule (4 cols — headers first, then cells, one grid).
Period + course go full width, teacher and grade sit side by side. */
.form-block .form-table.grid-schedule {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px 12px;
}
.form-block .grid-schedule .table-cell:nth-child(4n + 1),
.form-block .grid-schedule .table-cell:nth-child(4n + 2) {
grid-column: 1 / -1;
}
.form-block .grid-schedule .table-cell.num-label {
margin-top: 8px;
padding: 6px 0 2px;
border-top: 2px solid rgba(0, 0, 0, 0.12);
text-align: left;
font-weight: 700;
}
.form-block .grid-schedule .table-cell.num-label::before {
content: "Period";
display: inline;
margin-right: 4px;
}
.form-block .grid-schedule .table-cell:nth-child(5) {
margin-top: 0;
border-top: 0;
}
.form-block .grid-schedule .table-cell:nth-child(4n + 2)::before { content: "Course"; }
.form-block .grid-schedule .table-cell:nth-child(4n + 3)::before { content: "Teacher"; }
.form-block .grid-schedule .table-cell:nth-child(4n + 4)::before { content: "Estimated current grade"; }
/* Scheduling + billing contact cards stack */
.form-block .block-content.nested-flex {
display: flex;
flex-direction: column;
gap: 18px;
}
.form-block .nested-flex .sub-card {
width: 100%;
flex: 1 1 auto;
}
/* ---------------------------------------------------------------------------
2d. [COLLEGE] Sections that only exist on the College form
------------------------------------------------------------------------ */
/* Major / minor matrix (3 cols — headers first, then cells, one grid).
The "Major (s)" cell is static text, so it becomes the card heading. */
.form-block .form-table.grid-college-matrix {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 8px;
}
.form-block .grid-college-matrix .table-cell.type-label {
margin-top: 8px;
padding: 6px 0 2px;
border-top: 2px solid rgba(0, 0, 0, 0.12);
text-align: left;
font-weight: 700;
}
.form-block .grid-college-matrix .table-cell:nth-child(4) {
margin-top: 0;
padding-top: 0;
border-top: 0;
}
.form-block .grid-college-matrix .table-cell:nth-child(3n + 2)::before { content: "Field / discipline"; }
.form-block .grid-college-matrix .table-cell:nth-child(3n + 3)::before { content: "Start semester"; }
/* Current class schedule (5 cols) */
.form-block .Current-Class .repeater-layout-set .table-cell:nth-child(5n + 1)::before { content: "Day(s)"; }
.form-block .Current-Class .repeater-layout-set .table-cell:nth-child(5n + 2)::before { content: "Time start"; }
.form-block .Current-Class .repeater-layout-set .table-cell:nth-child(5n + 3)::before { content: "Time end"; }
.form-block .Current-Class .repeater-layout-set .table-cell:nth-child(5n + 4)::before { content: "Course"; }
.form-block .Current-Class .repeater-layout-set .table-cell:nth-child(5n + 5)::before { content: "Estimated grade"; }
/* Start and end time sit side by side — they're short and they're a pair. */
.form-block .Current-Class .repeater-layout-set {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px 12px;
}
.form-block .Current-Class .repeater-layout-set .table-cell:nth-child(5n + 1),
.form-block .Current-Class .repeater-layout-set .table-cell:nth-child(5n + 4),
.form-block .Current-Class .repeater-layout-set .table-cell:nth-child(5n + 5) {
grid-column: 1 / -1;
}
/* Recreation & hobbies at college (2 cols) */
.form-block .Recreation-Col .repeater-layout-set .table-cell:nth-child(2n + 1)::before { content: "Activity, hobby, or club"; }
.form-block .Recreation-Col .repeater-layout-set .table-cell:nth-child(2n + 2)::before { content: "How active?"; }
/* Significant family members in the home (4 cols) */
.form-block .College-Family-Member .repeater-layout-set .table-cell:nth-child(4n + 1)::before { content: "First name"; }
.form-block .College-Family-Member .repeater-layout-set .table-cell:nth-child(4n + 2)::before { content: "Last name"; }
.form-block .College-Family-Member .repeater-layout-set .table-cell:nth-child(4n + 3)::before { content: "Relationship"; }
.form-block .College-Family-Member .repeater-layout-set .table-cell:nth-child(4n + 4)::before { content: "Age (approximately)"; }
/* High school history (5 cols) */
.form-block .High-School-His .repeater-layout-set .table-cell:nth-child(5n + 1)::before { content: "Grade level"; }
.form-block .High-School-His .repeater-layout-set .table-cell:nth-child(5n + 2)::before { content: "Year (e.g. 2026-27)"; }
.form-block .High-School-His .repeater-layout-set .table-cell:nth-child(5n + 3)::before { content: "School name"; }
.form-block .High-School-His .repeater-layout-set .table-cell:nth-child(5n + 4)::before { content: "City, state"; }
.form-block .High-School-His .repeater-layout-set .table-cell:nth-child(5n + 5)::before { content: "Average GPA"; }
.form-block .High-School-His .repeater-layout-set .table-cell .input-center {
text-align: left;
}
.form-block .High-School-His .repeater-layout-set .table-cell:nth-child(5n + 5) input {
max-width: 120px;
}
}
/* =============================================================================
3. SMALL PHONE (<= 575.98px) — single column everywhere
============================================================================= */
@media (max-width: 575.98px) {
.form-block .block-title {
font-size: 16px;
padding: 9px 12px;
}
.form-block .block-content {
padding: 14px 12px;
}
/* [BOTH] Client information -> one field per row */
.form-block .block-content.grid-4-col {
grid-template-columns: minmax(0, 1fr);
}
.form-block .block-content.grid-4-col .col-span-1,
.form-block .block-content.grid-4-col .col-span-2 {
grid-column: 1 / -1;
}
/* [BOTH] Current concerns -> one checkbox per row */
.form-block .checkbox-grid {
grid-template-columns: minmax(0, 1fr);
gap: 2px;
}
.form-block .checkbox-column + .checkbox-column {
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid rgba(0, 0, 0, 0.08);
}
/* [BOTH] Education field rows -> one per row */
.form-block .form-grid.grid-3-col,
.form-block .form-grid.grid-2-col,
.form-block .form-grid.grid-college-top {
grid-template-columns: minmax(0, 1fr);
}
/* [BOTH] Childhood / prenatal stay two-up but tighten the gutter */
.form-block .form-table.grid-prenatal,
.form-block .form-table.grid-onset {
gap: 8px 10px;
font-size: 14px;
}
.form-block .trimester-bubbles {
gap: 4px;
}
/* [K-12] Schedule -> fully single column */
.form-block .form-table.grid-schedule {
grid-template-columns: minmax(0, 1fr);
}
.form-block .grid-schedule .table-cell {
grid-column: 1 / -1;
}
/* [COLLEGE] Class schedule -> fully single column */
.form-block .Current-Class .repeater-layout-set {
grid-template-columns: minmax(0, 1fr);
}
.form-block .Current-Class .repeater-layout-set .table-cell {
grid-column: 1 / -1;
}
/* [COLLEGE] Status options and metrics stack */
.form-block .status-options {
flex-direction: column;
gap: 10px;
}
.form-block .form-footer-metrics {
flex-direction: column;
gap: 12px;
}
.form-block .underline-input-group {
flex: 1 1 auto;
width: 100%;
}
/* [BOTH] Full-width submit is much easier to hit with a thumb */
.form-submit-row .btn-submit-now,
.form-submit-row input[type="submit"] {
width: 100%;
}
}
/* =============================================================================
4. OPTIONAL — horizontal scroll instead of stacking
-----------------------------------------------------------------------------
If you would rather keep one of the wide tables looking like a table on
phones, wrap that .form-table in ...
and it will scroll sideways inside its own box instead of stacking.
============================================================================= */
@media (max-width: 767.98px) {
.table-scroll-x {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
margin: 0 -12px;
padding: 0 12px 8px;
}
.table-scroll-x > .form-table {
min-width: 640px;
}
}
/* =============================================================================
5. ACCESSIBILITY FLOOR
============================================================================= */
.wpcf7-form :is(input, select, textarea, button, [tabindex]):focus-visible {
outline: 2px solid currentColor;
outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
.wpcf7-form * {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}