/* ============================================================
TECH ASSIST FOR SENIORS — CLEAN ACCESSIBLE CSS
Version: 2.0 — Cleaned & Accessibility Reviewed
HOW TO USE:
Copy everything below and paste it into your single
Fluent Snippets CSS entry. Delete any old duplicates first.
============================================================ */
/* ============================================================
GLOBAL BACKGROUND
The soft gradient gives the page a warm, welcoming feel.
Fixed on desktop, scroll on mobile for better performance.
============================================================ */
body {
background: linear-gradient(135deg, #f0f4f8 0%, #ffffff 100%);
background-attachment: fixed;
min-height: 100vh;
padding-left: 1rem;
padding-right: 1rem;
}
@media (max-width: 768px) {
body {
background-attachment: scroll; /* Better performance on phones/tablets */
}
}
/* ============================================================
HEADINGS (H1–H6)
Font sizes come from your Astra/theme clamp settings.
We only control spacing, weight, and line-height here.
============================================================ */
h1, h2, h3, h4, h5, h6 {
margin-top: 2.5rem;
margin-bottom: 1.5rem;
line-height: 1.4;    /* Slightly open — easier to read for seniors */
font-weight: 600;
}
/* Don't add extra space above the very first heading on a page */
h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child,
h5:first-child,
h6:first-child {
margin-top: 0;
}
@media (max-width: 768px) {
h1, h2, h3, h4, h5, h6 {
margin-top: 2rem;
margin-bottom: 1.25rem;
}
}
/* ============================================================
PARAGRAPHS
Generous line-height and spacing between paragraphs
are the single biggest readability wins for seniors.
============================================================ */
p {
margin-bottom: 1.5rem;
line-height: 1.7;
}
/* Centered content wrapper, used on final-CTA sections. Was referenced in
   page HTML but never actually defined here — those sections were not
   centering at all. */
.align-center {
text-align: center;
}
/* ============================================================
LISTS (ul / ol)
============================================================ */
ul, ol {
margin-bottom: 1.5rem;
padding-left: 2.5rem;
line-height: 1.7;
}
li {
margin-bottom: 0.875rem;
line-height: 1.7;
}
li:last-child {
margin-bottom: 0; /* No extra space after the last item */
}
/* Nested lists get a little breathing room */
ul ul,
ol ol,
ul ol,
ol ul {
margin-top: 0.875rem;
margin-bottom: 0.875rem;
}
/* Mobile: tighten the left indent so lists don't get cramped */
@media (max-width: 768px) {
ul, ol {
padding-left: 1.25rem !important;
margin-left: 0 !important;
text-align: left !important;
}
ul li, ol li {
text-align: left !important;
margin-left: 0 !important;
}
}
/* ============================================================
LINKS
Always underlined — never rely on color alone to show a link.
WCAG requires links to be distinguishable without color.
============================================================ */
a {
text-decoration: underline;
text-underline-offset: 0.2em; /* Small gap between text and underline */
color: #0066cc;
transition: color 0.2s ease;
}
a:hover {
color: #004499;
text-decoration-thickness: 2px;
}
/*
NOTE: We removed "outline: none" from a:focus.
That was hiding the keyboard focus ring for non-mouse users.
The a:focus-visible rule below handles focus correctly.
*/
a:focus {
color: #004499;
text-decoration-thickness: 2px;
}
/* ============================================================
FOCUS INDICATORS
The visible ring that appears when tabbing with a keyboard.
Critical for low-vision and motor-impaired users.
============================================================ */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
outline: 3px solid #0066cc;
outline-offset: 3px;
border-radius: 2px;
}
/* ============================================================
HEADER NAVIGATION — TOUCH TARGETS
The theme's nav menu widget (Elementor "hfe-nav-menu") pads links with
12px top/bottom by default, which is borderline for the 44px WCAG 2.5.5
minimum depending on line-height. min-height guarantees the tap target
without changing font-size. Conservative on purpose — no display/layout
overrides, since this is theme-generated markup we can't preview live
right now. Worth a visual check after deploying.
============================================================ */
.hfe-nav-menu .menu-item > a.hfe-menu-item,
.hfe-nav-menu .menu-item > a.hfe-sub-menu-item {
min-height: 44px;
}
.hfe-nav-menu__toggle {
min-width: 44px;
min-height: 44px;
}
@media (max-width: 768px) {
.hfe-nav-menu .menu-item > a.hfe-menu-item,
.hfe-nav-menu .menu-item > a.hfe-sub-menu-item {
min-height: 48px;
}
.hfe-nav-menu__toggle {
min-width: 48px;
min-height: 48px;
}
}
/* ============================================================
BUTTONS — BASE STYLES
Min-height 44px meets WCAG 2.5.5 touch target size.
We also add display:flex so text is always perfectly centred.
============================================================ */
button,
.wp-block-button__link,
input[type="submit"] {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
min-width: 44px;           /* Touch target width too, not just height */
padding: 0.75rem 1.5rem;
font-size: 1.125rem;
font-weight: 600;
cursor: pointer;
border-radius: 4px;
}
@media (max-width: 768px) {
button,
.wp-block-button__link,
input[type="submit"] {
min-height: 48px;        /* Slightly larger on touch screens */
min-width: 48px;
}
}
/* ============================================================
BUTTON GROUP HELPER CLASS
Use class="button-group" on any wrapper that holds
two or more buttons side by side. This ensures there is
always at least 1rem of space between them.
Example HTML:
<div class="button-group">
<button>Call Us</button>
<button>Learn More</button>
</div>
============================================================ */
.button-group {
display: flex;
flex-wrap: wrap;           /* Wraps to next line on small screens */
gap: 1rem;                 /* Minimum 1rem between all buttons */
align-items: center;
}
/* ============================================================
CTA BUTTON (Hero / Main Call-To-Action)
Your signature sky-blue pill-shaped button.
============================================================ */
.cta-button {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 1.25rem 3.125rem;
font-size: 1.25rem;
font-weight: 700;
color: #1e3a5f;
background: linear-gradient(135deg, #87ceeb 0%, #6bb6ff 100%);
border: none;
border-radius: 3.125rem;   /* Pill shape */
cursor: pointer;
text-decoration: none;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
min-height: 56px;          /* Generous touch target for seniors */
min-width: 44px;
text-align: center;
}
/* Ripple shimmer effect on hover */
.cta-button::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.3);
transform: translate(-50%, -50%);
transition: width 0.6s, height 0.6s;
}
.cta-button:hover::before {
width: 300px;
height: 300px;
}
/* Lift effect on hover */
.cta-button:hover {
transform: translateY(-3px);
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
text-decoration: none;     /* Prevent underline appearing on hover */
}
/* Keyboard focus — strong visible ring */
.cta-button:focus,
.cta-button:focus-visible {
outline: 4px solid #0066cc;
outline-offset: 4px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3), 0 0 0 4px rgba(0, 102, 204, 0.2);
}
/* Pressed/active state */
.cta-button:active {
transform: translateY(-1px);
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
}
/* Keep button text above the ripple layer */
.cta-button span {
position: relative;
z-index: 1;
}
/* A lone CTA button at the end of a section (final-CTA pattern) needs to
   center itself by default, without depending on every page remembering
   to wrap it in .align-center. Scoped to a direct child of the section
   card classes only, so it doesn't touch the hero's side-by-side button
   pair or the testimonials CTA, which already handle their own centering. */
