/*
 * Lowell page-specific sections: ticker band + social/connect band + final
 * CTA band. Tokens only.
 */

/* ---- Shared photo frame (2026-09-08) ----
 * Every standalone photo/video on this page (About's video, both Final
 * CTA rows' photos) used to pick its own one-off aspect-ratio/radius/
 * overflow rule locally -- each a slightly different shape, no shared
 * source of truth, which is exactly what read as "just dropped there"
 * (owner: "todos tienen tamano distinto"). Vendored from
 * hhds-web-library's Media Frame (UI-028,
 * components/media-frame/media-frame.css) instead: one primitive, a
 * restricted 3-value ratio taxonomy (video 16:9 / portrait 3:4 / tall
 * 4:5) instead of inventing a new fraction per instance. Different media
 * still get different real ratios here (a landscape job photo isn't
 * force-fit into a portrait box) -- the point isn't uniformity, it's that
 * every ratio in use traces back to the same 3 deliberate options, not
 * an arbitrary one-off per spot.
 */
/* 2026-09-08: the corner marks below used to repeat on every one of
   these frames too (About's video, both Final CTA photos) -- owner
   pointed out that treatment reads right only on the services grid's
   photo cards ("esta bien solo en servicios... en otras secciones
   deberian tener sus propios estilos"). This frame keeps its own,
   quieter identity instead of borrowing that one: a fine border ring
   (visible on either the white or graphite sections this appears in --
   --jr-color-border is already a light/dark-neutral color-mix, not a
   fixed hex) plus the same elevated shadow, reading as a considered
   picture frame rather than a plain dropped-in photo. No corner marks
   here anymore -- jr_photo_frame_corners() is called only from
   jr_render_services_grid() now. */
/* 2026-09-08, second pass: border + radius alone still read flat next
   to the rest of the page's design language (owner: "esos bordes solo
   tiene radius pero podriamos dar algo muy profesional"). Real depth
   instead of a single flat shadow -- a soft, wide ambient layer plus a
   tighter contact shadow close to the edge, the same 2-layer recipe
   real elevated cards use instead of one shadow trying to do both jobs.
   Plus a thin brand-red accent bar along the bottom edge, echoing the
   same "hairline accent = deliberate break" language already used
   elsewhere on this page (.jr-services's own border-top) instead of
   inventing a new decorative device. */
.jr-photo-frame {
  position: relative;
  display: block;
  box-sizing: border-box;
  overflow: hidden;
  border-radius: var(--jr-radius-lg);
  border: 1px solid var(--jr-color-border);
  box-shadow:
    0 1px 2px rgba(22, 22, 22, 0.06),
    0 24px 48px -12px rgba(22, 22, 22, 0.28),
    0 8px 16px -8px rgba(22, 22, 22, 0.18);
}

.jr-photo-frame::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: var(--jr-color-primary);
}

.jr-photo-frame[data-ratio="video"] {
  aspect-ratio: var(--lib-aspect-video);
}

.jr-photo-frame[data-ratio="portrait"] {
  aspect-ratio: var(--lib-aspect-portrait);
}

.jr-photo-frame[data-ratio="tall"] {
  aspect-ratio: var(--lib-aspect-tall);
}

