/*
 * author Alex
 * 30.04.2026
 *
 * SEO blocks styles for route segment pages: H1, badges,
 * breadcrumbs, FAQ accordeon, SEO text, debug box.
 */

/* Hide SEO blocks on checkout step --------------------------------- */
/* When user clicked "buy" the order form replaces the trip list.
   SEO landing copy (H1 + lowprice + breadcrumb + FAQ + text) becomes
   noise on that screen. JS adds .seo-checkout-active on body — see
   route/base/index.html click handler. */
body.seo-checkout-active .seo-breadcrumb,
body.seo-checkout-active .route-h1,
body.seo-checkout-active .route-h1-lowprice,
body.seo-checkout-active .seo-faq,
body.seo-checkout-active .seo-text,
body.seo-checkout-active .seo-debug {
    display: none !important;
}

/* H1 with low price caption ----------------------------------------- */
/* price kept inline inside <h1> so search bots see the value as part
   of the heading text — improves seo for "from N grn" queries */
.route-h1 {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 28px;
    font-weight: 700;
    color: #2c2c2c;
    margin: 16px 0 12px;
    line-height: 1.2;
}
.route-h1-lowprice {
    font-size: 16px;
    font-weight: 400;
    color: #555;
    margin-left: 6px;
    white-space: nowrap;
}
.route-h1-lowprice b { color: #94C11F; font-weight: 700; }
/* hide the lowprice span when it's empty (no min price for segment) */
.route-h1-lowprice:empty { display: none; }

/* Cheapest / fastest badges ----------------------------------------- */
/* TEMP: badges hidden by request 30.04.2026 — uncomment .seo-badges-row
   block below to restore. Schema/Main.php logic stays in place so we can
   re-enable instantly without code changes. */
.seo-badges-row { display: none !important; }
/*
.seo-badges-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 6px;
}
*/
.seo-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    line-height: 1;
}
.seo-badge--cheapest { background: #94C11F; }
.seo-badge--fastest  { background: #632BB7; }
.seo-badge svg { display: block; }

/* Breadcrumb (3 levels) --------------------------------------------- */
.seo-breadcrumb a { color: #1877F2; text-decoration: none; }
.seo-breadcrumb a:hover { text-decoration: underline; }

/* FAQ accordion ----------------------------------------------------- */
.seo-faq {
    margin: 32px 0 24px;
    padding: 24px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.seo-faq__title {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 16px;
    color: #2c2c2c;
}
.seo-faq__list { display: flex; flex-direction: column; gap: 8px; }
.seo-faq__item {
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    background: #fafafa;
    overflow: hidden;
    transition: background 0.15s;
}
.seo-faq__item[open] { background: #f4f8eb; border-color: #cfe48a; }
.seo-faq__q {
    cursor: pointer;
    padding: 12px 18px;
    font-size: 16px;
    font-weight: 600;
    color: #2c2c2c;
    list-style: none;
    position: relative;
}
.seo-faq__q::-webkit-details-marker { display: none; }
.seo-faq__q::after {
    content: '+';
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 22px;
    color: #94C11F;
    font-weight: 400;
}
.seo-faq__item[open] .seo-faq__q::after { content: '−'; }
.seo-faq__a {
    padding: 0 18px 14px;
    font-size: 15px;
    line-height: 1.5;
    color: #555;
}

/* SEO text ---------------------------------------------------------- */
.seo-text {
    margin: 24px 0;
    padding: 24px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.seo-text__title {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 12px;
    color: #2c2c2c;
}
.seo-text__body p {
    font-size: 15px;
    line-height: 1.6;
    color: #444;
    margin-bottom: 12px;
}
.seo-text__body p:last-child { margin-bottom: 0; }

/* Debug block (only with ?seoDebug=1) ------------------------------- */
.seo-debug {
    margin: 16px 0;
    padding: 12px;
    border: 2px dashed #e74c3c;
    background: #fff5f4;
    border-radius: 6px;
    font-family: monospace;
    font-size: 12px;
}
.seo-debug summary {
    cursor: pointer;
    font-weight: 700;
    color: #e74c3c;
    margin-bottom: 8px;
}
.seo-debug__json {
    white-space: pre-wrap;
    word-break: break-all;
    margin: 0;
    padding: 8px;
    background: #fff;
    border-radius: 4px;
    max-height: 400px;
    overflow: auto;
}

/* Mobile ------------------------------------------------------------ */
@media (max-width: 768px) {
    .route-h1 { font-size: 22px; }
    .seo-faq, .seo-text { padding: 16px; }
    .seo-faq__title { font-size: 20px; }
    .seo-text__title { font-size: 18px; }
}