.tafs-section-card > .cta-button,
.tafs-section-card--outline > .cta-button {
display: flex;
margin-left: auto;
margin-right: auto;
}
/* Mobile: full-width for easier tapping */
@media (max-width: 768px) {
.cta-button {
width: 100%;
max-width: 400px;
padding: 1.125rem 2.5rem;
font-size: 1.125rem;
min-height: 52px;
}
}
/* No animation for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
.cta-button,
.cta-button::before {
transition: none;
}
.cta-button:hover {
transform: none;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}
}
/* ============================================================
CONTENT BLOCKS
General spacing for major page sections.
1rem left/right padding as requested.
============================================================ */
.content-block {
/* Standardized from 5rem to match the 3rem rhythm used by every other
   section type (.tafs-section-card, .about-section, .testimonials-global,
   .certifications, .community-trust) */
margin-top: 3rem;
margin-bottom: 3rem;
padding: 2rem 1rem;        /* 1rem left and right as requested */
}
@media (max-width: 768px) {
.content-block {
margin-top: 2rem;
margin-bottom: 2rem;
padding: 1.5rem 1rem;    /* Keep 1rem sides on mobile too */
}
}
/* ============================================================
SECTION CARDS
Boxed containers that visually separate page content into clear,
scannable chunks. Improves readability for older users and people
with low vision by adding contrast, spacing, and a defined edge
around each topic instead of one long unbroken block of text.
============================================================ */
.tafs-section-card {
/* width:calc + margin:auto guarantees a 1rem gap on both sides at every
   viewport width. max-width alone only centers once the viewport is wider
   than 1120px — below that, with no explicit width, the box was expanding
   to 100% and touching the screen edges with zero side margin. */
width: calc(100% - 2rem);
max-width: 1120px;
margin: 3rem auto;
padding: 2.5rem 2rem;
background-color: #f5f7fb;
border-radius: 16px;
}
.tafs-section-card--outline {
background-color: #ffffff;
border: 2px solid #dfe3ee;
}
.tafs-section-card h2:first-child,
.tafs-section-card h3:first-child {
margin-top: 0;
}
/* Tablet step — matches the 3rem/2.5rem/2rem tiering already used by
   .testimonials-global and .certifications, previously missing here.
   Side gap is handled by width:calc above, so only top/bottom change here. */
