/* [agenda_calendar] — maandkalender met aanbodkaart.
   Maten volgen .theory-course__container / .theory-course__columns uit
   theory2027.css (1200px, 1fr 1fr, gap 30px), zodat het blok uitlijnt met de
   rest van de cursuspagina. */

.t27cal {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    box-sizing: border-box;
    font-family: 'Open Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    color: #1a1d21;
    line-height: 1.55;
}

.t27cal *,
.t27cal *::before,
.t27cal *::after {
    box-sizing: border-box;
}

/* Het hidden-attribuut moet winnen van de display-regels verderop; zonder
   dit blijft een display:flex-element gewoon staan. */
.t27cal [hidden] {
    display: none !important;
}

.t27cal__cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    align-items: start;
}

/* ---------- Kalender ---------- */

.t27cal__panel {
    padding: 28px;
    border: 1px solid #e8e6e1;
    border-radius: 16px;
    background: #fff;
}

.t27cal .t27cal__heading {
    margin: 0 0 14px;
    font-family: 'Zilla Slab', Georgia, serif;
    font-size: 26px;
    font-weight: 700;
    color: #1a1d21;
    letter-spacing: 0;
    text-transform: none;
}

/* Stadskeuze op een all-cities site, op de plek waar anders de legenda
   stond. Zelfde tegels als de stadskeuze in [plan_examcourse], zodat de
   bezoeker ze herkent van de rest van de site. */
.t27cal__cities {
    margin-bottom: 16px;
    padding: 15px;
    border: 2px solid #36a9e1;
    border-radius: 10px;
    background: #f4fafe;
}

/* Grid i.p.v. flex: het aantal kolommen ligt dan vast en hangt niet af van
   de tekstlengte van de stadsnamen. */
.t27cal__cities-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.t27cal .t27cal__city {
    padding: 10px 12px;
    border: 1px solid #cfe7f5;
    border-radius: 6px;
    background: #fff;
    color: #36a9e1;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.t27cal .t27cal__city:hover {
    border-color: #36a9e1;
    background: #36a9e1;
    color: #fff;
}

/* Gekozen stad: smalle balk met een weg terug naar de keuze. */
.t27cal__city-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    padding: 10px 14px;
    border: 1px solid #d7ecf8;
    border-radius: 9px;
    background: #f4fafe;
    font-size: 14px;
}

.t27cal__city-bar b {
    color: #167cb0;
}

.t27cal .t27cal__city-change {
    margin-left: auto;
    padding: 0;
    border: 0;
    background: none;
    color: #36a9e1;
    font-family: inherit;
    font-size: 13px;
    text-decoration: underline;
    cursor: pointer;
}

/* Zolang er geen stad gekozen is staat de kalender er wel, maar is hij
   zichtbaar nog niet aan de beurt. */
.t27cal__calwrap--wait {
    opacity: 0.45;
    pointer-events: none;
    filter: grayscale(1);
}

.t27cal__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    padding: 10px 14px;
    margin-bottom: 12px;
    border-radius: 10px;
    background: #f7f9fb;
    font-size: 14px;
    color: #5a6b7b;
}

/* De legenda verklaart de gekleurde streepjes in de dagcellen; die zie je
   pas als de kalender er staat. Bovenin kostte hij de ruimte die de
   stadskeuze nu krijgt. */
.t27cal__legend--bottom {
    justify-content: center;
    margin: 14px 0 0;
    font-size: 13px;
}

.t27cal__legend span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.t27cal__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

