/* ---------------------------------------------------------------------------
   RideCar city pages - layout system
   ---------------------------------------------------------------------------
   Written mobile-first: the base rules are the phone layout and the media
   queries only add to it. Everything is namespaced rc- so it cannot collide
   with Bootstrap 3 or the old style.css still loaded on these pages.

   The layout this replaces put a 1000x1500 portrait photo beside the text in
   a flex row, which is why the page fell apart. Here every image sits above
   its text, spans the column, and is locked to 16:9 by aspect-ratio, so the
   page cannot be broken by whatever shape the next photo happens to be.
   --------------------------------------------------------------------------- */

.rc {
    --rc-ink:        #16211f;
    --rc-ink-soft:   #4a5b58;
    --rc-brand:      #227d71;
    --rc-brand-dark: #17594f;
    --rc-brand-tint: #f2faf8;
    --rc-line:       #dfe8e6;
    /* Warm amber against the cool brand green. The orange this replaced carried
       white text at 2.61:1, below the 4.5:1 minimum, which is why it read as
       muddy. Amber with the dark ink runs 10.28:1. */
    --rc-accent:      #ffc24b;
    --rc-accent-dark: #f5b301;
    --rc-radius:     14px;
    --rc-shadow:     0 1px 2px rgba(16, 40, 36, .06), 0 8px 24px rgba(16, 40, 36, .07);

    color: var(--rc-ink);
    font-size: 16px;
    line-height: 1.68;
    -webkit-text-size-adjust: 100%;
}

.rc *, .rc *::before, .rc *::after { box-sizing: border-box; }

.rc-wrap {
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 18px;
}

/* --- Section rhythm ------------------------------------------------------ */

.rc-block { padding: 26px 0; }
.rc-block--tint { background: var(--rc-brand-tint); }
.rc-block--first { padding-top: 20px; }

@media (min-width: 768px)  { .rc-block { padding: 34px 0; } }
@media (min-width: 1024px) { .rc-block { padding: 42px 0; } }

/* Where the background does not change between two blocks, their facing
   paddings stack into a gap twice the size and read as one empty band. The
   previous block's bottom padding is separation enough there; the full pair
   is kept only where a colour change needs the breathing room. */
.rc-block:not(.rc-block--tint) + .rc-block:not(.rc-block--tint),
.rc-block--tint + .rc-block--tint {
    padding-top: 0;
}

/* --- Type ---------------------------------------------------------------- */

.rc h2 {
    font-size: clamp(22px, 5.2vw, 32px);
    line-height: 1.25;
    font-weight: 700;
    color: var(--rc-ink);
    margin: 0 0 14px;
    letter-spacing: -0.01em;
}

.rc h3 {
    font-size: clamp(18px, 4.2vw, 21px);
    line-height: 1.35;
    font-weight: 650;
    color: var(--rc-brand-dark);
    margin: 26px 0 8px;
}

.rc p  { margin: 0 0 16px; color: var(--rc-ink-soft); }
.rc p:last-child { margin-bottom: 0; }
.rc strong { color: var(--rc-ink); font-weight: 650; }

/* Buttons are excluded rather than fought with specificity - .rc a would
   otherwise win over every .rc-btn rule and repaint the labels brand green
   with an underline through them. */
.rc a:not(.rc-btn) { color: var(--rc-brand); text-decoration: underline; text-underline-offset: 2px; }
.rc a:not(.rc-btn):hover, .rc a:not(.rc-btn):focus { color: var(--rc-brand-dark); }

.rc ul { margin: 0 0 16px; padding-left: 20px; }
.rc li { margin-bottom: 9px; color: var(--rc-ink-soft); }

/* --- Media: always horizontal, whatever the source ----------------------- */

.rc-media {
    margin: 0 0 20px;
    border-radius: var(--rc-radius);
    overflow: hidden;
    background: #eef4f3;
    box-shadow: var(--rc-shadow);
}

.rc-media img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: center 40%;
}

/* Older browsers with no aspect-ratio support still get a horizontal band. */
@supports not (aspect-ratio: 16 / 9) {
    .rc-media { position: relative; padding-top: 56.25%; }
    .rc-media img { position: absolute; inset: 0; height: 100%; }
}

.rc-media--below { margin: 24px 0 0; }

/* --- Two-column reading width on larger screens -------------------------- */

/* Copy runs to the same width as the image above it. A narrower measure reads
   a little better, but the mismatched edges looked worse than the long lines
   do - so the line height below is opened up to compensate. */
.rc-copy { max-width: none; }
.rc-copy p, .rc-copy li { line-height: 1.75; }

@media (min-width: 900px) {
    .rc-block__inner { display: grid; grid-template-columns: 1fr; gap: 0; }
    .rc-block--split .rc-block__inner {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 40px;
        align-items: start;
    }
    .rc-block--split .rc-media { margin-bottom: 0; position: sticky; top: 24px; }
}

/* --- Highlight panel ----------------------------------------------------- */

.rc-panel {
    background: #fff;
    border: 1px solid var(--rc-line);
    border-radius: var(--rc-radius);
    padding: 20px;
    box-shadow: var(--rc-shadow);
}
@media (min-width: 768px) { .rc-panel { padding: 28px 30px; } }

/* --- Call to action ------------------------------------------------------ */

