/* RidePride LLC — corporate site overrides.
   Loaded LAST (after Blackhawk template CSS) so these rules win the cascade.
   Never edit vendor style.css — all Blackhawk overrides for this project live here. */

/* Container gutters.
   Blackhawk's ladder (bh-custom.css:406-414) widens .container to 1280px @>=1200,
   1480px @>=1400, 1560px @>=1600. Between 1400 and 1480 the max-width EXCEEDS the
   viewport, so the container goes full-bleed on Bootstrap's 12px padding alone and
   the hero headline sits ~13px off the left edge. 1440 — the most common laptop
   width — lands squarely in that dead zone.
   Padding (not a max-width clamp) because 100vw includes the scrollbar, and
   calc(100vw - Npx) would reintroduce horizontal overflow. */
@media (min-width: 1200px) {
    .container {
        padding-left: 48px;
        padding-right: 48px;
    }
}

/* ============================================================================
   HEADER IDENTITY — the "RidePride LLC" logotype lockup
   ----------------------------------------------------------------------------
   Supersedes the placeholder wordmark (Georgia bold 24px, letter-spacing -0.5px,
   "LLC" at 0.6em/opacity .85) that stood in while there was no logo asset. That
   treatment read as "we typed our company name in a serif" — and this is the
   first thing a telecom carrier reviewer, a bank, or a hospital sees.

   This is a LOCKUP, not a string. Three parts, left to right:

     [1] MARK SLOT  3px x cap-height Florida-Orange rule.
     [2] LOGOTYPE   "RidePride" — serif 700, optically tracked, sized up.
     [3] ENTITY     "LLC" — tracked caps, optically centred on the x-height.

   WHY THE RULE. It is not decoration and it is not a placeholder graphic. The
   3px orange rule is ALREADY this brand's signature structural device — it marks
   the hero (rp-brand.css: 48x3 rule above the eyebrow), the feature cards
   (.te-info-card.style-1 border-top), the foundation callout (border-left), and
   the legal pages' header band (legal.css border-bottom). The identity was the
   one place it was missing. Adding it here makes the header systematic rather
   than incidental — and it is what turns a typed string into a lockup.

   It also IS the mark slot. When the founder's logo lands, the rule is replaced
   by the mark at the same left edge, same 0.5em gap, same cap-height alignment.
   The type never moves relative to the mark. See the lockup spec in the report.

   WHY NOT A DIFFERENT FACE. The ask was "a different font". Declined on purpose,
   with the lever left in (see --rp-font-mark below). Georgia and Times are the
   only serifs that render identically on Windows AND macOS AND iOS; Android has
   neither and already falls back to Noto Serif. Adding Palatino to the front of
   the stack buys a marginally more elegant "R" and costs a THIRD rendering of
   the company name across devices — a logo that is three logos is not a logo.
   The face was never the problem: default spacing, a timid size, and a faded
   0.6em "LLC" were. All three are fixed below.

   WHY NOT A WEIGHT OR COLOUR SPLIT ON THE COMPOUND ("Ride"|"Pride"). It is the
   convention for camelCase names (PayPal, DocuSign, RingCentral) and it was the
   obvious move. Rejected twice over: Georgia ships 400 and 700 only, so a weight
   split is a chasm at 26px with no mid-weight to bridge it (and faux-weights are
   out); and a colour split would put --rp-orange on the white sticky canvas at
   3.07:1 — passing ONLY under the large-text carve-out, for the most important
   text on the site. The internal capital P already carries the compound. One
   colour, one weight. Restraint is the "established" signal here, not a trick.
   ========================================================================== */

:root {
    /* The logotype's face is its own ROLE, deliberately decoupled from
       --rp-font-display (headings) so the identity can diverge from the
       editorial voice later without reflowing the site. Today they resolve to
       the same stack — that is a decision, not an accident (see above).
       To trial Palatino, this is the ONLY line that changes (mirror it in
       legal.css :root, which is self-contained by design):
         --rp-font-mark: "Palatino Linotype", Palatino, "Book Antiqua", P052, Georgia, "Times New Roman", serif;
       Read the note above before you do. */
    --rp-font-mark: var(--rp-font-display, Georgia, "Times New Roman", serif);
}