@media (max-width: 1024px) {
.tafs-section-card {
margin-top: 2.5rem;
margin-bottom: 2.5rem;
}
}
@media (max-width: 768px) {
.tafs-section-card {
margin-top: 2rem;
margin-bottom: 2rem;
padding: 1.75rem 1.25rem;
}
}
/* Glance strip — same card treatment plus a left accent bar so it
   reads as a quick-facts callout rather than another prose section */
.tafs-glance-card {
border-left: 6px solid #22c55e;
}
/* ============================================================
FRUSTRATION CARD GRID
Turns the "Common Technology Frustrations" list (always 3 items,
see writing rules) into individual cards instead of a plain bulleted
list. Applied directly to ul/li so it stays inside the allowed
HTML tag list. Visual language matches .testimonial-card for
sitewide consistency.
============================================================ */
.tafs-frustration-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1.5rem;
margin: 1.5rem 0 0;
padding: 0;
list-style: none;
}
.tafs-frustration-card {
background-color: #f5f7fb;
border-radius: 12px;
padding: 1.5rem;
border: 1px solid #dfe3ee;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
font-size: 1.0625rem;
line-height: 1.6;
color: #1a1a1a;
}
@media (max-width: 1024px) {
.tafs-frustration-grid {
gap: 1.25rem;
}
}
@media (max-width: 768px) {
.tafs-frustration-grid {
grid-template-columns: 1fr;
gap: 1rem;
}
.tafs-frustration-card {
padding: 1.25rem;
}
}
/* ============================================================
AT A GLANCE ITEM CARDS
Gives each item in the "At a Glance" list (Service Area, Visit Type,
Rate, Ideal For) its own card, nested inside the existing
.tafs-glance-card container (green left-accent wrapper stays as-is).
White cards read clearly against that wrapper's light gray background.
============================================================ */
.tafs-glance-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
margin: 1rem 0 0;
padding: 0;
list-style: none;
}
.tafs-glance-item {
background-color: #ffffff;
border-radius: 10px;
padding: 1rem 1.25rem;
border: 1px solid #dfe3ee;
}
@media (max-width: 768px) {
.tafs-glance-grid {
grid-template-columns: 1fr;
gap: 0.75rem;
}
}
/* ============================================================
FAQ ACCORDION
Moved sitewide from home.css (2026-07-21) where it was scoped to
body.home only. Built on native details/summary, so it works with
no JavaScript and is keyboard/screen-reader accessible by default.
Each question stays a real h3 (nested inside summary) so heading
structure is preserved for screen readers.
Markup: <div class="faq-list"><details class="faq-item">
<summary><h3>Question</h3></summary><p>Answer</p></details>...</div>
============================================================ */
.faq-list {
margin-top: 1.5rem;
}
.faq-item {
border-bottom: 1px solid #dfe3ee;
}
.faq-item:first-child {
border-top: 1px solid #dfe3ee;
}
/* The clickable question row. Generous padding keeps the tap
   target well above the 44px minimum. */
