/* ============================================================
   Restaurant detail page — SEO sections
   (services, products/menu highlights, ratings, FAQ accordion)
   Accent colour is injected via the --resto-accent CSS variable
   from the page's inline <style> (store_info_color config item).
   ============================================================ */

/* ---- Hero ---- */
.resto-hero {
    text-align: center;
    margin-top: 8px;   /* exact height of the fixed #header */
    padding: 24px 0 8px;
}

.resto-hero h1 {
    font-size: 32px;
    font-weight: 800;
    color: var(--resto-accent, #e40f18);
    margin-bottom: 6px;
}

.resto-hero .resto-seo-lead {
    max-width: 820px;
    margin: 12px auto 0;
    color: #555;
    line-height: 1.6;
}

/* ---- Section spacing (tightens the legacy horaire-page gaps) ---- */
.resto-hero + .cont-pagehoraire {
    margin-top: 16px;
}

.cont-pagehoraire-sec2 {
    margin-top: 24px;
}

.row-flx-horaire {
    margin-top: 16px;
    margin-bottom: 16px;
}

.heureouver2 {
    margin-top: 0;
    margin-bottom: 14px;
}

.heureouver2 h2 {
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 0 10px;
    color: #000;
}

.resto-seo-section {
    padding: 24px 0;
}

/* ---- Hero contact row (phone + address) ---- */
.resto-hero-contact {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px 28px;
    margin-top: 12px;
}

.resto-hero-contact-item {
    display: inline-flex;
    align-items: flex-start;
    gap: 8px;
    color: #333;
    font-weight: 600;
    text-decoration: none;
}

.resto-hero-contact-item:hover {
    color: var(--resto-accent, #e40f18);
    text-decoration: none;
}

.resto-hero-contact-item img {
    height: 20px;
    margin-top: 2px;
    flex: 0 0 auto;
}

/* keep the icon glued to the text when the address wraps
   (the span would otherwise center itself across the full row) */
.resto-hero-contact-item span {
    text-align: left;
}

/* ---- CTA bar (Commandez maintenant + order buttons) ---- */
.resto-cta-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px 24px;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04);
    padding: 18px 28px;
}

.resto-cta-title {
    font-size: 24px;
    font-weight: 800;
    margin: 0;
    color: #000;
}

