/*
Theme Name: Taxi
Theme URI: https://goldenrulerides.com/
Author: Steven Adger
Author URI: https://goldenrulerides.com/
Description: Custom FSE theme for Golden Rule Luxury Ride Services.
Version: 1.0
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 7.2
License: MIT
Text Domain: taxi
*/
/* =========================================================
   Global overrides
   ========================================================= */
body {
    background: #ffffff;
    color: #3a3a3a;
}

html {
    scroll-behavior: smooth;
}

/* =========================================================
   Header / navigation
   ========================================================= */
/* Sticky header - floats at top on scroll */
header.wp-block-template-part {
    position: sticky;
    top: 0;
    z-index: 1000;
}

/* Remove margin-block-start from header children */
.wp-block-template-part > .wp-block-group > * {
    margin-block-start: 0 !important;
}

/* Nav hover - white text on dark bg, like original */
.wp-block-navigation__container .wp-block-navigation-item:hover .wp-block-navigation-item__label {
    color: #fff;
}
.wp-block-navigation__container .wp-block-navigation-item:hover {
    background-color: #141616;
    border-radius: 3px;
}

/* Nav layout: logo left, links right */
.wp-block-navigation {
    margin-left: auto;
}

/* Site logo sizing — header only */
.wp-block-template-part .wp-block-site-logo a {
    display: inline-block;
}

.wp-block-navigation__responsive-container {
    background: #0d0f0f;
}

/* =========================================================
   Vehicle cards
   ========================================================= */
.wp-block-column.has-background {
    background: #fff;
    border-radius: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease;
}
.wp-block-column.has-background:hover {
    transform: translateY(-4px);
}

/* Uniform card images */
#vehicles .wp-block-image img {
    width: 100%;
    height: 260px;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* =========================================================
   FAQ Details block
   ========================================================= */
details {
    border: 1px solid #e0e0e0;
    margin-bottom: 0.75rem;
    background: #ffffff;
    overflow: hidden;
}
details > div {
    padding: 1rem 1.25rem;
}
details > * {
    padding-left: 1rem;
    padding-right: 1rem;
}
details > :first-child {
    padding-top: 1rem;
}
details > :last-child {
    padding-bottom: 1rem;
}
details summary {
    font-weight: 700;
    font-size: 17px;
    line-height: 1.5;
    cursor: pointer;
    list-style: none;
    position: relative;
    padding: 0.9rem 3.5rem 0.9rem 1.25rem;
    background: #f0ede6;
}
summary::-webkit-details-marker { display: none; }
summary::marker { content: ""; }
details summary::after {
    content: '+';
    position: absolute;
    right: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.4rem;
    font-weight: 700;
    color: #c9a84c;
}
details[open] summary::after {
    content: '−';
}

/* =========================================================
   Booking form — container
   Moved off the inline style attribute so media queries can win.
   Markup: <div class="form-container"><div class="form-grid"> … </div></div>
   ========================================================= */
.form-container {
    max-width: 800px;
    margin: 0 auto;
    background: #fff;
    padding: 2rem;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Two-column field grid.
   minmax(0, 1fr)  → tracks may shrink below the inputs' intrinsic width
                     (size="40" is what pushes the columns off screen).
   align-items:end → each cell hugs the bottom of its row, so the inputs
                     line up even when one label wraps to two lines. */
.form-container .form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 1.25rem;
    align-items: end;
}
.form-container .form-grid > div {
    min-width: 0;
}

/* CF7 wraps every field in a <p>; kill the theme's paragraph spacing
   so the grid gap is the only thing controlling rhythm. */
.form-container .form-grid p {
    margin: 0;
}

/* Blocks that sit outside the grid (additional info, turnstile, submit) */
.form-container .form-grid ~ div {
    margin-top: 1.25rem;
}
.form-container .form-grid ~ div p {
    margin: 0;
}

/* =========================================================
   Booking form — location groups (pick-up, drop-off, stops)
   Each group spans the full width and runs its own 6-column
   sub-grid for street / line 2 / city / state / ZIP.
   ========================================================= */
.form-container .loc-group,
.form-container .full-row {
    grid-column: 1 / -1;
    min-width: 0;
}

.form-container .loc-group {
    border: 1px solid #e0e0e0;
    border-radius: 3px;
    padding: 0.5rem 1.25rem 1.25rem;
    margin: 0;
}

.form-container .loc-group legend {
    padding: 0 0.5rem;
    font-size: 15px;
    font-weight: 700;
    color: #3a3a3a;
}

.form-container .addr-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 1rem 1.25rem;
    align-items: end;
}
.form-container .addr-grid > p {
    margin: 0;
    min-width: 0;
}