.rp-wordmark {
    display: inline-block;
    font-family: var(--rp-font-mark);
    font-weight: 700;
    /* 24px -> 22/26/28px. The old size was timid against a 100px header band;
       a logotype that reads as an afterthought makes the company read as one.
       Discrete steps, not clamp(): a mark should feel fixed, not elastic.
       Sizes are ceilinged by the LOGO COLUMN, which is narrow and changes span:
         <576   col-5     ~146px @375   -> 22px lockup ~138px
         992+   col-lg-2  ~136px @992   -> 22px lockup ~138px (~2px, benign*)
         1200+  col-xl-2  ~181px @1200  -> 26px lockup ~162px
         1400+  col-xl-2  ~230px @1400  -> 28px lockup ~174px
       *the sibling col holds a right-aligned nav with ~450px of empty space at
        that width, so a hair of spill lands on nothing. 28px at 1200 measured
        174px into 181px — 7px of headroom is not a design, it's a coincidence. */
    font-size: 22px;
    line-height: 1;
    /* In em, not px: -0.5px was correct at 24px only and silently wrong at every
       other size. Georgia opens up as it scales; -0.02em holds the colour even. */
    letter-spacing: -0.02em;
    /* Georgia carries real kerning pairs (Ri, Pr). Off by default on inline
       text in some engines. This is what stops "RidePride" looking spaced-out. */
    font-kerning: normal;
    white-space: nowrap;
    /* Only fires <1200, where ONE node (.te-sticky-logo) is visible in both
       header states and its colour genuinely animates. At >=1200 the states are
       two different nodes swapped by `display`, so there is nothing to tween.
       Guarded by rp-brand.css §10 prefers-reduced-motion. */
    transition: color var(--rp-dur, 180ms) var(--rp-ease, cubic-bezier(0.4, 0, 0.2, 1));
}

@media (min-width: 1200px) { .rp-wordmark { font-size: 26px; } }
@media (min-width: 1400px) { .rp-wordmark { font-size: 28px; } }

/* [1] MARK SLOT — 3px x cap-height Florida-Orange rule.
   Height 0.7em == Georgia's cap height (1419/2048 = 0.693em), so the rule spans
   exactly baseline -> cap line and reads as part of the type, not next to it.
   vertical-align is left at `baseline` deliberately: an empty inline-block takes
   its bottom margin edge as its baseline, which lands it on the baseline for
   free. Pseudo-element, so it costs no markup and stays out of the a11y tree —
   it is decorative and never the sole carrier of any information. */
