/**
* @file
* GMA interior-page components — the home for NEW interior-page building
* blocks and the site-wide responsive/brand invariants for content pages.
*
* Loaded AFTER nav.css (which still carries the original .gma-page-* /
* .gma-info-* definitions). This file:
* 1. Adds photo components (.gma-page-hero--photo, .gma-figure) so editors
* can make pages lively with imagery served from Drupal media.
* 2. Applies defensive invariants to every interior grid/flex component
* (min-width:0) so nothing overflows on narrow screens — the same fix
* that resolved the homepage mobile-overflow bug, applied site-wide.
* 3. Wraps tables for horizontal scroll on small screens.
*
* Per CONTRACT.md this is theme code: git -> image/bind-mount source -> drush cr.
* Editors put HTML (with these classes) into the Drupal node body; the styling
* lives here. See /page-kit for the copy-paste component reference.
*/
/* ─────────────────────────────────────────────────────────────────────────
RESPONSIVE INVARIANTS — applied to every interior grid/flex child so the
"nowrap content blows out the track" overflow bug can never recur.
───────────────────────────────────────────────────────────────────────── */
.gma-info-grid > *,
.gma-cards > *,
.gma-card-grid > *,
.gma-page__two-col > *,
.gma-values-grid > *,
.gma-roadmap__grid > * { min-width: 0; }
/* Any interior card grid that was written with a fixed repeat(N) collapses
gracefully — belt-and-braces alongside the per-grid breakpoints. */
@media (max-width: 640px) {
.gma-cards--3col,
.gma-card-grid,
.gma-roadmap__grid { grid-template-columns: 1fr !important; }
}
@media (min-width: 641px) and (max-width: 900px) {
.gma-cards--3col,
.gma-roadmap__grid { grid-template-columns: 1fr 1fr !important; }
}
/* ─────────────────────────────────────────────────────────────────────────
UN-CAP OLIVERO'S CONTENT WIDTH. The base Olivero theme caps node content
(.node, .node__content, the body field) at ~640-780px for readable prose.
That made EVERY interior page narrower than the homepage and squeezed our
.gma-page (which wants var(--gma-max-w) = 1320px). Let our page components
use the full width; the prose itself is still capped inside .gma-page__body.
───────────────────────────────────────────────────────────────────────── */
.gma-inner-page-wrapper .region--content,
.gma-inner-page-wrapper .node,
.gma-inner-page-wrapper .node__content,
.gma-inner-page-wrapper .field--name-body,
.gma-inner-page-wrapper .node--view-mode-full {
max-width: none !important;
width: auto;
}
/* ─────────────────────────────────────────────────────────────────────────
TWO-COL PAGES — a few pages (academy, youth, vanitha, business-forum) put
their card grids inside the narrow 2fr main column, which squeezed the grid
to ~439px so cards stacked 1-up with the right side empty. Give the main
column much more room and let the grid use the body's full width so cards
go 2-3 up. The sidebar only holds a few links, so a slim column is fine.
───────────────────────────────────────────────────────────────────────── */
.gma-page__two-col { grid-template-columns: minmax(0, 3.2fr) minmax(0, 1fr); gap: 2.5rem; }
/* The prose column caps text at 760px for readability, but card grids inside
it should fill the column width. */
.gma-page__two-col .gma-page__body { max-width: none; }
.gma-page__two-col .gma-page__body > h2,
.gma-page__two-col .gma-page__body > p { max-width: 760px; }
/* ─────────────────────────────────────────────────────────────────────────
DENSITY PASS — interior info-card grids were tall and airy. Tighten the
card padding, the gaps, and the internal spacing so card-heavy pages
(academy, health, foundation, membership, festivals, business-forum…) read
more compact and need less scrolling — matching the homepage density.
These override the looser base rules in nav.css (loaded earlier).
───────────────────────────────────────────────────────────────────────── */
.gma-info-grid { gap: 1rem; margin: 1.5rem 0; }
.gma-info-card { padding: 1.1rem 1.15rem; }
.gma-info-card__icon { width: 38px; height: 38px; border-radius: 10px; margin-bottom: .6rem; font-size: 1.2rem; }
.gma-info-card__icon svg { width: 20px; height: 20px; }
.gma-info-card__title { margin: 0 0 .3rem; }
.gma-info-card__body { line-height: 1.5; }
/* ─────────────────────────────────────────────────────────────────────────
PHOTO HERO — text + contextual image, side-by-side on desktop.
Use:
───────────────────────────────────────────────────────────────────────── */
.gma-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 1.25rem 0; }
/* A standalone .gma-table (no wrap) scrolls horizontally on its own so wide
tables never force the whole page to overflow on small screens. When it IS
wrapped in .gma-table-wrap the wrapper handles the scroll instead. */
.gma-table { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.gma-table-wrap > .gma-table { display: table; overflow-x: visible; }
.gma-table th, .gma-table td {
text-align: left; padding: .6rem .75rem;
border-bottom: 1px solid var(--gma-border, #ECE5DD);
font-size: .9rem;
white-space: nowrap;
}
.gma-table th { font-weight: 700; color: var(--gma-primary, #154D79); background: var(--gma-primary-tint, #EAF1F6); }
/* ═══════════════════════════════════════════════════════════════════════
CONTRAST + MOBILE SAFETY NET (audit fix, 2026-06-03)
Fixes reported on phone: black text on the navy table-header bar (invisible),
and a right sidebar squeezed to one-character-per-line because the two-column
layout wasn't collapsing. Applies site-wide so every page benefits — these
target the inline-styled content tables used on matrimonial, membership, seva,
committees, chapters, contact, etc.
═══════════════════════════════════════════════════════════════════════ */
/* 1. ANY table row given a dark/navy background (inline `background:var(--gma-primary)`
or the brand classes) MUST render its cell text white. Core/Olivero `th`/`td`
color rules were overriding the inline `color:#fff` on the
, so the header
text fell back to dark-on-dark. Force white on the cells themselves. */
tr[style*="--gma-primary"] > th,
tr[style*="--gma-primary"] > td,
tr[style*="#154D79"] > th,
tr[style*="#154D79"] > td,
tr[style*="#0F3A5C"] > th,
tr[style*="#0F3A5C"] > td,
tr[style*="#102E45"] > th,
tr[style*="#102E45"] > td,
thead[style*="--gma-primary"] th,
.gma-table thead.is-dark th {
color: #fff !important;
}
/* 2. Generic dark-surface safety net: any element painted with a brand-dark
background gets light text + light links, so nothing is ever dark-on-dark. */
[style*="background:var(--gma-primary)"],
[style*="background: var(--gma-primary)"],
[style*="background:var(--gma-dark)"],
[style*="background: var(--gma-dark)"] {
color: #fff;
}
[style*="background:var(--gma-primary)"] a,
[style*="background:var(--gma-dark)"] a { color: #fff; text-decoration: underline; }
/* 3. Inline content tables (no .gma-table class) must scroll, not overflow, on
phones — they were forcing the page wider and crushing the sidebar. */
.gma-page__body table { max-width: 100%; }
@media (max-width: 768px) {
.gma-page__body table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
/* 4. THE SIDEBAR SQUEEZE: pages.css redefined .gma-page__two-col (winning over
nav.css) but without a mobile breakpoint, so the 2-col grid stayed on phones
and the 1fr sidebar collapsed to a sliver (one letter per line). Force a single
column on small screens, with the sidebar BELOW the content. */
@media (max-width: 860px) {
.gma-page__two-col {
display: block !important;
grid-template-columns: none !important;
}
.gma-page__two-col > * { max-width: 100% !important; }
.gma-page__two-col .gma-sidebar-card {
margin-top: 2rem;
}
}
/* 5. INVISIBLE BUTTON LABELS: an outline/transparent button uses navy text
(.gma-btn--outline-blue: color var(--gma-primary)). When such a button sits on
a DARK section (.gma-join / .gma-on-dark / a dark inline background) it's
navy-on-navy and the label vanishes. On dark surfaces, force outline buttons to
white text + white border. (Filled buttons --primary/--gold already set their
own readable colors, so leave those alone.) */
.gma-join .gma-btn--outline-blue,
.gma-on-dark .gma-btn--outline-blue,
.gma-manifesto-card .gma-btn--outline-blue,
[style*="background:var(--gma-primary)"] .gma-btn--outline-blue,
[style*="background:var(--gma-dark)"] .gma-btn--outline-blue,
.gma-join .gma-btn--outline,
.gma-on-dark .gma-btn--outline {
color: #fff !important;
border-color: rgba(255, 255, 255, .8) !important;
background: transparent;
}
.gma-join .gma-btn--outline-blue:hover,
.gma-on-dark .gma-btn--outline-blue:hover {
background: rgba(255, 255, 255, .15) !important;
border-color: #fff !important;
}
/* 6. BUTTON CONTRAST + ALIGNMENT (audit fix 2026-06-03).
(a) The filled primary/gold buttons must show crisp light text — the navy
primary button looked dark-on-dark in places. Pin the text explicitly. */
.gma-btn--primary { color: #fff !important; }
.gma-btn--gold { color: #3a1a00 !important; } /* dark ink on gold (passes AA) */
/* (b) ALIGNMENT: a filled button has no border, an outline button has a 2px
border, so with inline-block + baseline they sit at different heights (the
"Join GMA" vs "See Upcoming Events" misalignment). Align every button row by
middle, and give all variants a consistent box so borders don't shift them. */
.gma-btn {
vertical-align: middle;
box-sizing: border-box;
/* a transparent 2px border on filled buttons matches the outline button's
2px border, so both occupy the same box height and line up exactly */
border: 2px solid transparent;
line-height: 1.2;
}
.gma-btn--outline-blue { border: 2px solid var(--gma-primary, #154D79); }
/* 7. SITEWIDE CONTRAST AUDIT FIXES (2026-06-03, multi-page scan).
── CRITICAL: a bare .gma-btn--outline uses white text; on a LIGHT section
(e.g. the /donate "Other Ways to Give Back" cards) it's white-on-white and
invisible. Only force white text when the button is actually on a dark
surface (handled in rule 5 above). By DEFAULT, give .gma-btn--outline navy
text + navy border so it's readable on light backgrounds. */
.gma-btn--outline {
color: var(--gma-primary, #154D79);
border-color: var(--gma-primary, #154D79);
}
/* ── CRITICAL: the home "Join Free" gold quick-tile was white-on-gold (2.92:1,
same as the old BUG-021). Use dark ink for the label + icon (5.41:1). */
.gma-hub-quick__item--gold,
.gma-hub-quick__item--gold span,
.gma-hub-quick__item--gold svg {
color: #3a1a00 !important;
}
/* ── MEDIUM: the footer copyright line was rgba(255,255,255,.45) on navy
(4.05:1). Bump to .62 so legal text clears AA (~6:1). */
.gma-footer__bottom,
.gma-footer__bottom * {
color: rgba(255, 255, 255, .62) !important;
}
/* 8. /donate 2-column layout (node 24): the donation action + supporting info
sit side by side to use the full page width and keep the page short. Stack to
a single column on phones. */
@media (max-width: 780px) {
.gma-donate-grid { grid-template-columns: 1fr !important; }
}
/* 9. SITEWIDE SPACE-USAGE (layout audit 2026-06-03).
The page body capped EVERYTHING at 760px — correct for reading paragraphs, but
it also trapped CARD GRIDS and TABLES into the left 760px of a ~1280px
container, leaving the right ~40% empty and stacking cards/rows tall. Fix:
widen the body to the full content width, but keep the PROSE (p / lists /
headings) constrained to a comfortable reading measure. Wide elements (grids,
tables) then use the whole width. No negative margins (overflow-safe). Fixes
the bulk of the "empty right side / tall page" reports. */
.gma-page__body { max-width: none; }
/* Re-cap only the reading prose so line length stays comfortable. */
.gma-page__body > p,
.gma-page__body > ul,
.gma-page__body > ol,
.gma-page__body > h2,
.gma-page__body > h3,
.gma-page__body > blockquote,
.gma-page__body > section > p,
.gma-page__body > section > ul,
.gma-page__body > section > ol,
.gma-page__body > section > h2,
.gma-page__body > section > h3 {
max-width: 760px;
}
/* Cards a touch denser so more fit per row across the now-full width. */
.gma-page__body .gma-info-grid { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
/* 10. Tighten the big vertical gaps on interior pages. --gma-section-gap is 4.5rem
(72px top AND bottom) — fine for full-bleed homepage bands, far too much
between short interior blocks (the /scholarships "very gappy" report). Inside
a page body, use normal flow spacing instead. */
.gma-page__body .gma-section,
.gma-page__body section.gma-section {
padding-block: 1.25rem;
}
/* 11. MOBILE TABLES → STACKED CARDS (2026-06-03).
On phones, wide data tables used horizontal scroll (usable but awkward, and
the chapters 4-col table got very tall). Instead, on small screens turn each
ROW into a clean card and stack the cells vertically — the first cell becomes
the card's heading. CSS-only, no markup/data-label changes, so it works on
every hand-authored table in the page body. */
@media (max-width: 640px) {
.gma-page__body table,
.gma-page__body .gma-table {
display: block;
width: 100% !important;
border-collapse: separate;
overflow: visible; /* no more sideways scroll */
}
/* hide the header row — the first cell of each card carries the label role */
.gma-page__body thead { display: none; }
.gma-page__body tbody { display: block; }
/* each row = a card */
.gma-page__body tbody tr {
display: block;
background: #fff !important;
border: 1px solid var(--gma-border, #ECE5DD) !important;
border-left: 3px solid var(--gma-primary, #154D79) !important;
border-radius: 8px;
padding: .4rem .25rem;
margin: 0 0 .85rem;
box-shadow: 0 1px 3px rgba(28,26,25,.06);
}
/* each cell = a full-width stacked line */
.gma-page__body tbody td {
display: block;
width: auto !important;
padding: .3rem .85rem !important;
border: 0 !important;
text-align: left !important;
}
/* the FIRST cell of each row is the card title — make it stand out */
.gma-page__body tbody td:first-child {
font-size: 1.02rem;
font-weight: 700;
color: var(--gma-primary, #154D79);
padding-top: .5rem !important;
}
.gma-page__body tbody td:first-child strong { font-weight: 700; }
/* keep status badges / links inline-friendly */
.gma-page__body tbody td a { word-break: break-word; }
}