.jr-photo-frame > img,
.jr-photo-frame > video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Corner Frame (PAT-011, patterns/corner-frame/corner-frame.css) -- four
   small L-shaped marks, like a camera viewfinder. Scoped to the
   services grid cards only now (jr_render_services_grid(), via
   .jr-services__card .jr-photo-frame__corners in services-grid.css) --
   2026-09-08, owner: reads right there, but every other photo on the
   page needs its own distinct treatment instead of repeating this one
   (see .jr-photo-frame above). Red (brand primary, via
   --lib-color-accent's existing bridge), matches the site's one accent
   color instead of introducing a new one for this. */
.jr-photo-frame__corners {
  position: absolute;
  inset: var(--lib-treatment-frame-inset);
  z-index: 1;
  pointer-events: none;
}

.jr-photo-frame__corners span {
  position: absolute;
  width: var(--lib-treatment-frame-mark-size);
  height: var(--lib-treatment-frame-mark-size);
  /* Not border-color -- the :nth-child rules below set border-top/
     border-left etc. as 2-value shorthand (width + style, no color).
     Any shorthand omitting a component resets that component to its
     initial value, so border-color here would get silently overwritten
     back to the default (a real bug reproduced from the same pattern in
     hhds-web-library's own corner-frame.css -- confirmed live, computed
     border color came out gray, not red). Setting color instead lets the
     omitted color component fall back to currentColor correctly. */
  color: var(--lib-color-accent);
}

.jr-photo-frame__corners span:nth-child(1) {
  top: 0;
  left: 0;
  border-top: var(--lib-treatment-frame-mark-thickness) solid;
  border-left: var(--lib-treatment-frame-mark-thickness) solid;
}

.jr-photo-frame__corners span:nth-child(2) {
  top: 0;
  right: 0;
  border-top: var(--lib-treatment-frame-mark-thickness) solid;
  border-right: var(--lib-treatment-frame-mark-thickness) solid;
}

.jr-photo-frame__corners span:nth-child(3) {
  bottom: 0;
  left: 0;
  border-bottom: var(--lib-treatment-frame-mark-thickness) solid;
  border-left: var(--lib-treatment-frame-mark-thickness) solid;
}

.jr-photo-frame__corners span:nth-child(4) {
  bottom: 0;
  right: 0;
  border-bottom: var(--lib-treatment-frame-mark-thickness) solid;
  border-right: var(--lib-treatment-frame-mark-thickness) solid;
}

/* ---- Ticker band (continuous, all viewport widths) ---- */
.jr-ticker-band {
  position: relative;
  width: 100%;
  overflow: hidden;
  /* Derived darker shade, not a second stored red -- see
     --jr-color-primary-hover in tokens-joes-roofing.css for the same
     reasoning. This band is the one place red is a full background (an
     accent banner, not a page section), matching the brand doc's "some
     elements we want to highlight" allowance. */
  background: linear-gradient(135deg, var(--jr-color-primary), color-mix(in srgb, var(--jr-color-primary) 60%, black));
  padding: 1rem 0;
}

.jr-ticker-band__track {
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
  animation: jr-ticker-band-scroll 26s linear infinite;
}

/* Hover/focus pause removed 2026-09-09 (owner: "la banda no deberia
   detenerse por click o al pasar el cursor") -- the real motion-
   preference accessibility handling stays below
   (@media prefers-reduced-motion: reduce), that's the mechanism this
   project actually relies on now, not a hover pause. */

@keyframes jr-ticker-band-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

.jr-ticker-band__item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex: 0 0 auto;
  padding: 0 clamp(1.25rem, 2.5vw, 2.25rem);
  border-right: 1px solid color-mix(in srgb, var(--jr-color-text-inverse) 30%, transparent);
  white-space: nowrap;
}

.jr-ticker-band__item svg {
  width: 1.15rem;
  height: 1.15rem;
  flex: none;
  color: var(--jr-color-text-inverse);
}

.jr-ticker-band__item span {
  font-family: var(--jr-font-action);
  font-weight: 700;
  font-size: var(--jr-text-sm);
  color: var(--jr-color-text-inverse);
}

.jr-ticker-band__item span .hhds-title-highlight {
  color: inherit;
}

@media (prefers-reduced-motion: reduce) {
  .jr-ticker-band__track {
    animation: none;
  }
  .jr-ticker-band {
    overflow-x: auto;
  }
}

/* ---- Final CTA band ---- */
.jr-lowell-final-cta {
  padding: clamp(48px, 7vw, 96px) var(--jr-page-gutter);
  background: var(--jr-color-surface);
}

.jr-lowell-final-cta__header {
  /* --jr-container-wide, not the narrower --jr-container-content -- see
     .jr-lowell-about__grid's comment (lowell-about.css), same real-width
     fix applied consistently across every split/content section this
     template shares. */
  max-width: var(--jr-container-wide);
  margin: 0 auto clamp(28px, 4vw, 48px);
}

.jr-lowell-final-cta__eyebrow {
  font-family: var(--jr-font-action);
  font-size: var(--jr-text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--jr-color-primary);
  /* Spacing to the title below is owned by .jr-eyebrow-badge's own
     margin-bottom (cta-buttons.css) -- single source for the
     eyebrow-to-title gap across every section, see that rule's comment. */
  margin: 0;
}

.jr-lowell-final-cta__title {
  font-family: var(--jr-font-heading);
  font-weight: 800;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  color: var(--jr-color-heading);
  margin: 0 0 0.5rem;
  text-wrap: balance;
}

.jr-lowell-final-cta__subtitle {
  font-size: var(--jr-text-lg);
  color: var(--jr-color-text-muted);
  margin: 0;
}

