/**
* Mobile corrections.
*
* Loaded after the per-page stylesheet so these win at equal specificity. The
* fifteen page stylesheets are near-identical copies of one another, so a
* shared mobile bug otherwise has to be fixed fifteen times and stays fixed
* only until the next page is ported.
*
* Every rule below fixes something measured on a real 390px viewport. The
* measurement is quoted with it - a rule whose number you cannot reproduce is
* a rule nobody can safely delete later.
*/
/* ---------------------------------------------------------------------------
* 1. Grid tracks that refuse to shrink
*
* `repeat(auto-fit, minmax(450px, 1fr))` floors the track at 450px whatever the
* container does. In the 351px column a 390px phone gives it, the leadership
* cards rendered 450px wide and ran 100px off the right edge - every bio was
* cut mid-sentence and the last card was clipped through the photo.
*
* `min(450px, 100%)` lets the track collapse to the container and is a strict
* no-op whenever the container is wider than the floor, so desktop is
* untouched. Each floor keeps its original value; only the guard is new.
* ------------------------------------------------------------------------ */
.grid-landscape {
grid-template-columns: repeat(auto-fill, minmax(min(450px, 100%), 1fr));
}
#locations .location-showcase-grid.two-columns {
grid-template-columns: repeat(auto-fit, minmax(min(350px, 100%), 450px));
}
.support-cards-wrapper,
.amenities-grid {
grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
}
#admissions .steps-grid {
grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
}
.stats-grid {
grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
}
/* ---------------------------------------------------------------------------
* 2. Head-and-shoulders photos cropped through the head
*
* Three of the four leadership portraits are 198x287 - portrait. The card
* displayed them in a 450x250 landscape box with `object-fit: cover` centred,
* which keeps a horizontal band through the middle of the frame and cuts off
* the top of the head and the chin.
*
* A 4:3 box loses less, and biasing the crop upward puts the band on the face
* rather than the neck. The sources are still far too small for the width they
* are shown at - that needs new files, not CSS.
* ------------------------------------------------------------------------ */
@media (max-width: 500px) {
/*
* An explicit height, not aspect-ratio: the child img is `height: 100%`,
* which against an auto-height parent resolves to auto - the picture then
* renders at its own 198x287 proportions (509px tall here) and the box
* grows to fit it, so the ratio never applies.
*/
.land-img-box {
width: 100%;
height: 280px;
}
.land-img-box img {
object-position: 50% 22%;
}
}
/* ---------------------------------------------------------------------------
* 3. content-box widths that add their padding on top
*
* Nothing in the site sets a border-box default, so `width: 90%` plus
* `padding: 0 30px` on .header-container measured 411px inside a 390px screen,
* and `max-width: 320px` plus `padding: 14px 25px` on the mobile call-to-action
* measured 376px in a 351px column - which is the "Reach Out Today" button
* running off the right of the screen.
*
* Scoped to the mobile breakpoint deliberately. A global border-box reset is
* the correct long-term fix but it would narrow every container on every page
* by 60px at once, which is not a change to make while chasing a phone bug.
* ------------------------------------------------------------------------ */
@media (max-width: 768px) {
.header-container,
.top-bar .header-container {
box-sizing: border-box;
width: 100%;
padding: 0 20px;
}
.btn {
box-sizing: border-box;
}
}
/* ---------------------------------------------------------------------------
* 4. Hero: resizing under your finger, and a hidden affordance
*
* `min-height: calc(var(--vh, 1vh) * 86)` is recalculated by a JS resize
* handler. On a phone, scrolling hides the browser's URL bar, which fires
* resize, which grows --vh, which grows the hero - so the page moves while you
* are reading it, then moves back when you scroll up.
*
* `svh` is the viewport height with the browser chrome showing. It does not
* change when the chrome hides, so the hero stops moving. The JS is left in
* place as the fallback for browsers without svh; @supports keeps them apart.
*
* Subtracting the header means the hero ends above the fold instead of 17px
* below it, which is what hid the "Learn More" cue - it was then also set to
* `display: none` on mobile, so the one prompt telling a first-time visitor
* there is more page below was missing on the devices most likely to need it.
* ------------------------------------------------------------------------ */
@supports (min-height: 100svh) {
.hero {
min-height: 100svh;
}
}
@media (max-width: 768px) {
.scroll-down-indicator {
display: inline-flex !important;
padding-top: 22px !important;
}
.scroll-down-indicator span {
font-size: 0.8em;
}
@supports (min-height: 100svh) {
.hero {
min-height: calc(100svh - 136px) !important;
}
}
}
/* ---------------------------------------------------------------------------
* 5. Blog carousel: 97px of dead space, and arrows sitting on the card
*
* Measured from the bottom of "From Our Blog" to the top of the first card:
* 34px (.section-title margin) + 45px (.blog-header-wrapper margin) + 10px
* (.blog-carousel-wrap margin) + 8px (.blog-grid padding) = 97px of nothing.
* Three of those four are saying the same thing.
*
* The arrows were absolutely positioned into a 42px side gutter but are 40px
* wide starting at x=20, so each one overlapped the card by 10px while
* squeezing it to 291px of the 351px available. Below the carousel they stop
* competing with the content and the card gets the full column - and swipe
* already works here, so on a phone the arrows are the secondary control.
* ------------------------------------------------------------------------ */
@media (max-width: 768px) {
.blog-header-wrapper {
margin-bottom: 26px;
}
.blog-header-wrapper .section-title {
margin-bottom: 0;
}
/*
* `#blog .blog-carousel-wrap { padding: 0 30px !important }` further down
* home-tharros.css outranks a bare class, which is why the first attempt at
* this left the card at 291px of the 351px available. Matched here rather
* than deleted there: the desktop rule it belongs to is still wanted.
*/
#blog .blog-carousel-wrap {
padding: 0 !important;
}
.blog-carousel-wrap {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-areas:
"cards cards"
"prev next";
gap: 20px 14px;
margin-top: 0;
}
.blog-grid {
grid-area: cards;
padding-top: 4px;
padding-bottom: 12px;
}
.blog-carousel-arrow {
position: static;
transform: none;
}
.blog-carousel-arrow:hover,
.blog-carousel-arrow:focus-visible {
transform: scale(1.04);
}
.blog-carousel-arrow.prev {
grid-area: prev;
justify-self: end;
}
.blog-carousel-arrow.next {
grid-area: next;
justify-self: start;
}
}
/* ===========================================================================
* 6. HOME PAGE MOBILE TYPE SYSTEM added 2026-09-12, approved by client
*
* Scope is deliberately narrow, and both halves of it matter:
*
* html.th-mobile emitted by tharros_front_page_body_class() on the FRONT
* PAGE ONLY. Every rule below is inert on the other 14
* pages and all 101 posts.
* max-width:767px phones only. An iPad in portrait is exactly 768px, so a
* 768 boundary would have caught tablets.
*
* Do not strip the `html.th-mobile` prefix to "simplify" this. It carries
* specificity, not just scope: `html.th-mobile p` is (0,1,1) and bare `p` is
* (0,0,1), which loses to the page stylesheet's own `.blog-card-content p`.
* Several rules here beat id-scoped page CSS only because of that prefix.
*
* WHY A SYSTEM RATHER THAN A LIST OF FIXES. An audit of the rendered home page
* at 390px found 38 distinct text styles, fourteen of them between 16.6px and
* 21.6px - including 21.6 / 21.2 / 20.9, differences nobody chose. They come
* from em units compounding at different nesting depths across three
* stylesheets. Everything below collapses onto seven sizes:
*
* 34 display | 27 h2 | 23 h3 | 18 body | 16.5 button | 14 small | 12.5 eyebrow
*
* Measured result: body 16px -> 18px and the page 8% SHORTER
* (18,170px -> 16,752px), because compact team cards and the four-figures list
* give back more than the larger type costs.
*
* NOT YET APPLIED TO POSTS, and the element-level rules below are why: the
* article template uses h2 at four deliberate sizes - 13.6px for the contents
* label, 19.6px for "Key Takeaways", 28.9px for a real heading - and a blanket
* h2 rule flattens all three. `.article-body > p` also runs at 1.9 leading on
* purpose, which is right for long-form and wrong for a card. Before any post
* gets this class, replace the bare h2/p/li rules with class-scoped ones.
* ======================================================================== */
/* =============================================================================
* Tharros House — mobile type system
*
* An override layer on the real staging page, scoped to html.th-mobile so it can be
* switched off and compared.
*
* WHY THIS IS A SYSTEM AND NOT A LIST OF FIXES
* An audit of the page at 390px found 38 distinct text styles - fourteen of
* them between 16.6px and 21.6px, including 21.6 / 21.2 / 20.9, differences
* nobody chose. They come from em units compounding at different nesting
* depths, and from three stylesheets each setting their own sizes. That is why
* every section looks like it was designed separately.
*
* Everything below collapses onto EIGHT roles. Nothing on the page is allowed
* a size that is not one of them.
* ========================================================================== */
@media (max-width: 767px) {
/* -----------------------------------------------------------------------------
* THE SCALE
* display Poppins 700 34 / 1.15 hero headline only
* h2 Poppins 600 27 / 1.25 section headings
* h3 Poppins 600 22 / 1.32 card and step titles
* eyebrow Poppins 600 12.5 / 1.4 uppercase, 0.18em
* body Montserrat 400 18 / 1.6 ALL running text, decks included
* small Montserrat 500 14 / 1.5 labels, captions, legal, top bar
* button Poppins 600 16.5 / 1
* stat Poppins 700 34 / 1 the four numbers
* -------------------------------------------------------------------------- */
html.th-mobile {
--t-display: 34px; --t-display-lh: 1.15;
--t-h2: 27px; --t-h2-lh: 1.25;
--t-h3: 22px; --t-h3-lh: 1.32;
--t-eyebrow: 12.5px;
--t-body: 18px; --t-body-lh: 1.6;
--t-small: 14px;
--t-button: 16.5px;
--t-stat: 34px;
--t-ink: #2C3E50;
--t-body-col:#4A5568;
--t-accent: #4E6F97; /* 4.8:1 on the cream ground; the pale blue is 1.9:1 */
}
/* ---- 1. body sets the base every em on the page resolves against ---------- */
html.th-mobile body {
font-size: var(--t-body) !important;
line-height: var(--t-body-lh) !important;
}
/* ---- 2. running text. One size, everywhere. ------------------------------
* This single rule is most of the fix. Before it, the same kind of paragraph
* rendered at 17, 17.1, 17.5, 17.6, 18, 18.4, 18.9 and 19.8px depending on how
* deeply it happened to be nested.
*/
html.th-mobile p,
html.th-mobile li,
html.th-mobile .section-subtitle,
html.th-mobile .support-card p,
html.th-mobile .support-cards-wrapper p,
html.th-mobile .land-info p,
html.th-mobile .blog-card-content p,
html.th-mobile .approach-content-v2 p,
html.th-mobile #admissions .step-item p,
html.th-mobile .amenity-card p,
html.th-mobile .main-footer p,
html.th-mobile .main-footer a {
font-size: var(--t-body) !important;
line-height: var(--t-body-lh) !important;
font-weight: 400 !important;
/* Lets the browser avoid a last line with one or two words on it, which is
what makes a centred or narrow paragraph look ragged. */
text-wrap: pretty;
}
/* ---- 3. headings --------------------------------------------------------- */
html.th-mobile .hero h1 {
font-size: var(--t-display) !important;
line-height: var(--t-display-lh) !important;
font-weight: 700 !important;
letter-spacing: -0.02em !important;
text-wrap: balance;
}
html.th-mobile h2,
html.th-mobile .section-title h2 {
font-size: var(--t-h2) !important;
line-height: var(--t-h2-lh) !important;
font-weight: 600 !important;
letter-spacing: -0.015em !important;
text-wrap: balance;
}
html.th-mobile h3,
html.th-mobile .support-card-polished h3,
html.th-mobile .approach-content-v2 h3,
html.th-mobile .land-info h3,
html.th-mobile .blog-card-content h3,
html.th-mobile #admissions .step-item h3 {
font-size: var(--t-h3) !important;
line-height: var(--t-h3-lh) !important;
font-weight: 600 !important;
letter-spacing: -0.01em !important;
text-wrap: balance;
}
html.th-mobile h4, html.th-mobile .main-footer h4 {
font-size: var(--t-small) !important;
line-height: 1.4 !important;
letter-spacing: 0.14em !important;
text-transform: uppercase !important;
font-weight: 600 !important;
}
/* ---- 4. eyebrows --------------------------------------------------------- */
html.th-mobile .kicker,
html.th-mobile .section-title .kicker {
font-size: var(--t-eyebrow) !important;
line-height: 1.4 !important;
letter-spacing: 0.18em !important;
font-weight: 600 !important;
color: var(--t-accent) !important;
}
html.th-mobile #testimonials .kicker,
html.th-mobile #contact .kicker,
html.th-mobile .section-deep-blue .kicker { color: #9CB6D5 !important; }
/* ---- 5. small: labels, captions, legal, the top bar ---------------------- */
html.th-mobile .land-info span,
html.th-mobile .top-bar,
html.th-mobile .top-bar a,
html.th-mobile .footer-bottom,
html.th-mobile .footer-bottom a,
html.th-mobile .testimonial-card-deluxe footer,
html.th-mobile figcaption {
font-size: var(--t-small) !important;
line-height: 1.5 !important;
}
html.th-mobile .land-info span {
letter-spacing: 0.1em !important;
font-weight: 600 !important;
color: var(--t-accent) !important;
}
/* ---- 6. buttons ---------------------------------------------------------- */
html.th-mobile .btn,
html.th-mobile .responsive-button-text,
html.th-mobile button[type="submit"],
html.th-mobile .wpforms-submit,
html.th-mobile .wpcf7-submit {
font-size: var(--t-button) !important;
line-height: 1 !important;
min-height: 56px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
/*
* 17px is the floor: below 16px iOS zooms the page when a field is focused and
* the visitor has to pinch back out mid-form. The height comes down instead -
* a 61px box on a 390px screen, with 25px between each, was what made the form
* feel out of proportion to the rest of the page.
*/
html.th-mobile input, html.th-mobile textarea, html.th-mobile select {
font-size: 17px !important;
min-height: 52px !important;
padding: 12px 15px !important;
}
html.th-mobile textarea { min-height: 118px !important; }
html.th-mobile .wpforms-field { margin-bottom: 18px !important; }
/* -----------------------------------------------------------------------------
* ALIGNMENT
*
* The hero is a poster and stays centred. Everything below it aligns left -
* eyebrow, heading and text together.
*
* The mixture was the problem, not the left-alignment itself: a centred heading
* sitting directly on top of a left-aligned paragraph reads as a mistake,
* because nothing else on the page explains the change. Centred over centred is
* consistent but gives every paragraph a ragged left edge the eye has to hunt
* for on each line. Left throughout, under a centred hero, reads as a decision:
* the hero is a poster, the page is a document.
* -------------------------------------------------------------------------- */
html.th-mobile .section-title,
html.th-mobile .section-title h2,
html.th-mobile .section-title .kicker,
html.th-mobile .section-subtitle,
html.th-mobile .support-card-polished,
html.th-mobile .support-card-polished h3,
html.th-mobile .approach-content-v2,
html.th-mobile .approach-content-v2 h3,
html.th-mobile .approach-content-v2 p,
html.th-mobile #admissions .step-item,
html.th-mobile #admissions .step-item h3,
html.th-mobile #admissions .step-item p,
html.th-mobile .land-info,
html.th-mobile .blog-card-content,
html.th-mobile .main-footer,
html.th-mobile .main-footer .footer-col { text-align: left !important; }
html.th-mobile #admissions .step-number { margin-left: 0 !important; margin-right: auto !important; }
html.th-mobile .support-card-polished .icon-wrapper,
html.th-mobile .support-card-polished svg { margin-left: 0 !important; margin-right: auto !important; }
/* the centred underline accent under a section heading has to move with it */
html.th-mobile .section-title h2::after { margin-left: 0 !important; margin-right: auto !important; }
/* the hero keeps its own alignment */
html.th-mobile .hero, html.th-mobile .hero h1, html.th-mobile .hero .sub-headline { text-align: center !important; }
html.th-mobile .hero .sub-headline {
font-size: var(--t-body) !important;
line-height: var(--t-body-lh) !important;
font-weight: 300 !important;
text-wrap: pretty;
}
/* -----------------------------------------------------------------------------
* COMPONENTS
* -------------------------------------------------------------------------- */
/* ---- leadership: square thumbnail beside the name ----
* The portraits are 198x287. Cropping a portrait into a full-width banner cuts
* the top of the head off whatever object-position says. `display: contents` on
* .land-info promotes its h3/span/p to grid items of the card, so the photo can
* sit beside the name while the bio runs full width underneath - the layout
* tharrosrecovery.com uses, without touching the HTML. Mobile only.
*/
html.th-mobile .card-landscape {
display: grid !important;
grid-template-columns: 96px 1fr !important;
gap: 0 18px !important;
align-items: start !important;
padding: 22px !important;
}
html.th-mobile .land-img-box {
grid-column: 1 !important; grid-row: 1 / 3 !important;
width: 96px !important; height: 96px !important;
flex: none !important; border-radius: 12px !important; overflow: hidden !important;
}
html.th-mobile .land-img-box img { object-position: 50% 16% !important; }
html.th-mobile .land-info { display: contents !important; }
html.th-mobile .land-info h3 { grid-column: 2 !important; grid-row: 1 !important; align-self: end !important; margin: 0 0 4px !important; }
html.th-mobile .land-info span { grid-column: 2 !important; grid-row: 2 !important; align-self: start !important; margin: 0 !important; }
html.th-mobile .land-info p { grid-column: 1 / -1 !important; grid-row: 3 !important; margin: 18px 0 0 !important; }
/* ---- the four points read as a list, not a 2x2 of blocks ---- */
html.th-mobile .stats-grid { gap: 0 !important; }
html.th-mobile .stats-grid > * {
display: grid !important;
grid-template-columns: 104px 1fr !important;
gap: 22px !important; align-items: center !important; text-align: left !important;
padding: 18px 0 !important;
border-bottom: 1px solid rgba(255,255,255,0.15) !important;
}
html.th-mobile .stats-grid > *:first-child { padding-top: 0 !important; }
html.th-mobile .stats-grid > *:last-child { border-bottom: 0 !important; padding-bottom: 0 !important; }
html.th-mobile .stats-grid h3, html.th-mobile .stat-number {
font-size: var(--t-stat) !important; line-height: 1 !important; font-weight: 700 !important;
text-align: right !important; white-space: nowrap !important; margin: 0 !important;
letter-spacing: -0.02em !important;
}
html.th-mobile .stats-grid p, html.th-mobile .stat-label {
font-size: var(--t-body) !important; line-height: 1.35 !important;
text-transform: none !important; letter-spacing: 0 !important; margin: 0 !important;
}
/* ---- the testimonial ----
* The quote was unreadable because the card is narrow, not because the type is
* large - at the old padding it fitted barely two words a line. Widening the
* card is the fix; shrinking the type to suit a cramped box would have left the
* reviews as the one place on the page running at a different size.
*/
html.th-mobile .testimonial-card-deluxe { padding: 26px 20px !important; }
html.th-mobile .testimonial-card-deluxe blockquote {
font-size: var(--t-body) !important; line-height: 1.55 !important;
font-weight: 300 !important; text-wrap: pretty;
}
html.th-mobile .testimonial-quote-icon { font-size: 34px !important; line-height: 1 !important; }
/* -----------------------------------------------------------------------------
* THE LAST SIX OFF-SCALE ELEMENTS
* Found by re-auditing after the scale went in. Each one had a reason to escape.
* -------------------------------------------------------------------------- */
/* p.lead in the contact section rendered at 23.4px on a 43px line - the largest
body text anywhere, for no reason the page explains. */
html.th-mobile .lead,
html.th-mobile p.lead {
font-size: var(--t-body) !important;
line-height: var(--t-body-lh) !important;
font-weight: 400 !important;
text-align: left !important;
text-wrap: pretty;
}
/* Form labels were 17.1px, close enough to body to read as body. They are
labels, so they take the label style the rest of the page uses. */
/*
* Form labels take the small size but NOT the uppercase treatment the other
* labels get. A section eyebrow and a form label are not the same thing: set
* in caps with 0.1em tracking, "YOUR EMAIL ADDRESS *" runs the width of the
* field and shouts at someone who is already nervous about filling it in.
* Sentence case, same size, no tracking.
*/
html.th-mobile .wpforms-field-label,
html.th-mobile .wpcf7-form label {
font-size: var(--t-small) !important;
line-height: 1.4 !important;
letter-spacing: 0 !important;
text-transform: none !important;
font-weight: 600 !important;
margin-bottom: 7px !important;
}
/* The hero cue sat at 14.4px, a fifth of a pixel off the label size. */
html.th-mobile .scroll-down-indicator span {
font-size: var(--t-small) !important;
letter-spacing: 0.14em !important;
}
/* A link inside a heading inherits the heading's size but not its family, so
every blog card title was set in Montserrat while every other heading on the
page was Poppins. That is the "one section looks different" effect in
miniature. */
html.th-mobile h1 a, html.th-mobile h2 a, html.th-mobile h3 a, html.th-mobile h4 a,
html.th-mobile .blog-card-content h3 a {
font-family: 'Poppins', sans-serif !important;
font-size: inherit !important;
line-height: inherit !important;
font-weight: inherit !important;
letter-spacing: inherit !important;
}
/* `#about .approach-content-v2 { text-align: center !important }` in the page
stylesheet carries an id, so a class-only override loses to it however many
!important flags it has. Matched at the same weight. */
html.th-mobile #about .approach-content-v2,
html.th-mobile #about .approach-content-v2 h3,
html.th-mobile #about .approach-content-v2 p,
html.th-mobile #media .approach-content-v2,
html.th-mobile #media .approach-content-v2 h3,
html.th-mobile #media .approach-content-v2 p,
html.th-mobile #admissions .step-item,
html.th-mobile #admissions .step-item h3,
html.th-mobile #admissions .step-item p { text-align: left !important; }
/* `#contact .lead { font-size: 1.3em !important }` and
* `#contact .wpforms-field-container .wpforms-field-label { ... }` both carry an
* id, so the class-level rules above took their alignment and weight but lost
* on size - which is why the contact intro stayed at 23.4px and the field
* labels at 17.1px. Matched here at the same specificity.
*/
html.th-mobile #contact .lead,
html.th-mobile #contact p.lead {
font-size: var(--t-body) !important;
line-height: var(--t-body-lh) !important;
font-weight: 400 !important;
}
html.th-mobile #contact .wpforms-field-container .wpforms-field-label,
html.th-mobile #contact .wpcf7-form label,
html.th-mobile #contact .wpforms-field-label {
font-size: var(--t-small) !important;
line-height: 1.4 !important;
letter-spacing: 0 !important;
text-transform: none !important;
}
/* `#contact .section-title h2 { font-size: clamp(2.3em, 5vw, 3.4em) !important }`
* left the closing heading at 41.4px while every other section heading was 27px
* - a 14px jump with nothing to explain it. Same specificity, one size. */
html.th-mobile #contact .section-title h2 {
font-size: var(--t-h2) !important;
line-height: var(--t-h2-lh) !important;
}
/* ---- the three support-card icons are not one set ----
* All three are text glyphs in the same span, but the first two are
* typographic symbols and the third is a colour emoji: ✧,
* ♡, 🤝. On a phone that renders as two monochrome
* outlines in the brand blue and one full-colour cartoon, which is the whole
* "each section doing its own thing" problem in a single row.
*
* Substituted here with a dingbat from the same family, forced to text
* presentation with U+FE0E so no platform promotes it back to an emoji. On
* staging this is a one-character edit to the markup.
*/
html.th-mobile .icon-support-refined {
font-size: 30px !important;
line-height: 1 !important;
color: var(--t-accent) !important;
display: inline-block !important;
}
/*
* `color: transparent` does not hide an emoji. Emoji paint their own colours
* and ignore the `color` property entirely, so the handshake stayed fully
* visible with the replacement glyph sitting on top of it - which is what
* Sean saw on his phone. A headless browser hides the fault rather than
* showing it: with no emoji font installed the handshake renders as nothing
* and the overlay looks correct, so this cannot be caught by screenshot here.
*
* font-size: 0 removes the glyph whatever font supplies it. The box keeps
* its size explicitly so the card layout does not shift, and the ::after
* restates its own size because it would otherwise inherit the zero.
*/
html.th-mobile .support-cards-wrapper > *:nth-child(3) .icon-support-refined {
position: relative !important;
display: inline-block !important;
width: 30px !important;
height: 30px !important;
font-size: 0 !important;
line-height: 0 !important;
}
html.th-mobile .support-cards-wrapper > *:nth-child(3) .icon-support-refined::after {
content: '\2724\FE0E';
position: absolute;
left: 0;
top: 0;
font-size: 30px !important;
line-height: 1 !important;
color: var(--t-accent);
}
/* The form's own sizing lives behind `#contact .wpforms-field-container ...`,
* which outranks anything scoped to a class. Matched at the same weight so the
* field boxes actually come down. */
html.th-mobile #contact .wpforms-field-container input[type="text"],
html.th-mobile #contact .wpforms-field-container input[type="email"],
html.th-mobile #contact .wpforms-field-container input[type="tel"],
html.th-mobile #contact .wpforms-field-container textarea {
font-size: 17px !important;
min-height: 52px !important;
padding: 12px 15px !important;
line-height: 1.45 !important;
}
html.th-mobile #contact .wpforms-field-container textarea { min-height: 118px !important; }
html.th-mobile #contact .wpforms-field-container .wpforms-field { margin-bottom: 18px !important; }
/* The step-one link, phones only - see tharros_mobile_call_bar()'s
neighbour comment in functions.php for why it is created in JS. */
html.th-mobile a.th-reach {
color: #2C3E50 !important;
font-weight: 600 !important;
text-decoration: underline !important;
text-decoration-color: #9CB6D5 !important;
text-decoration-thickness: 2px !important;
text-underline-offset: 3px !important;
}
} /* end @media (max-width: 767px) */
/* -----------------------------------------------------------------------------
* THE CALL BAR — phones only, so desktop stays exactly as it is
* -------------------------------------------------------------------------- */
.th-callbar { display: none; }
/*
* Flex with equal growth, not two equal columns.
*
* Equal columns give both buttons the same WIDTH, so the shorter label ends up
* with generous padding and the longer one looks stuffed - 41px each side on
* "Call now" against 17px on "Ask a question" at 390px. With flex-basis auto
* and flex-grow 1, the leftover space is split equally in absolute terms, which
* lands both buttons on the same PADDING instead. The bar still fills the width.
*/
html.th-mobile .th-callbar {
display: flex !important;
gap: 10px;
position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
background: rgba(249,246,242,0.97);
border-top: 1px solid #EAEBE6;
backdrop-filter: blur(8px);
}
html.th-mobile .th-callbar a {
display: flex; align-items: center; justify-content: center; gap: 9px;
flex: 1 1 auto; min-width: max-content;
min-height: 56px; padding-inline: 12px; border-radius: 11px;
font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 15px;
line-height: 1; white-space: nowrap; text-decoration: none;
}
html.th-mobile .th-callbar .call { background: #2C3E50; color: #fff; }
html.th-mobile .th-callbar .ask { background: #fff; color: #2C3E50; border: 1.5px solid #2C3E50; }
html.th-mobile .th-callbar svg { width: 18px; height: 18px; flex-shrink: 0; }
html.th-mobile body { padding-bottom: 92px !important; }
@media (max-width: 360px) {
html.th-mobile .th-callbar svg { display: none; }
html.th-mobile .th-callbar a { font-size: 14px; padding-inline: 10px; }
}
@media (min-width: 768px) {
html.th-mobile .th-callbar { display: none !important; }
html.th-mobile body { padding-bottom: 0 !important; }
}