.faq-item summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1rem 0;
min-height: 44px;
cursor: pointer;
list-style: none; /* Firefox default marker */
}
.faq-item summary::-webkit-details-marker {
display: none; /* Chrome/Safari default marker */
}
/* Heading sits inside summary — zero out the sitewide heading
   margin so it doesn't add extra space inside the row. */
.faq-item summary h3 {
margin: 0;
flex: 1 1 auto;
}
/* Plain +/- indicator — simple, universally understood, no icon
   font or image needed. Switches to - when the item is open. */
.faq-item summary::after {
content: "+";
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 999px;
border: 1px solid #dfe3ee;
font-weight: 700;
}
.faq-item[open] summary::after {
content: "−";
}
.faq-item p {
padding-bottom: 1rem;
margin-top: 0;
}
@media (max-width: 768px) {
.faq-item summary {
min-height: 48px;
}
}
/* ============================================================
FEATURE SECTIONS (Safety / Security icons + headings)
============================================================ */
.safety-feature h3,
.security-feature h3 {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 0.75rem;
}
.safety-icon,
.security-icon {
font-size: 1.5rem;
line-height: 1;
flex-shrink: 0;            /* Icon never shrinks or wraps */
}
.safety-feature,
.security-feature {
margin-bottom: 1.5rem;
}
/* ============================================================
ABOUT SECTION — 50/50 Desktop Layout
============================================================ */
.about-section {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3rem;
align-items: start;
/* Same width:calc fix as .tafs-section-card — guarantees the side gap
   at every viewport width instead of only above 1120px */
width: calc(100% - 2rem);
max-width: 1120px;
margin: 3rem auto;
padding: 0 2rem;
}
.about-content h2 {
margin-top: 0;
}
/* Sticky photo column on desktop (only meaningful inside the .about-section
   grid layout, so this stays scoped) */
.about-section .about-photo {
margin: 0;
position: sticky;
top: 2rem;
max-width: none;
}
/* Visual image styling (rounded corners, border, shadow) — deliberately NOT
   scoped to .about-section so every page's about-photo image looks like the
   homepage's, even on pages still using Elementor's native columns instead
   of the .about-section grid wrapper. See feedback_page_edit_dual_update. */