/* Original Elementor layout (pre-rebuild _elementor_data): the 3
   differentiator items and the photo sat side by side, not the photo
   full-width below a separate icon row. Restored 2026-09-08. */
.jr-lowell-final-cta__grid {
  max-width: var(--jr-container-wide);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}

@media (max-width: 900px) {
  .jr-lowell-final-cta__grid {
    grid-template-columns: 1fr;
  }
}

/* Mobile: drop both row photos entirely, keep only the trust/authority
   list itself (owner, 2026-09-08: "vamos a quitar las dos fotos para
   que quede solo los elementos de autoridad y confianza"). Photos add
   real scroll length on a small screen without adding to the actual
   claims; the differentiator list is the content that matters there. */
@media (max-width: 767px) {
  .jr-lowell-final-cta__media {
    display: none;
  }
}

/* Second row, 2026-09-08 -- the remaining ticker items (Licensed &
   Insured / Insurance Claim Specialist / Workmanship Guarantee / 24/7
   Emergency Service) with their own photo, mirrored (photo left, list
   right) so the two rows don't read as identical repeats of the same
   layout. Reuses .jr-lowell-final-cta__grid as-is -- the mirror comes
   from DOM order (media first, list second) in functions.php, not a
   CSS flip, so no extra selector is needed for the column swap itself. */
.jr-lowell-final-cta__grid--reverse {
  margin-top: clamp(40px, 6vw, 72px);
}

.jr-lowell-final-cta__list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* 2026-09-08, second pass: the small circular badge (still visible in
   the rule below, kept for anywhere that wants that scale) reads too
   quiet at this size for what the owner actually asked for -- "los
   iconos esten grandes... y esten de fondo del contenido que
   corresponde", pointing at Michelle's Nails Service's Direct Contact
   card watermark (a large, faint brand mark sitting behind the card's
   own content) as the reference. Applied per-item here rather than once
   per card, since it's "el icono de cada topic... con sus
   descripciones" -- each differentiator gets its own large watermark
   behind its own title+text, not one shared mark behind the whole list.
   Needs position:relative + its own stacking context so the real
   content (title/text) can sit above the oversized, low-opacity icon
   instead of being covered by it. */
/* 2026-09-09, third pass: boxed into an actual card (owner: "poner el
   contenido y ese icono correspondiente dentro de alguna box para dar
   ese elegantismo como en la web de michelle") -- same real values as
   Michelle's own Direct Contact card (hhds-contact-direct__info: hairline
   brand-color border, radius-lg, a light panel tint), not a bare list
   row anymore. */
.jr-lowell-final-cta__item {
  position: relative;
  padding: 1.5rem 1.75rem;
  border-radius: var(--jr-radius-lg);
  border: 1px solid color-mix(in srgb, var(--jr-color-primary) 22%, transparent);
  background: var(--jr-color-surface-tint);
  overflow: hidden;
}

/* Mobile: the card's own border already marks its edge, so it doesn't
   need the same generous horizontal padding as desktop -- every px here
   comes straight out of an already-narrow available width (owner,
   2026-09-09: "puede ser mas anchos ocupar mejor la pantalla en mobile
   y minimizar filas innecesarias"). Tighter padding reclaims real text
   width without touching the section's own outer gutter (a sitewide
   minimum shared by every section, not just this one). */
@media (max-width: 767px) {
  .jr-lowell-final-cta__item {
    padding: 1.25rem 1.25rem;
  }
}

.jr-lowell-final-cta__item-icon {
  position: absolute;
  top: 50%;
  right: 0.5rem;
  transform: translateY(-50%);
  width: 5.5rem;
  height: 5.5rem;
  /* Faint enough to read as a watermark, not compete with the real
     text sitting on top of it -- same intent as Michelle's own card
     mark (a low-opacity brand glyph, not a solid icon). */
  opacity: 0.1;
  pointer-events: none;
}

/* Mobile: was still right-edge-anchored like desktop, which at a much
   narrower card width read as "small and stuck in a corner" instead of
   a background mark (owner, 2026-09-09: "esos iconos se ven pequenos y
   estan a una esquina pero deben verse en el centro del contenido al
   fondo"). Centered and enlarged instead, sitting directly behind the
   title+text the way Michelle's own card mark sits centered behind her
   card's content. */