.form-container .addr-street  { grid-column: span 4; }
.form-container .addr-line2   { grid-column: span 2; }
.form-container .addr-city    { grid-column: span 3; }
.form-container .addr-state   { grid-column: span 1; }
.form-container .addr-zip     { grid-column: span 2; }
.form-container .addr-actions { grid-column: 1 / -1; }

@media (max-width: 700px) {
    .form-container .loc-group {
        padding: 0.5rem 1rem 1rem;
    }
    .form-container .addr-street,
    .form-container .addr-line2,
    .form-container .addr-city {
        grid-column: 1 / -1;
    }
    .form-container .addr-state { grid-column: span 2; }
    .form-container .addr-zip   { grid-column: span 4; }
}

/* =========================================================
   Booking form — fields
   ========================================================= */
.form-container input,
.form-container select,
.form-container textarea {
    display: block;
    width: 100%;
    padding: 10px 12px;
    margin-bottom: 0;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-family: 'Quicksand', sans-serif;
    font-size: 15px;
    background: #fff;
    box-sizing: border-box;
}

.form-container select {
    appearance: auto;
}

/* The width:100% above also catches checkboxes — undo it. */
.form-container input[type="checkbox"],
.form-container input[type="radio"] {
    display: inline-block;
    width: auto;
    margin: 0;
}

.form-container label {
    display: block;
    margin-bottom: 4px;
    font-size: 14px;
    font-weight: 600;
    color: #3a3a3a;
}

textarea[name="addl-info-1"] {
    resize: vertical;
    min-height: 140px;
}

/* Round Trip: label text on top, checkbox beneath, matching the other cells */
.form-container .round-trip .wpcf7-list-item-label {
    display: block;
    margin-bottom: 4px;
    font-size: 14px;
    font-weight: 600;
    color: #3a3a3a;
}
.form-container .round-trip .wpcf7-list-item {
    margin: 0;
}
.form-container .round-trip input[type="checkbox"] {
    /* line the box up with the bottom edge of the inputs in the same row */
    margin-bottom: 12px;
    transform: scale(1.2);
    transform-origin: left center;
}

/* =========================================================
   Booking form — buttons
   ========================================================= */
.form-container button,
.wpcf7-form-control.wpcf7-submit.has-spinner {
    background: #c9a84c;
    color: #fff;
    border: none;
    padding: 12px 24px;
    font-size: 16px;
    font-weight: 700;
    font-family: 'Quicksand', sans-serif;
    cursor: pointer;
    width: 100%;
    text-transform: uppercase;
}

.wpcf7-form .add-stop,
.wpcf7-form .remove-stop {
    cursor: pointer;
}

/* Remove is a secondary action — don't give it a full-width gold bar */
.form-container .remove-stop {
    width: auto;
    padding: 8px 16px;
    font-size: 13px;
}

.form-container .submit-row {
    margin-top: 1.5rem;
}

/* If you'd rather "+ Add Stop" wasn't full width either, uncomment:
.form-container .add-stop { width: auto; padding: 10px 20px; font-size: 14px; }
*/

/* Keyboard focus */
.form-container input:focus-visible,
.form-container select:focus-visible,
.form-container textarea:focus-visible,
.form-container button:focus-visible,
.wpcf7-submit:focus-visible {
    outline: 2px solid #c9a84c;
    outline-offset: 2px;
}

/* =========================================================
   Booking form — hidden stop rows
   The Add/Remove script toggles the [hidden] attribute, so nothing
   in the theme is allowed to give these rows a display value back.
   ========================================================= */
.wpcf7-form .stop-row[hidden],
.wpcf7-form .add-stop[hidden],
.form-container [hidden] {
    display: none !important;
}

/* =========================================================
   Booking form — mobile
   ========================================================= */
@media (max-width: 600px) {
    .form-container {
        padding: 1.25rem;
    }
    .form-container .form-grid {
        grid-template-columns: 1fr;
    }
    /* iOS zooms the viewport on focus if the font is under 16px */
    .form-container input,
    .form-container select,
    .form-container textarea {
        font-size: 16px;
    }
    .form-container .remove-stop {
        width: 100%;
    }
}

/* =========================================================
   Footer
   ========================================================= */
.footer-section {
    background: #1a1a1a;
    color: #fff;
}
.footer-section a {
    color: #c9a84c;
    text-decoration: none;
}
.footer-section a:hover {
    color: #d4b96a;
}

/* =========================================================
   Misc
   ========================================================= */
figure.wp-block-image {
    margin: 0;
}

.wp-block-columns {
    gap: 30px;
}

@media (max-width: 768px) {
    .wp-block-columns {
        gap: 2rem !important;
    }
}

#ui-datepicker-div {
    z-index: 999 !important;
}

/* =========================================================
   Booking confirmation modal
   Required by booking-modal.js. Without these rules the dialog
   renders as an ordinary block at the bottom of the page.
   ========================================================= */
.grr-modal {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(20, 22, 22, 0.6);
    overflow-y: auto;
}