.about-photo img {
width: 100%;
height: auto;
border-radius: 16px;
border: 2px solid #000000;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
display: block;
}
/* Tablet step — same tiering rationale as .tafs-section-card above */
@media (max-width: 1024px) {
.about-section {
margin-top: 2.5rem;
margin-bottom: 2.5rem;
}
}
/* Mobile: stack photo above content */
@media (max-width: 768px) {
.about-section {
grid-template-columns: 1fr;
gap: 2rem;
width: calc(100% - 2rem);
margin-top: 2rem;
margin-bottom: 2rem;
padding: 0;
}
.about-section .about-photo {
position: static;
order: -1;               /* Photo appears first on mobile */
display: flex;
justify-content: center;
margin: 0 auto 1.5rem;
max-width: 400px;
}
}
/* ============================================================
CERTIFICATIONS SECTION
Max-width updated to 1120px to match your site setting.
Padding updated to 1rem sides as requested.
============================================================ */
.certifications {
/* width:calc fix — see .tafs-section-card for why max-width alone isn't
   enough to guarantee the side gap below 1120px */
width: calc(100% - 2rem);
max-width: 1120px;
margin: 3rem auto;
padding: 2.5rem 1rem;      /* 1rem left/right as requested */
background-color: #f5f7fb;
border-radius: 16px;
}
.certifications h2 {
text-align: center;
margin-bottom: 1.75rem;
}
.certifications-inner {
display: flex;
flex-wrap: wrap;
gap: 2rem;
align-items: flex-start;
}
/* Badge column — vertical stack on desktop */
.cert-badges {
flex: 0 0 260px;
max-width: 260px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
}
.cert-badge {
display: flex;
flex-direction: column;
align-items: center;
text-decoration: none;
text-align: center;
padding: 0.5rem;           /* Added: improves touch target around badge links */
}
.cert-badge img {
display: block;
width: 120px;
height: auto;
margin-bottom: 0.4rem;
}
.cert-badge span {
font-size: 0.9rem;
}
.cert-list {
flex: 1 1 0;
}
/* Tablet: badges go side by side */
@media (max-width: 1024px) {
.certifications {
margin-top: 2.5rem;
margin-bottom: 2.5rem;
}
.cert-badges {
flex: 0 0 100%;
max-width: 100%;
flex-direction: row;
justify-content: center;
gap: 1.25rem;
}
.cert-badge img {
width: 110px;
}
}
/* Mobile */
@media (max-width: 768px) {
.certifications {
padding: 2rem 1rem;      /* 1rem sides on mobile */
}
.certifications-inner {
flex-direction: column;
align-items: center;
}
.cert-badges {
flex: 0 0 auto;
max-width: 260px;
flex-direction: row;
justify-content: center;
gap: 1rem;
}
.cert-badge img {
width: 100px;
}
.cert-list {
width: 100%;
}
}
/* ============================================================
TESTIMONIALS SECTION
Max-width updated to 1120px. Padding 1rem sides.
============================================================ */
.testimonials-global {
/* width:calc fix — see .tafs-section-card for why max-width alone isn't
   enough to guarantee the side gap below 1120px */
width: calc(100% - 2rem);
max-width: 1120px;
margin: 3rem auto;
padding: 2.5rem 1rem;      /* 1rem left/right as requested */
background-color: #f5f7fb;
border-radius: 16px;
}
.testimonials-global h2 {
text-align: center;
margin-bottom: 2.5rem;
}
/* 2-column grid on desktop */
.testimonials-global-inner {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 2rem;
}
/* Individual card */
.testimonial-card {
background-color: #ffffff;
border-radius: 12px;
padding: 2rem;
border: 1px solid #e0e4f0;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.testimonial-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}
/* Quote text */
.testimonial-quote {
font-size: 1.125rem;
line-height: 1.7;
margin-bottom: 1.25rem;
color: #1a1a1a;
}
/* Name + location */
.testimonial-meta {
font-size: 1.0625rem;
font-weight: 600;
margin-bottom: 0.5rem;
color: #1a1a1a;
}
.testimonial-name {
margin-right: 0.5rem;
}
.testimonial-location {
color: #555f7a;
font-weight: 400;
}
/* Source (Google, Yelp, etc.) */
.testimonial-source {
font-size: 1rem;
color: #3864e3;
font-weight: 500;
}
/* CTA below testimonials */
.testimonials-cta {
margin-top: 2.5rem;
text-align: center;
}
/* CTA button inside testimonials section */
.testimonials-global .cta-button {
font-size: 1.125rem;
padding: 1rem 2.5rem;
min-height: 48px;
font-weight: 600;
border-radius: 8px;
transition: all 0.2s ease;
}
/* Tablet */
@media (max-width: 1024px) {
.testimonials-global {
margin-top: 2.5rem;
margin-bottom: 2.5rem;
}
.testimonials-global-inner {
gap: 1.75rem;
}
.testimonial-card {
padding: 1.75rem;
}
}
/* Mobile */
@media (max-width: 768px) {
.testimonials-global {
padding: 2rem 1rem;
margin-top: 2rem;
margin-bottom: 2rem;
}
.testimonials-global-inner {
grid-template-columns: 1fr; /* Single column on phones */
gap: 1.5rem;
}
.testimonial-card {
padding: 1.5rem;
}
.testimonial-quote {
font-size: 1.0625rem;
}
.testimonials-global .cta-button {
width: 100%;
padding: 1rem 1.5rem;
}
}
/* ============================================================
COMMUNITY TRUST SECTION
Max-width updated to 1120px. Padding 1rem sides.
============================================================ */
.community-trust {
/* width:calc fix — see .tafs-section-card for why max-width alone isn't
   enough to guarantee the side gap below 1120px */
width: calc(100% - 2rem);
max-width: 1120px;
margin: 3rem auto;
padding: 2.5rem 1rem;      /* 1rem left/right as requested */
background-color: #f5f7fb;
border-radius: 16px;
}
.community-trust h2 {
text-align: center;
margin-bottom: 2rem;
}
.community-trust-inner {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: 2.5rem;
}
/* Badge/logo column */
.community-badge {
flex: 0 0 220px;
max-width: 220px;
margin: 0 auto;
text-align: center;
}
.community-badge img {
display: block;
width: 100%;
height: auto;
border-radius: 8px;
}
/* Text column */
.community-text {
flex: 1 1 0;
min-width: 0;              /* Prevents flex overflow on narrow screens */
}
.community-text p {
margin-bottom: 1.5rem;
line-height: 1.7;
}
/* Social links (Facebook, Nextdoor) */
.social-link-facebook,
.social-link-nextdoor {
display: inline-flex;
align-items: center;
min-height: 44px;          /* WCAG touch target */
margin-top: 0.5rem;
margin-right: 1rem;        /* 1rem gap between links as requested */
padding: 0.25rem 0;
font-size: 1.0625rem;
font-weight: 600;
text-decoration: underline;
text-underline-offset: 0.25em;
color: #0066cc;
transition: color 0.2s ease;
}
.social-link-facebook:hover,
.social-link-nextdoor:hover,
.social-link-facebook:focus,
.social-link-nextdoor:focus {
color: #004499;
text-decoration-thickness: 2px;
}
.social-link-facebook:focus-visible,
.social-link-nextdoor:focus-visible {
outline: 3px solid #0066cc;
outline-offset: 3px;
border-radius: 2px;
}
/* Tablet */
@media (max-width: 1024px) {
.community-trust {
margin-top: 2.5rem;
margin-bottom: 2.5rem;
}
.community-trust-inner {
gap: 2rem;
}
.community-badge {
flex: 0 0 200px;
max-width: 200px;
}
}
/* Mobile */
@media (max-width: 768px) {
.community-trust {
padding: 2rem 1rem;
margin-top: 2rem;
margin-bottom: 2rem;
}
.community-trust h2 {
margin-bottom: 1.5rem;
}
.community-trust-inner {
flex-direction: column;
align-items: center;
gap: 1.5rem;
}
.community-badge {
flex: 0 0 auto;
max-width: 200px;
}
.community-text {
width: 100%;
text-align: left;
}
/* Stack social links vertically on mobile for easier tapping */
.social-link-facebook,
.social-link-nextdoor {
display: flex;
margin-right: 0;
margin-bottom: 1rem;     /* 1rem gap between stacked links */
min-height: 44px;
}
}
/* ============================================================
TWO-COLUMN LIST (gm-two-column-list)
============================================================ */
.gm-two-column-list ul {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem 2rem;
padding-left: 0;
padding-right: 0;
margin-left: 0;
margin-right: 0;
list-style-position: inside;
}
.gm-two-column-list li {
margin-bottom: 0.75rem;
}
@media (max-width: 768px) {
.gm-two-column-list ul {
grid-template-columns: 1fr; /* Single column on phones */
}
}
/* ============================================================
ASTRA SINGLE POST — FORCE H1 VISIBLE
Overrides Astra theme hiding the post title.
============================================================ */
.single-post header.entry-header .entry-title {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
color: #000000 !important;
height: auto !important;
max-height: none !important;
overflow: visible !important;
position: relative !important;
z-index: 2 !important;
}
/* ============================================================
SKIP LINK
Hidden off-screen until a keyboard user presses Tab —
then it jumps into view so they can skip straight to content.
============================================================ */
.skip-link {
position: absolute;
top: -40px;
left: 0;
background: #0066cc;
color: #ffffff;
padding: 0.75rem 1.5rem;
text-decoration: none;
font-weight: 600;
z-index: 100;
transition: top 0.2s ease;
}
.skip-link:focus {
top: 0;
outline: 3px solid #ffffff;
outline-offset: -3px;
}
/* ============================================================
SCREEN READER ONLY (.sr-only)
Hides text visually but keeps it readable by screen readers.
Use this for icon-only buttons, e.g.:
<button><span class="sr-only">Open menu</span> ☰ </button>
============================================================ */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* ============================================================
HIGH CONTRAST MODE
For users who have turned on High Contrast in their OS.
============================================================ */
@media (prefers-contrast: high) {
a {
text-decoration-thickness: 2px;
}
button,
.wp-block-button__link {
border: 2px solid currentColor;
}
}
/* ============================================================
REDUCED MOTION
For users who have "Reduce Motion" turned on in their OS
(common for people with vestibular disorders or migraines).
============================================================ */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}