.resto-cta-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.resto-cta-btn {
    margin: 0;
    background: var(--resto-accent, #e40f18);
    color: #fff;
    border: 1px solid var(--resto-accent, #e40f18);
    border-radius: 50px;
    padding: 10px 28px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 14px;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.resto-cta-btn:hover,
.resto-cta-btn:focus {
    background: var(--resto-accent, #e40f18);
    color: #fff;
    border-color: var(--resto-accent, #e40f18);
    transform: translateY(-2px);
    box-shadow: 0 0.5em 0.5em -0.4em var(--resto-accent, #e40f18);
}

@media screen and (max-width: 576px) {
    .resto-cta-bar {
        justify-content: center;
        text-align: center;
    }
}

/* ---- Map band (full width) + description text below ---- */
.row-flx-horaire .texthoraire {
    padding: 26px 32px;
}

.resto-map-wrap {
    margin-top: 32px;
}

.resto-map {
    display: block;
    width: 100%;
    height: 340px;
    border: 0;
    border-radius: 14px;
}

@media screen and (max-width: 768px) {
    .resto-map {
        height: 260px;
    }
}

/* ---- Opening hours card ---- */
.resto-hours-card {
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04);
    padding: 6px 22px;
    max-width: 460px;
}

.resto-hours-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 11px 2px;
    border-bottom: 1px solid #f2f2f2;
    font-size: 15px;
}

.resto-hours-row:last-child {
    border-bottom: 0;
}

.resto-hours-day {
    font-weight: 600;
    color: #333;
}

.resto-hours-time {
    color: #555;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.resto-hours-sep {
    color: #bbb;
    margin: 0 2px;
}

.resto-hours-row.is-today .resto-hours-day {
    color: var(--resto-accent, #e40f18);
}

.resto-hours-row.is-today .resto-hours-day::after {
    content: "•";
    margin-left: 6px;
}

.resto-hours-row.is-today .resto-hours-time {
    color: #222;
    font-weight: 700;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.resto-seo-section h2 {
    font-size: 26px;
    font-weight: 800;
    margin-bottom: 6px;
    color: var(--resto-accent, #e40f18);
}

.resto-seo-section .resto-seo-lead {
    color: #555;
    margin-bottom: 18px;
}

/* ---- Ratings block ---- */
.resto-rating {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff8e1;
    border: 1px solid #ffe082;
    border-radius: 999px;
    padding: 6px 16px;
    font-weight: 600;
    color: #5d4037;
    margin: 8px 0 4px 10px;
}

.resto-rating .resto-stars {
    color: #f5a623;
    letter-spacing: 1px;
}

.resto-rating .resto-rating-count {
    color: #777;
    font-weight: 500;
}

/* ---- Services list ---- */
.resto-services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 16px;
}

.resto-service-card {
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid #e2e2e2;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04);
    padding: 18px 20px;
}

.resto-service-card h3 {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 8px;
    color: #222;
}

.resto-service-card p {
    margin: 0;
    color: #666;
    font-size: 14px;
    line-height: 1.5;
}

/* ---- Products / menu highlights ---- */
.resto-products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.resto-product-pill {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: #fff;
    border: 1px solid #e2e2e2;
    border-radius: 10px;
    padding: 16px 12px;
    font-weight: 600;
    color: #333;
}

.resto-product-pill:hover {
    color: var(--resto-accent, #e40f18);
}

.resto-cta-link {
    display: inline-block;
    background: var(--resto-accent, #e40f18);
    color: #fff;
    border-radius: 50px;
    padding: 10px 28px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
    transition: 0.3s;
}

.resto-cta-link:hover {
    color: #fff;
    transform: translateY(-0.15em);
    box-shadow: 0 0.5em 0.5em -0.4em var(--resto-accent, #e40f18);
}

/* ---- Internal links row ---- */
.resto-internal-links {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 10px;
}

.resto-internal-links a {
    color: var(--resto-accent, #e40f18);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.resto-internal-links a:hover {
    border-bottom-color: var(--resto-accent, #e40f18);
}

/* ---- FAQ accordion ---- */
.resto-faq-item {
    border: 1px solid #e2e2e2;
    border-radius: 10px;
    margin-bottom: 10px;
    overflow: hidden;
    background: #fff;
}

.resto-faq-question {
    width: 100%;
    text-align: left;
    background: #fff;
    border: 0;
    padding: 16px 20px;
    font-size: 17px;
    font-weight: 700;
    color: #222;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.resto-faq-question:hover {
    background: #fafafa;
}

.resto-faq-question .resto-faq-icon {
    flex: 0 0 auto;
    color: var(--resto-accent, #e40f18);
    font-size: 22px;
    line-height: 1;
    transition: transform 0.25s ease;
}

.resto-faq-question[aria-expanded="true"] .resto-faq-icon {
    transform: rotate(45deg);
}

.resto-faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    padding: 0 20px;
    color: #555;
    line-height: 1.6;
}

.resto-faq-answer.open {
    max-height: 600px;
    padding: 0 20px 18px;
}

/* ============================================================
   Mobile / tablet gutter
   Below 992px styleAma.css forces every .container to 100% width,
   so the container padding becomes the page gutter. Bootstrap only
   gives 12px there, while the boxed blocks (CTA bar, hours card,
   description) were inset 36-44px — the text looked flush against
   the screen edge next to them. One gutter for every block here,
   and the inner paddings are trimmed so each card's EDGE lands on
   that same gutter.
   ============================================================ */
@media screen and (max-width: 991px) {
    .resto-hero,
    .cont-pagehoraire,
    .cont-pagehoraire-sec2,
    .resto-map-wrap,
    .resto-text-wrap,
    .resto-seo-section {
        padding-left: 16px;
        padding-right: 16px;
    }

    /* the .row inside .cont-pagehoraire-sec2 pulls back 12px and its
       columns push 12px, so its content already lands on the gutter */

    /* card edges stay on the gutter; only their inner padding shrinks */
    .resto-cta-bar {
        padding: 18px 18px;
    }

    .resto-hours-card {
        padding: 6px 16px;
    }

    .row-flx-horaire .texthoraire {
        padding: 20px 18px;
    }

    .resto-service-card {
        padding: 16px 18px;
    }

    .resto-faq-question {
        padding: 14px 18px;
    }

    .resto-faq-answer,
    .resto-faq-answer.open {
        padding-left: 18px;
        padding-right: 18px;
    }
}