@media (max-width: 767px) {
  .jr-lowell-final-cta__item-icon {
    top: 50%;
    left: 50%;
    right: auto;
    transform: translate(-50%, -50%);
    width: 7.5rem;
    height: 7.5rem;
  }
}

.jr-lowell-final-cta__item-icon svg {
  width: 100%;
  height: 100%;
  color: var(--jr-color-primary);
}

.jr-lowell-final-cta__item-title {
  position: relative;
  z-index: 1;
  font-family: var(--jr-font-heading);
  font-weight: 700;
  font-size: var(--jr-text-lg);
  color: var(--jr-color-heading);
  margin: 0 0 0.3rem;
}

.jr-lowell-final-cta__item-text {
  position: relative;
  z-index: 1;
  color: var(--jr-color-text);
  line-height: var(--jr-leading-body);
  margin: 0;
  /* Enough right padding that the watermark sits behind whitespace at
     the end of the text, not directly under mid-word letters -- keeps
     the text itself perfectly legible regardless of the icon under it.
     Desktop only (see the mobile override below): this card is much
     narrower on a phone, and the same fixed 3.5rem there ate a real
     chunk of the already-small width, wrapping every line down to just
     a few words (owner, 2026-09-09: "no esta responsivo... hace
     demaciadas lineas... debe ocupar bien lo ancho de pantalla"). */
  padding-right: 3.5rem;
}

/* Mobile: the watermark itself is centered/enlarged behind the whole
   card (see .jr-lowell-final-cta__item-icon's own mobile rule above),
   not right-anchored like on desktop -- so the text doesn't need to
   dodge a corner anymore, and reclaiming that width lets it use the
   card's real full available space instead of wrapping into a narrow
   column. */
@media (max-width: 767px) {
  .jr-lowell-final-cta__item-text {
    padding-right: 0;
  }
}

/* Geometry (aspect-ratio/radius/overflow/shadow/corner marks) owned by
   .jr-photo-frame above, per data-ratio -- "video" (16:9) on the first
   row's landscape job photo, "portrait" (3:4) on the second row's real
   900x1200 portrait shot. No rule needed here anymore. */

/* .jr-lowell-final-cta__action (the "Get yours today" closing CTA row)
   removed 2026-09-08 -- owner button audit: a 4th CTA duplicating the
   page's real conversion actions (hero's Get a Free Quote, the footer
   form itself), styled as Primary even though it wasn't a call. */

/* ---- Service area (map + hours + FAQ) ---- */
.jr-lowell-area {
  padding: clamp(48px, 7vw, 96px) var(--jr-page-gutter);
  background: var(--jr-color-surface);
}

/* Was max-width:var(--jr-container-content) (1280px), same as every
   other section header on this page -- but this specific title measures
   ~1661px at its real font-size/weight (owner: "en una sola fila sin
   bajar el tamano"), wider than the standard content container fits at
   any common desktop width. No cap here lets it use the section's full
   available width instead (governed only by --jr-page-gutter) -- fits
   on one real line from ~1780px viewports up; below that it still wraps
   to a clean 2-line break at the real sentence boundary (not the old
   text-wrap:balance's 3 forced-even lines), which is the honest result
   once shrinking the type is off the table. */
.jr-lowell-area__header {
  margin: 0 auto clamp(28px, 4vw, 44px);
}

.jr-lowell-area__eyebrow {
  font-family: var(--jr-font-action);
  font-size: var(--jr-text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--jr-color-primary);
  /* Spacing to the title below is owned by .jr-eyebrow-badge's own
     margin-bottom (cta-buttons.css) -- single source for the
     eyebrow-to-title gap across every section, see that rule's comment. */
  margin: 0;
}

.jr-lowell-area__title {
  font-family: var(--jr-font-heading);
  font-weight: 800;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  color: var(--jr-color-heading);
  margin: 0;
}

/* Was max-width:46rem + text-wrap:balance -- wrapped this title to 3
   near-even lines on desktop even though the header has room for it on
   one (owner, 2026-09-08: "en una sola fila sin bajar el tamano"). The
   header itself has no max-width of its own (governed only by the
   section's own --jr-page-gutter); nothing extra needed here once the
   artificial narrower cap is gone. Mobile still wraps naturally from
   the viewport itself. */

