/*
 * location.css
 * Supporting styles for Alco Van Hire SEO/location pages.
 * Created 6 September 2026.
 *
 * This file deliberately leaves typography, colours, links, page headers,
 * containers, footer, buttons and general site styling to rmcdesign-alco.css.
 */

.seo-site-header {
    background: #fff;
    border-bottom: 1px solid #cacaca;
}

.seo-brand {
    display: inline-block;
    font-family: Oswald, sans-serif;
    color: red !important;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.1;
    padding: 12px 0;
}

.seo-header-note {
    text-align: right;
    font-family: Oswald, sans-serif;
    font-weight: 700;
    color: #000;
}

.seo-nav {
    background: #000;
    padding: 0 1%;
}

.seo-nav ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.seo-nav li {
    margin: 0;
    padding: 0;
}

.seo-nav a,
.seo-nav a:link,
.seo-nav a:visited {
    display: block;
    color: #fff;
    padding: 11px 13px;
    font-weight: 700;
}

.seo-nav a:hover,
.seo-nav a:focus {
    color: red;
}

.location-hero,
.seo-hero {
    display: flex;
    gap: 24px;
    align-items: center;
    margin: 0 0 22px;
}

.location-hero__content,
.seo-hero__content {
    flex: 1 1 55%;
}

.location-hero__media,
.seo-hero__media {
    flex: 0 1 42%;
    margin: 0;
}

.location-hero__media img,
.seo-hero__media img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid #cacaca;
}

.location-hero__media figcaption,
.seo-hero__media figcaption {
    font-size: 12px;
    line-height: 17px;
    margin-top: 6px;
    color: #555;
}

.seo-lead {
    font-size: 16px;
    line-height: 24px;
}

.seo-facts,
.seo-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin: 15px 0 24px;
}

.seo-fact,
.seo-card {
    border: 1px solid #cacaca;
    padding: 14px;
    background: #f7f7f7;
}

.seo-fact strong,
.seo-card strong {
    display: block;
    font-family: Oswald, sans-serif;
    font-size: 16px;
    margin-bottom: 4px;
}

.seo-table-wrap {
    width: 100%;
    overflow-x: auto;
    margin: 12px 0 22px;
}

.seo-table {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
    font-size: 14px;
}

.seo-table th,
.seo-table td {
    border: 1px solid #ddd;
    padding: 9px;
    text-align: left;
    vertical-align: top;
}

.seo-table th {
    background: #4a4949;
    color: #fff;
}

.seo-table tr:nth-child(even) td {
    background: #f7f7f7;
}

.seo-link-list {
    columns: 2;
    column-gap: 30px;
    padding-left: 20px;
}

.seo-link-list li {
    margin-bottom: 7px;
    break-inside: avoid;
}


.seo-section-anchor {
    scroll-margin-top: 20px;
}

.seo-small {
    font-size: 12px;
    line-height: 17px;
}

.seo-footer-links {
    background: #000;
    color: #fff;
    padding: 18px 3%;
}

.seo-footer-links a,
.seo-footer-links a:link,
.seo-footer-links a:visited {
    color: #fff;
}

.seo-footer-links a:hover,
.seo-footer-links a:focus {
    color: red;
}

@media screen and (max-width: 800px) {
    .location-hero,
    .seo-hero {
        flex-direction: column;
    }

    .location-hero__media,
    .seo-hero__media {
        width: 100%;
    }

    .seo-facts,
    .seo-cards {
        grid-template-columns: 1fr;
    }

    .seo-link-list {
        columns: 1;
    }
}

@media screen and (max-width: 600px) {
    .seo-nav ul {
        display: block;
    }

    .seo-nav a,
    .seo-nav a:link,
    .seo-nav a:visited {
        padding: 8px 10px;
        border-bottom: 1px solid #333;
    }

    .seo-brand {
        font-size: 26px;
    }

    .seo-header-note {
        text-align: center;
        margin-bottom: 8px;
    }
}

/* ========================================================================
   LOCATION QUOTE WIDGET - 6 September 2026
   ======================================================================== */

/*
 * The embedded Secure Web Bookings widget uses the same basic dimensions
 * as the widget on the Book Now page.
 *
 * Book Now reference:
 *   .bookwidgetouter = 360px wide
 *   iframe          = 100% wide / 370px minimum height
 *
 * The Book Now skew animation, shadow and decorative padding are deliberately
 * not reproduced here because the quote widget sits within the location-page
 * content rather than the red booking-page panel.
 */

.location-quote {
    margin: 26px 0;
}

.location-quote__inner {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    border: 1px solid #cacaca;
    background: #f7f7f7;
    padding: 18px;
}

.location-quote__intro {
    flex: 1 1 auto;
    min-width: 0;
}

.location-quote__intro h2 {
    margin-top: 0;
    font-family: Oswald, sans-serif;
    font-size: 20px;
    line-height: 26px;
    color: red;
}


/* -------------------------------------------------------------------------
   BOOKING WIDGET
   ------------------------------------------------------------------------- */

.location-quote__widget {
    flex: 0 0 360px;
    width: 360px;
    max-width: 100%;
    min-width: 0;
}

.location-quote__widget iframe {
    display: block;
    width: 100%;
    min-height: 370px;
    border: 0;
    background: #fff;
}


/* -------------------------------------------------------------------------
   BOOKING WIDGET FALLBACK
   ------------------------------------------------------------------------- */

.location-quote__warning {
    padding: 18px;
    margin: 0;
    border: 1px solid red;
    background: #fff;
    text-align: center;
    font-weight: 700;
    line-height: 22px;
}


/*
 * seo.css
 * Supporting styles for Alco Van Hire SEO use/intent, duration and guide pages.
 * Created 6 September 2026.
 *
 * Typography, colours, links, global containers, header, footer and shared
 * FAQ/title styling remain in rmcdesign-alco.css and faq.css.
 */

.seo-lead {
    font-size: 16px;
    line-height: 24px;
}

.seo-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin: 15px 0 24px;
}

.seo-card {
    border: 1px solid #cacaca;
    padding: 14px;
    background: #f7f7f7;
}

.seo-card strong {
    display: block;
    font-family: Oswald, sans-serif;
    font-size: 16px;
    margin-bottom: 4px;
}

.seo-table-wrap {
    width: 100%;
    overflow-x: auto;
    margin: 12px 0 22px;
}

.seo-table {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
    font-size: 14px;
}

.seo-table th,
.seo-table td {
    border: 1px solid #ddd;
    padding: 9px;
    text-align: left;
    vertical-align: top;
}

.seo-table th {
    background: #4a4949;
    color: #fff;
}

.seo-table tr:nth-child(even) td {
    background: #f7f7f7;
}

.seo-section-anchor {
    scroll-margin-top: 20px;
}

.seo-small {
    font-size: 12px;
    line-height: 17px;
}


/* -------------------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------------------- */

@media screen and (max-width: 800px) {

    .location-quote__inner {
        flex-direction: column;
    }

    .location-quote__intro {
        width: 100%;
    }

    .location-quote__widget {
        flex: none;
        width: 360px;
        max-width: 100%;
        margin: 0 auto;
    }

	.seo-cards {
        grid-template-columns: 1fr;
    }
}


@media screen and (max-width: 600px) {

    .location-quote__inner {
        padding: 10px;
    }

}