.grr-modal__dialog {
    width: 100%;
    max-width: 560px;
    max-height: calc(100vh - 2rem);
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
    animation: grr-modal-in 0.18s ease-out;
}

@keyframes grr-modal-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .grr-modal__dialog { animation: none; }
}

.grr-modal__body {
    padding: 1.75rem 1.5rem 1.25rem;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    font-size: 16px;
    line-height: 1.6;
    color: #3a3a3a;
    white-space: pre-line;
}

.grr-modal__foot {
    padding: 1rem 1.5rem 1.5rem;
}

.grr-modal__close {
    display: block;
    width: 100%;
    padding: 12px 24px;
    border: none;
    background: #c9a84c;
    color: #fff;
    font-family: 'Quicksand', sans-serif;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
}
.grr-modal__close:focus-visible {
    outline: 2px solid #3a3a3a;
    outline-offset: 2px;
}

@media (max-width: 600px) {
    .grr-modal {
        padding: 0.5rem;
    }
    .grr-modal__body {
        padding: 1.5rem 1.25rem 1rem;
    }
    .grr-modal__foot {
        padding: 0.75rem 1.25rem 1.25rem;
    }
}

/* =========================================================
   Booking form — confirm before send
   Review dialog built by the "confirm before send" snippet.
   Sits above .grr-modal so the two can never fight over the
   stacking order if a submission finishes while it is open.
   ========================================================= */
body.grr-verify-open {
    overflow: hidden;
}

.grr-verify {
    position: fixed;
    inset: 0;
    z-index: 100001;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(20, 22, 22, 0.6);
    overflow-y: auto;
}

.grr-verify__dialog {
    width: 100%;
    max-width: 620px;
    max-height: calc(100vh - 2rem);
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
    animation: grr-modal-in 0.18s ease-out;
}

@media (prefers-reduced-motion: reduce) {
    .grr-verify__dialog { animation: none; }
}

.grr-verify__head {
    padding: 1.5rem 1.5rem 1.1rem;
    border-bottom: 1px solid #e0e0e0;
}

.grr-verify__title {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    color: #3a3a3a;
}

.grr-verify__intro {
    margin: 0.4rem 0 0;
    font-size: 15px;
    line-height: 1.5;
    color: #6a6a6a;
}

.grr-verify__body {
    padding: 0 1.5rem;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.grr-verify__section {
    padding: 1.25rem 0 0.25rem;
}
.grr-verify__section + .grr-verify__section {
    border-top: 1px solid #e0e0e0;
}

/* Fieldset legends carried over from the form (Pick-Up, Drop-Off, Stop 1…) */
.grr-verify__legend {
    margin: 0 0 0.5rem;
    font-size: 16px;
    font-weight: 700;
    color: #3a3a3a;
    border-left: 3px solid #c9a84c;
    padding-left: 0.6rem;
}

/* Label left, answer right — the answer is what the eye should land on. */
.grr-verify__row {
    display: grid;
    grid-template-columns: minmax(0, 38%) minmax(0, 1fr);
    gap: 0.25rem 1rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid #f0ede6;
}
.grr-verify__row:last-child {
    border-bottom: 0;
}

.grr-verify__label {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    color: #6a6a6a;
}

.grr-verify__value {
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
    color: #3a3a3a;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.grr-verify__value.is-empty {
    color: #9a9a9a;
    font-style: italic;
}

.grr-verify__foot {
    display: flex;
    gap: 0.75rem;
    padding: 1.25rem 1.5rem 1.5rem;
    border-top: 1px solid #e0e0e0;
}

.grr-verify__btn {
    flex: 1;
    padding: 12px 20px;
    border: none;
    border-radius: 3px;
    font-family: 'Quicksand', sans-serif;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
    cursor: pointer;
}
.grr-verify__btn:focus-visible {
    outline: 2px solid #3a3a3a;
    outline-offset: 2px;
}

.grr-verify__btn--edit {
    background: #fff;
    border: 1px solid #ccc;
    color: #3a3a3a;
}
.grr-verify__btn--edit:hover {
    background: #f0ede6;
}

.grr-verify__btn--send {
    background: #c9a84c;
    color: #fff;
}
.grr-verify__btn--send:hover {
    background: #d4b96a;
}

@media (max-width: 600px) {
    .grr-verify {
        padding: 0.5rem;
    }
    .grr-verify__head {
        padding: 1.25rem 1.25rem 1rem;
    }
    .grr-verify__body {
        padding: 0 1.25rem;
    }
    /* Stack label over answer — 38% columns get too cramped to read. */
    .grr-verify__row {
        grid-template-columns: 1fr;
        gap: 0.1rem;
    }
    .grr-verify__foot {
        flex-direction: column-reverse;
        padding: 1rem 1.25rem 1.25rem;
    }
}