.rc-cta {
    background: linear-gradient(135deg, var(--rc-brand) 0%, var(--rc-brand-dark) 100%);
    color: #fff;
    border-radius: var(--rc-radius);
    padding: 26px 20px;
    text-align: center;
}
.rc-cta h2, .rc-cta p { color: #fff; }
.rc-cta h2 { margin-bottom: 8px; }
.rc-cta p  { color: rgba(255, 255, 255, .9); margin-bottom: 20px; }

.rc-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.rc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 50px;            /* comfortably above the 48px touch target */
    padding: 13px 22px;
    border-radius: 999px;
    font-weight: 650;
    font-size: 16px;
    text-decoration: none;
    border: 2px solid transparent;
    transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.rc-btn:hover, .rc-btn:focus { transform: translateY(-1px); text-decoration: none; }
.rc-btn:active { transform: translateY(0); }

/* Three tiers, so the eye is told which action matters: amber fill, white
   fill, then outline. Each carries dark-on-light or light-on-dark text well
   past the 4.5:1 minimum. */
.rc-btn--call  { background: var(--rc-accent); color: var(--rc-ink); box-shadow: 0 6px 18px rgba(23, 89, 79, .28); }
.rc-btn--call:hover, .rc-btn--call:focus { background: var(--rc-accent-dark); color: var(--rc-ink); }
.rc-btn--book  { background: #fff; color: var(--rc-brand-dark); }
.rc-btn--book:hover, .rc-btn--book:focus { background: #eafaf6; color: var(--rc-brand-dark); }
.rc-btn--wa    { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .75); }
.rc-btn--wa:hover, .rc-btn--wa:focus { background: rgba(255, 255, 255, .16); color: #fff; }

@media (min-width: 640px) {
    .rc-cta { padding: 38px 32px; }
    .rc-actions { flex-direction: row; justify-content: center; flex-wrap: wrap; }
    .rc-btn { min-width: 200px; }
}

/* --- Trust strip --------------------------------------------------------- */

.rc-trust {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.rc-trust li {
    background: #fff;
    border: 1px solid var(--rc-line);
    border-radius: 12px;
    padding: 14px 14px;
    font-size: 14px;
    line-height: 1.4;
    font-weight: 600;
    color: var(--rc-ink);
    margin: 0;
    text-align: center;
}
@media (min-width: 768px) {
    .rc-trust { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
    .rc-trust li { padding: 18px 14px; font-size: 15px; }
}

/* --- City cards ---------------------------------------------------------- */

.rc-cities {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.rc-cities li { margin: 0; }
.rc-cities a {
    display: block;
    background: #fff;
    border: 1px solid var(--rc-line);
    border-radius: 12px;
    padding: 16px 18px;
    text-decoration: none;
    color: var(--rc-ink);
    font-weight: 600;
    transition: border-color .12s ease, box-shadow .12s ease;
}
.rc-cities a:hover, .rc-cities a:focus {
    border-color: var(--rc-brand);
    box-shadow: var(--rc-shadow);
    text-decoration: none;
}
.rc-cities .rc-cities__note {
    display: block;
    font-weight: 400;
    font-size: 14px;
    color: var(--rc-ink-soft);
    margin-top: 3px;
}
@media (min-width: 700px)  { .rc-cities { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* --- FAQ ----------------------------------------------------------------- */

.rc-faq { margin-top: 6px; }
.rc-faq details {
    background: #fff;
    border: 1px solid var(--rc-line);
    border-radius: 12px;
    margin-bottom: 10px;
    overflow: hidden;
}
.rc-faq details[open] { border-color: var(--rc-brand); }
.rc-faq summary {
    cursor: pointer;
    list-style: none;
    padding: 16px 46px 16px 18px;
    font-weight: 650;
    font-size: 16px;
    line-height: 1.45;
    color: var(--rc-ink);
    position: relative;
    min-height: 52px;
}
.rc-faq summary::-webkit-details-marker { display: none; }
.rc-faq summary h3.rc-faq__q {
    display: inline;
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    color: inherit;
}
.rc-faq summary::after {
    content: "+";
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 24px;
    font-weight: 400;
    line-height: 1;
    color: var(--rc-brand);
}
.rc-faq details[open] summary::after { content: "\2212"; }
.rc-faq .rc-faq__body {
    padding: 0 18px 16px;
    color: var(--rc-ink-soft);
    margin: 0;
}

/* --- Sticky mobile action bar -------------------------------------------- */

.rc-sticky {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 980;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, .97);
    border-top: 1px solid var(--rc-line);
    box-shadow: 0 -4px 20px rgba(16, 40, 36, .1);
}
.rc-sticky .rc-btn { min-height: 46px; padding: 10px 14px; font-size: 15px; min-width: 0; }
/* The bar is white, so the amber fill needs an edge of its own to read as a
   button; the shadow that does that job on the green panel is not enough here. */
.rc-sticky .rc-btn--call { border-color: var(--rc-accent-dark); box-shadow: none; }
.rc-sticky .rc-btn--book { background: var(--rc-brand); color: #fff; }

body.rc-has-sticky { padding-bottom: 74px; }

@media (min-width: 768px) {
    .rc-sticky { display: none; }
    body.rc-has-sticky { padding-bottom: 0; }
}

/* --- Anything the old stylesheet would otherwise stretch ------------------ */

.rc img { max-width: 100%; }
.rc-block table { width: 100%; border-collapse: collapse; }
.rc-block table td, .rc-block table th { padding: 10px 12px; border: 1px solid var(--rc-line); }

@media (prefers-reduced-motion: reduce) {
    .rc-btn { transition: none; }
    .rc-btn:hover, .rc-btn:focus { transform: none; }
}