/* Real restructure, 2026-09-09 (owner, reference screenshot, repeated
   ask): the map and the details panel must read as ONE single box -- the
   map windowed into its own left side (desktop) / top side (mobile),
   sharing that one box's own background/border/shadow/corners, not two
   separate cards sitting next to each other with a gap between them
   (what this was before: a framed .jr-photo-frame map card + a separate
   dark .jr-lowell-area__details card). The graphite gradient + red
   hairline border + elevation shadow that used to live on
   .jr-lowell-area__details alone now live here, on the shared outer box;
   overflow:hidden clips the map's own flush edge to this box's own
   border-radius, exactly like an image windowed into a card. */
.jr-lowell-area__panel {
  /* --jr-container-wide, not the narrower --jr-container-content -- see
     .jr-lowell-about__grid's comment (lowell-about.css). */
  max-width: var(--jr-container-wide);
  margin: 0 auto clamp(48px, 6vw, 80px);
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  align-items: stretch;
  overflow: hidden;
  border-radius: var(--jr-radius-lg);
  background: linear-gradient(155deg, color-mix(in srgb, var(--jr-color-graphite) 85%, white 15%) 0%, color-mix(in srgb, var(--jr-color-graphite) 97%, black 3%) 100%);
  border: 1px solid color-mix(in srgb, var(--jr-color-primary) 28%, transparent);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 4px 10px rgba(0, 0, 0, 0.25),
    0 22px 48px rgba(0, 0, 0, 0.38);
}

@media (max-width: 900px) {
  .jr-lowell-area__panel {
    grid-template-columns: 1fr;
  }
}

.jr-lowell-area__map {
  position: relative;
  min-height: 320px;
}

/* Overlay badge -- real location label + a real "View Larger" link,
   sitting on top of the map frame (owner reference screenshot,
   2026-09-09: a clean location pill + link, not a bare unlabeled
   iframe). z-index above the iframe (which .jr-photo-frame doesn't
   otherwise stack against); pointer-events left on so the link stays
   clickable, the iframe itself still handles its own interaction below. */
.jr-lowell-area__map-badge {
  position: absolute;
  top: 0.9rem;
  left: 0.9rem;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.6rem 0.5rem 0.8rem;
  border-radius: var(--jr-radius-pill);
  background: color-mix(in srgb, var(--jr-color-surface) 96%, transparent);
  box-shadow: 0 4px 14px rgba(22, 22, 22, 0.18);
}

.jr-lowell-area__map-badge span {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--jr-font-action);
  font-size: var(--jr-text-xs);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--jr-color-heading);
  white-space: nowrap;
}

.jr-lowell-area__map-badge span svg {
  width: 1rem;
  height: 1rem;
  flex: none;
  color: var(--jr-color-primary);
}

.jr-lowell-area__map-badge a {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.35rem 0.7rem;
  border-radius: var(--jr-radius-pill);
  background: var(--jr-color-primary);
  font-family: var(--jr-font-action);
  font-size: var(--jr-text-xs);
  font-weight: 700;
  color: var(--jr-color-text-inverse);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--lib-motion-duration-micro, 180ms) var(--lib-motion-ease-standard, ease);
}

.jr-lowell-area__map-badge a:hover,
.jr-lowell-area__map-badge a:focus-visible {
  background: var(--jr-color-primary-hover);
}

.jr-lowell-area__map-badge a svg {
  width: 0.8rem;
  height: 0.8rem;
  flex: none;
}

/* Mobile: the pill's two halves (label + link) don't both fit on one
   line at this card's narrower width without wrapping mid-word --
   stacks them instead of letting that happen. */
@media (max-width: 480px) {
  .jr-lowell-area__map-badge {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
  }
}

.jr-lowell-area__map iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 320px;
  border: 0;
  /* Real root cause of "se ve suelto/feo" (owner, 2026-09-09, live
     screenshot): the no-API-key google.com/maps embed shows its own
     native gray "Utiliza Ctrl + scroll para acercar/alejar el mapa"
     gesture-guard overlay the instant a visitor's scroll touches it --
     unlike the official Maps Embed API (needs a key, not used here),
     this lightweight embed keeps that full consumer-site behavior. No
     URL param turns it off. This card already has its own real
     "View Larger" action (the badge above) that opens the actual
     interactive map in a new tab, so the embed itself only ever needs
     to be a clean visual preview -- pointer-events:none removes it from
     the interaction path entirely, so that overlay can never trigger and
     page scroll passes straight through instead of getting captured. */
  pointer-events: none;
}

