/*
 * weather_common.css
 * Version 1.00 2026-10-13
 *
 * Gemensam CSS för alla Sverigevädret-/Tjörnvädret-sidor:
 *   index.php, omoss.php, trafiksok.php, trafiktemp.php, davis_weather.php
 *
 * Innehåller: bakgrund, yttre ram, sidtitel, menyplacering och den mörkblå rubrikrutan.
 * Laddas EFTER bootstrap.min.css och wd48_new2.css men FÖRE sidans egen CSS-fil,
 * så att sidans egen fil kan göra undantag vid behov.
 *
 * Rubrikrutan har en gemensam klass (.page-title-box). De gamla klassnamnen
 * (.traffic-title-box, .omoss-title-box, .index-title-box, .davis-title-box)
 * fungerar fortfarande, så HTML-koden behöver inte ändras.
 */

/* ------------------------------------------------------------------
   Grund
   ------------------------------------------------------------------ */
body {
    background: #c3e1ff !important;
    font-size: 14px; /* Standardstorlek */
}

/* ------------------------------------------------------------------
   Yttre ram
   ------------------------------------------------------------------ */
body > .container {
    max-width: 1180px;
}

/* Sidor som inte får ramen från wd48_new2.css (Start och Om oss) */
body.index-page > .container,
body.omoss-page > .container {
    box-sizing: border-box;
    width: min(1180px, calc(100% - 3rem));
    max-width: 1180px;
    margin: 1.5rem auto 3rem !important;
    padding: 18px;
    background: #eaf3f8;
    border: 1px solid var(--wd-border, #d7dfdc);
    border-radius: var(--wd-radius, 14px);
    box-shadow: var(--wd-shadow, 0 8px 30px rgba(0,0,0,.07));
}

@media (max-width: 700px) {
    body.index-page > .container,
    body.omoss-page > .container {
        width: calc(100% - 1rem);
        margin: .5rem auto 1.5rem !important;
        padding: 10px;
    }
}

/* ------------------------------------------------------------------
   Meny
   ------------------------------------------------------------------ */
body > .container > .page-menu {
    width: 100%;
    min-height: 46px;
    margin: 0 0 12px;
    padding: 0;
}

/* ------------------------------------------------------------------
   Sidtitel (Sverigevädret.se / Tjörnvädret.se)
   ------------------------------------------------------------------ */
.site-title {
    width: 100%;
    margin: 0 0 8px !important;
    padding: 0 !important;
    text-align: center !important;
    font-size: 2.2rem;
    font-weight: 600 !important;
    line-height: 1.1;
}

@media (max-width: 700px) {
    .site-title {
        font-size: 1.7rem;
    }
}

/* ------------------------------------------------------------------
   Mörkblå rubrikruta
   ------------------------------------------------------------------ */
.page-title-box,
.traffic-title-box,
.omoss-title-box,
.index-title-box,
.davis-title-box {
    box-sizing: border-box;
    width: 100%;
    margin: 0 0 14px;
    padding: 12px 18px;
    background: var(--wd-blue, #163f59);
    border: 1px solid var(--wd-blue, #163f59);
    border-radius: 10px;
    color: #fff;
}

.page-title-box h1,
.traffic-title-box h1,
.omoss-title-box h1,
.index-title-box h1,
.davis-title-box h1 {
    margin: 0 !important;
    padding: 0;
    color: #fff !important;
    text-align: left !important;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* samma som Bootstrap 5 */
    font-size: clamp(1.55rem, 3vw, 2.35rem);
    font-weight: 700;
    line-height: 1.2;
}

@media (max-width: 700px) {
    .page-title-box,
    .traffic-title-box,
    .omoss-title-box,
    .index-title-box,
    .davis-title-box {
        padding: 10px 14px;
    }
}