.t27cal__dot--open { background: #36b37e; }
.t27cal__dot--few  { background: #f5a623; }
.t27cal__dot--last { background: #e5484d; }

.t27cal__month {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.t27cal__month-label {
    font-family: 'Zilla Slab', Georgia, serif;
    font-size: 20px;
    font-weight: 700;
}

.t27cal__nav {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #5a6b7b;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.t27cal__nav:hover:not(:disabled) {
    background: #eef6fc;
    color: #36a9e1;
}

.t27cal__nav:disabled {
    opacity: 0.3;
    cursor: default;
}

.t27cal__weekdays,
.t27cal__days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 7px;
}

.t27cal__weekdays {
    margin-bottom: 5px;
}

.t27cal__weekdays span {
    padding: 3px 0;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: #8a99a8;
}

/* Dagcel. aspect-ratio houdt de vakjes vierkant op elke kolombreedte. */
.t27cal__day {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    aspect-ratio: 1 / 1;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 10px;
    background: #f5f7f9;
    color: #b3bdc6;
    font-size: 17px;
    font-family: inherit;
    cursor: default;
}

.t27cal__day--has {
    background: #fff;
    border-color: #e4e9ee;
    color: #1a1d21;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.t27cal__day--has:hover {
    border-color: #36a9e1;
    box-shadow: 0 2px 8px rgba(54, 169, 225, 0.18);
}

.t27cal__day--today {
    border-color: #9ed3f0;
}

.t27cal__day--selected {
    border-color: #36a9e1;
    background: #e8f5fd;
    color: #167cb0;
}

.t27cal__bar {
    width: 24px;
    height: 4px;
    border-radius: 2px;
}

.t27cal__bar--open { background: #36b37e; }
.t27cal__bar--few  { background: #f5a623; }
.t27cal__bar--last { background: #e5484d; }
.t27cal__bar--full { background: #c9d1d8; }

/* ---------- Aanbodkaart ---------- */

.t27cal__offer {
    padding: 28px;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 3px 18px rgba(0, 0, 0, 0.08);
}

.t27cal .t27cal__offer-title {
    margin: 0 0 6px;
    font-family: 'Zilla Slab', Georgia, serif;
    font-size: 25px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
}

.t27cal__was {
    margin: 0;
    font-size: 13px;
    color: #8a99a8;
}

.t27cal__was s {
    color: #8a99a8;
}

.t27cal__amount {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
    margin: 2px 0 6px;
    font-family: 'Zilla Slab', Georgia, serif;
    font-weight: 700;
    line-height: 1;
}

.t27cal__cur   { font-size: 27px; }
.t27cal__big   { font-size: 46px; }
.t27cal__cents { font-size: 21px; }

/* Datum + knop, direct onder de prijs. Stonden eerst onder de volledige
   uitleg, waardoor de knop op een laptop buiten beeld viel terwijl de
   bezoeker links de datum al gekozen had. */
.t27cal__decide {
    margin: 14px 0 20px;
}

/* De knop valt hier als eerste op na de prijs; een lichte schaduw hoort
   daarbij. Uitgeschakeld krijgt hij die niet. */
.t27cal__decide .t27cal__go {
    box-shadow: 0 4px 14px rgba(72, 187, 120, 0.32);
}

.t27cal__decide .t27cal__go--off {
    box-shadow: none;
}

/* Drie bewijsregels boven de streep, elk met een groen vinkje. */
.t27cal .t27cal__social {
    list-style: none;
    margin: 4px 0 18px;
    padding: 0;
}

.t27cal .t27cal__social li {
    position: relative;
    padding-left: 23px;
    margin-bottom: 4px;
    list-style: none;
    font-size: 14px;
    font-weight: 600;
    color: #1d7a52;
}

/* Naast elkaar in plaats van onder elkaar: onder de knop telt elke regel
   hoogte. Kleiner gezet en met een krappere tussenruimte dan de rest van de
   kaart, want de drie bewijzen moeten samen binnen één kaartbreedte blijven. */
.t27cal .t27cal__social--row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin: 0 0 20px;
}

.t27cal .t27cal__social--row li {
    margin-bottom: 0;
    font-size: 12.5px;
}

.t27cal .t27cal__social li::marker {
    content: '';
}

.t27cal .t27cal__social li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 3px;
    width: 15px;
    height: 15px;
    background: no-repeat center/contain
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2336b37e'%3E%3Cpath d='M10 0a10 10 0 100 20 10 10 0 000-20zm5 7.6l-6.1 6.1a1 1 0 01-1.4 0L4.9 11a1 1 0 011.4-1.4l1.9 1.9 5.4-5.4A1 1 0 0115 7.6z'/%3E%3C/svg%3E");
}

/* Het merkvinkje in plaats van het groene bolletje. Het is een open vorm in
   twee kleuren en wordt kleiner dan 16px een vlekje — vandaar iets ruimer
   dan het bolletje dat het vervangt. Staat in de plugin en niet op het CDN
   van één site: alle 32 sites moeten hun eigen kopie laden. */
/* Donkergrijs in plaats van groen: naast het rood-blauwe merkvinkje werd
   groene tekst een derde kleur op één regel. */
.t27cal .t27cal__social--row li {
    padding-left: 23px;
    color: #3d4852;
}

.t27cal .t27cal__social--row li::before {
    top: 2px;
    width: 17px;
    height: 17px;
    background-image: url("../img/vinkje.png");
}

.t27cal__rule {
    border: 0;
    border-top: 1px solid #ececec;
    margin: 0 0 16px;
}

/* Garantie: groen vlak, zodat de belofte eruit springt. De toelichting op
   de warm-up eronder blijft bewust wit — twee gekleurde vlakken onder
   elkaar maakten de kaart onrustig. */
.t27cal__guarantee {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    padding: 14px 15px;
    margin-bottom: 12px;
    border: 1px solid #c4ecda;
    border-radius: 10px;
    background: #e9f8f1;
}

.t27cal__shield {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #fff;
    flex-shrink: 0;
}

/* In het groene kader leest getinte tekst prettiger dan neutraal grijs. */
.t27cal__guarantee .t27cal__g-intro,
.t27cal__guarantee .t27cal__g-list li {
    color: #3f6b56;
}

.t27cal .t27cal__g-title {
    margin: 0 0 3px;
    font-family: 'Zilla Slab', Georgia, serif;
    font-size: 16px;
    font-weight: 700;
    color: #1d7a52;
}

.t27cal__g-intro {
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
    color: #5a6b7b;
}

/* list-style ook op de li zelf: sommige thema's zetten een eigen bolletje
   op het item in plaats van op de lijst, en dat wint van list-style op ul. */
.t27cal .t27cal__g-list {
    list-style: none;
    margin: 7px 0 0;
    padding: 0;
}

.t27cal .t27cal__g-list li {
    position: relative;
    padding-left: 19px;
    margin-bottom: 3px;
    list-style: none;
    font-size: 13px;
    line-height: 1.45;
    color: #5a6b7b;
}

.t27cal .t27cal__g-list li::marker {
    content: '';
}

.t27cal__g-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 4px;
    width: 12px;
    height: 12px;
    background: no-repeat center/contain
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%231d7a52'%3E%3Cpath d='M10 0a10 10 0 100 20 10 10 0 000-20zm5 7.6l-6.1 6.1a1 1 0 01-1.4 0L4.9 11a1 1 0 011.4-1.4l1.9 1.9 5.4-5.4A1 1 0 0115 7.6z'/%3E%3C/svg%3E");
}

.t27cal__g-list b {
    font-weight: 700;
    color: #1d7a52;
}

.t27cal__g-claim {
    margin: 7px 0 0;
    font-family: 'Zilla Slab', Georgia, serif;
    font-size: 14px;
    font-weight: 700;
    color: #1d7a52;
}

/* Inbegrepen */
.t27cal__inc-h {
    margin: 0 0 12px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8a99a8;
}

.t27cal .t27cal__inc {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
}

.t27cal .t27cal__inc li {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 9px;
    list-style: none;
    font-size: 15px;
}

.t27cal .t27cal__inc li::marker {
    content: '';
}

.t27cal__ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 27px;
    height: 27px;
    border-radius: 7px;
    background: #fdeccd;
    flex-shrink: 0;
}

/* Toelichting op de warm-up: zelfde kaderformaat als de garantie. */
.t27cal__warmup .t27cal__shield {
    background: #f3f6f8;
}

.t27cal__warmup {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    padding: 14px 15px;
    margin: 0 0 16px;
    border: 1px solid #e4e9ee;
    border-radius: 10px;
    background: #fff;
}

.t27cal .t27cal__warmup-title {
    margin: 0 0 3px;
    font-family: 'Zilla Slab', Georgia, serif;
    font-size: 16px;
    font-weight: 700;
    color: #167cb0;
}

.t27cal__warmup-body {
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
    color: #5a6b7b;
}

/* De twee pakketonderdelen lopen over de volle breedte — hun namen passen
   niet in een halve kolom — maar krijgen verder dezelfde opmaak als de
   materialen eronder, zodat alle icoontjes op één verticale lijn staan.
   Vet zet ze voldoende apart; een kader brak de uitlijning. */
.t27cal .t27cal__inc--main {
    margin-bottom: 14px;
}

.t27cal .t27cal__inc--main li {
    margin-bottom: 14px;
    font-weight: 700;
}

.t27cal .t27cal__inc--main li:last-child {
    margin-bottom: 0;
}

/* Lesmaterialen in twee kolommen. */
.t27cal__inc--split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 18px;
    margin-bottom: 20px;
}

.t27cal__inc--split li {
    margin-bottom: 0;
    font-size: 14px;
}

/* Eén icoonmaat en -afstand voor beide lijsten: een verschil van twee pixels
   valt op zodra ze onder elkaar staan. */
.t27cal .t27cal__inc--main li,
.t27cal .t27cal__inc--split li {
    gap: 9px;
}

.t27cal .t27cal__inc--main .t27cal__ic,
.t27cal .t27cal__inc--split .t27cal__ic {
    width: 25px;
    height: 25px;
}

/* Gekozen datum + knop */
.t27cal__chosen {
    padding: 11px 14px;
    margin-bottom: 12px;
    border: 1px solid #d7ecf8;
    border-radius: 9px;
    background: #f4fafe;
    font-size: 14px;
}

.t27cal__chosen--empty {
    border-color: #ececec;
    background: #f7f8fa;
    color: #8a99a8;
}

.t27cal__chosen b {
    color: #167cb0;
}

.t27cal__go {
    display: block;
    width: 100%;
    padding: 15px;
    border: 0;
    border-radius: 9px;
    background: #48bb78;
    color: #fff !important;
    font-family: 'Zilla Slab', Georgia, serif;
    font-size: 18px;
    font-weight: 700;
    text-align: center;
    text-decoration: none !important;
    cursor: pointer;
    transition: filter 0.2s ease;
}

.t27cal__go:hover:not(.t27cal__go--off) {
    filter: brightness(0.93);
}

.t27cal__go--off {
    background: #e2e6ea;
    color: #9aa5af !important;
    cursor: not-allowed;
    pointer-events: none;
}

/* De Verder-knop onder de kalender hoort bij de smalle weergave: op een breed
   scherm staat de aanbodkaart ernaast en is de knop daar al in beeld. */
.t27cal__go--mobile {
    display: none;
}

.t27cal__empty {
    padding: 40px 20px;
    text-align: center;
    color: #8a99a8;
}

/* ---------- Smalle schermen ---------- */

@media (max-width: 900px) {
    .t27cal__cols {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    /* Onder de dagen, boven de legenda: de volgende stap staat meteen in
       beeld in plaats van pas na het scrollen naar de kaart. */
    .t27cal__go--mobile {
        display: block;
        margin-top: 16px;
    }

}

@media (max-width: 560px) {
    .t27cal {
        padding: 12px;
    }
    .t27cal__panel,
    .t27cal__offer {
        padding: 18px;
    }
    .t27cal__day {
        font-size: 15px;
    }
    .t27cal__weekdays,
    .t27cal__days {
        gap: 5px;
    }
    /* Eén kolom: op deze breedte breken namen als
       "CBR Guide: How to Pass Your Exam" anders over meerdere regels. */
    .t27cal__inc--split {
        grid-template-columns: 1fr;
    }
    /* Twee steden per rij i.p.v. drie — anders breken namen als
       "Den Haag" en "Amsterdam" over twee regels. */
    .t27cal__cities-list {
        grid-template-columns: repeat(2, 1fr);
    }
    .t27cal__big {
        font-size: 40px;
    }
}