/* Own background/border/shadow removed 2026-09-09 -- now owned by the
   shared outer box, .jr-lowell-area__panel (see its own comment above).
   This is just the padded content column inside that shared box now. */
.jr-lowell-area__details {
  padding: clamp(28px, 3.5vw, 40px);
  color: var(--jr-color-text-inverse);
}

.jr-lowell-area__details h3 {
  font-family: var(--jr-font-heading);
  font-size: var(--jr-text-lg);
  font-weight: 700;
  margin: 0 0 1rem;
  /* Was relying on inheriting text-inverse from the graphite panel above
     -- a same-specificity heading-color rule elsewhere in the cascade
     (Kadence's own .single-content h1-h6, same real conflict already
     documented on .jr-trust-strip__title) was winning instead, rendering
     this title black on the dark panel (owner, 2026-09-08: "esta en
     negro y no se ve bien"). Explicit + !important, same fix. */
  color: var(--jr-color-text-inverse) !important;
}

.jr-lowell-area__list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin: 0 0 1.25rem;
}

.jr-lowell-area__list li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--jr-text-sm);
}

.jr-lowell-area__list svg {
  width: 1.1rem;
  height: 1.1rem;
  flex: none;
  color: var(--jr-color-primary);
}

.jr-lowell-area__hours {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.5rem;
  font-size: var(--jr-text-sm);
}

.jr-lowell-area__hours td {
  padding: 0.4rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--jr-color-text-inverse) 14%, transparent);
}

.jr-lowell-area__hours tr:last-child td {
  border-bottom: 0;
}

.jr-lowell-area__hours td:last-child {
  text-align: right;
  color: color-mix(in srgb, var(--jr-color-text-inverse) 80%, transparent);
}

.jr-lowell-area__actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.jr-lowell-faq {
  max-width: 52rem;
  margin: 0 auto;
}

.jr-lowell-faq__title {
  font-family: var(--jr-font-heading);
  font-weight: 800;
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  color: var(--jr-color-heading);
  margin: 0 0 1.5rem;
}

.jr-lowell-faq__item {
  border-bottom: 1px solid var(--jr-color-border);
  padding: 1.1rem 0;
}

.jr-lowell-faq__item summary {
  cursor: pointer;
  font-family: var(--jr-font-action);
  font-weight: 700;
  font-size: var(--jr-text-base);
  color: var(--jr-color-heading);
  list-style: none;
}

.jr-lowell-faq__item summary::-webkit-details-marker {
  display: none;
}

.jr-lowell-faq__item summary::after {
  content: '+';
  float: right;
  color: var(--jr-color-primary);
  font-weight: 700;
}

.jr-lowell-faq__item[open] summary::after {
  content: '\2212';
}

.jr-lowell-faq__item p {
  margin: 0.75rem 0 0;
  color: var(--jr-color-text);
  line-height: var(--jr-leading-body);
}

/* "View all questions" toggle -- .jr-lowell-faq__more's own [hidden]
   attribute (native display:none) does the actual show/hide, JS
   (faq-toggle.js) just flips it + the button's label/aria-expanded.
   Real bug found live: on a <button> (unlike the <a> tags every other
   .jr-btn-tertiary use on this site is), Kadence's own global button
   reset (padding: 15px 34px, its own inline customizer CSS, loaded
   after this project's stylesheets) was winning the padding/shape
   fight against .jr-btn-tertiary's padding:0 despite equal class
   specificity -- confirmed via computed style, not just reading the
   source. Two classes together here beats a single-class rule
   regardless of load order, so it doesn't matter anymore. */
.jr-btn-tertiary.jr-lowell-faq__toggle {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  font-family: var(--jr-font-action);
  font-size: 15px;
  text-transform: none;
  /* Same fight as padding above -- color, not just background/padding,
     also needed the explicit re-declare (Kadence's own button reset
     sets a white button-text color, invisible on this white section). */
  color: var(--jr-color-primary);
  text-decoration: underline;
  margin-top: 1.25rem;
}

.jr-btn-tertiary.jr-lowell-faq__toggle:hover,
.jr-btn-tertiary.jr-lowell-faq__toggle:focus-visible {
  color: var(--jr-color-primary-hover);
}

.jr-lowell-faq__toggle-icon {
  width: 1rem;
  height: 1rem;
  transition: transform 0.2s ease;
}

.jr-lowell-faq__toggle[aria-expanded="true"] .jr-lowell-faq__toggle-icon {
  transform: rotate(180deg);
}