.rp-wordmark::before {
    content: "";
    display: inline-block;
    width: 3px;
    height: 0.7em;
    margin-right: 0.5em;
    background-color: var(--rp-orange, #E8720C);
}

/* [3] ENTITY SUFFIX — "LLC" is part of the legal name, not a footnote.
   The old rule made it subordinate by FADING it (opacity .85 on top of an
   already-dim inherit). Hierarchy by contrast-starvation is the one way to make
   a required legal string both ugly and inaccessible. Subordination here comes
   from SIZE and TRACKING only; both colours below clear 9:1. */
.rp-wordmark-llc {
    font-size: 0.44em;
    font-weight: 700;
    letter-spacing: 0.1em;
    /* CSS adds letter-spacing AFTER the last glyph too, which hangs 0.1em of
       dead air off the right of the lockup and shifts it visually left.
       Cancel it. This is the difference between kerned and typed. */
    margin-right: -0.1em;
    /* Optical centring, derived not eyeballed: centre LLC's cap band on the
       x-height band of the "e" it follows.
         Georgia x-height  = 0.484em of the logotype
         LLC cap height    = 0.693 x 0.44 = 0.305em of the logotype
         raise             = (0.484 - 0.305) / 2 = 0.09em of the logotype
         in LLC's own em   = 0.09 / 0.44 = 0.2em
       Expressed in em so it scales with the type (legal.css used a fixed 2px,
       which was right at one size and wrong at the rest). */
    vertical-align: 0.2em;
    white-space: nowrap;
}

/* ---- STATE COLOURS ------------------------------------------------------
   The wordmark colour must FOLLOW the header state, never hardcode white.
   The header band is ink at rest, but rp-brand.css flips .te-sticky_menu to a
   white canvas with ink links on scroll. A hardcoded `color:#fff` here beat the
   inherited link colour and rendered the company name white-on-white — i.e.
   invisible in the sticky header. Do not reintroduce a fixed colour, and do not
   give the mark slot one either (it is --rp-orange in BOTH states on purpose:
   a constant is one less thing that can go white-on-white).

   Measured, WCAG 2.1:
     REST    (band --rp-ink #14231B)
       RidePride  #FFFFFF                  16.3:1  PASS AAA
       LLC        rgba(255,255,255,0.72)    9.0:1  PASS AAA
     STICKY  (band --rp-canvas #FFFFFF)
       RidePride  #14231B                  16.3:1  PASS AAA
       LLC        #3D4A43                   9.3:1  PASS AAA
   The logotype is 16.3:1 in BOTH states — the identity does not get weaker when
   the header flips. The rule is decorative (5.3:1 on ink / 3.1:1 on white). */

.te-logo a .rp-wordmark {
    color: var(--rp-on-dark, #FFFFFF);
}

.te-logo a .rp-wordmark-llc {
    color: var(--rp-on-dark-dim, rgba(255, 255, 255, 0.72));
}

.te-sticky_menu .te-logo a .rp-wordmark {
    color: var(--rp-ink, #14231B);
}

.te-sticky_menu .te-logo a .rp-wordmark-llc {
    color: var(--rp-ink-body, #3D4A43);
}

/* ---- ANCHOR SIZING ------------------------------------------------------
   The template sizes these anchors for an <img>: style.css:2932 pins the mobile
   .te-sticky-logo to width:170px, and bh-custom.css:1495 insets it 25px. We
   render live text, so the anchor must hug its content and sit ON the container
   gutter like every other element on the page — the 25px inset both broke that
   alignment and ate 25px of a ~146px logo column, which is why the wordmark
   overflowed at mobile widths.

   `display` is deliberately NOT touched here. The standard/sticky/retina swap IS
   a display toggle (style.css:2874-2877, 2929-2936, 2940-2941); setting display
   on these would show two wordmarks at once. Selectors are prefixed to (0,3,0)
   to clear the vendor's own width rule rather than reaching for !important. */
.te-header-menu-area .te-logo .te-standard-logo,
.te-header-menu-area .te-logo .te-sticky-logo,
.te-header-menu-area .te-logo .te-retina-logo {
    width: auto;
}

@media (max-width: 767px) {
    .te-header-menu-area .te-logo .te-sticky-logo {
        margin-left: 0;
    }
}

/* Hero highlight: keep "Florida-based" on one line. Its hyphen is a legal break
   point, so the headline wrapped as "Florida-" / "based" — worse than the
   unscoped orange it replaced. Short enough that nowrap can't overflow. */
.te-slider-title span {
    white-space: nowrap;
}

/* SMS program disclosure — footer legal copy. */
.rp-sms-disclosure {
    max-width: 900px;
    margin: 0 auto 24px;
    text-align: center;
}

.rp-sms-disclosure p {
    font-size: 12px;
    line-height: 1.6;
    color: #9aa0a6;
    margin: 0;
}

/* Light-surface variant for the Contact section (white .appointment-area canvas).
   The footer's .rp-sms-disclosure is tuned for the dark footer (#9aa0a6 on
   --rp-ink measures fine there, but only ~2.5:1 on white — fails WCAG AA).
   Reuses --rp-ink-muted from rp-brand.css (4.67:1 on white/paper, see its
   contrast table) rather than inventing a new color. */
.rp-sms-disclosure-light {
    max-width: 720px;
    margin: 24px auto 0;
    text-align: center;
}

.rp-sms-disclosure-light p {
    font-size: 12px;
    line-height: 1.6;
    color: var(--rp-ink-muted, #6B7770);
    margin: 0;
}

/* ============================================================================
   SERVICES — equal-height cards
   ----------------------------------------------------------------------------
   The 4 cards carry different copy lengths, so each shrink-wrapped its own text
   and the row read as a ragged staircase. Bootstrap's grid equalises COLUMN
   height, not the card inside it, so the fix is to make the card fill its column
   and let the copy — not the card — absorb the slack.

   The chain must be unbroken: col -> card -> inner -> content-wrapper all flex,
   or the height stops propagating at the first non-flex link. `.content` is the
   only flex:1 element, so it takes the extra space and pins the LEARN MORE row
   to a common baseline across all four cards.
   ========================================================================== */
#services .col-md-6 { display: flex; }

#services .te-info-card.style-2 {
    width: 100%;
    display: flex;
    flex-direction: column;
}

#services .te-info-card.style-2 .te-info-card-inner,
#services .te-info-card.style-2 .te-content-wrapper {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

/* Absorbs the difference in copy length; LEARN MORE lands on one line for all. */
#services .te-info-card.style-2 .content { flex: 1 1 auto; }

/* Titles run to one or two lines depending on the service name. Reserve two so
   the descriptions start at the same y — equal card height alone doesn't fix a
   ragged internal rhythm. */
#services .te-info-card.style-2 .te-title-wrapper { min-height: 2.6em; }

/* ============================================================================
   WHO WE ARE — paragraph rhythm
   ----------------------------------------------------------------------------
   The three paragraphs inherited a tight default margin and read as one wall of
   text. 20px minimum between them (Marcos, 2026-07-17).
   ========================================================================== */
#about .te-section-desc p { margin-bottom: 20px; }
#about .te-section-desc p:last-child { margin-bottom: 0; }