/* ==========================================================================
   Roskilde Taekwondo Klub — tilpasset CSS
   Uploades i CMS'et som /mentoclub-tilpasset.css

   VIGTIGT OM AFGRÆNSNING
   ----------------------
   Alle regler er afgrænset til ".page-content .site-page".

   .site-page er den beholder, CMS'et lægger omkring indhold, der er skrevet i
   editoren. Den findes på de 33 almindelige indholdssider — og den findes
   IKKE på:
     - /calendar        (bygges af JavaScript)
     - forsiden         (slider + arrangementsliste)
     - /praktisk/contact (kontaktmodul, genereres fra data)
     - CMS'ets admin- og loginsider

   En tidligere version af denne fil brugte ".page-content" som afgrænsning.
   Den beholder findes også på kalenderen og på admin-siderne, og derfor slog
   reglerne igennem på sider, de ikke var tænkt til. Brug ikke .page-content
   alene som afgrænsning — brug altid ".page-content .site-page".

   Tabeller afgrænses yderligere med :not([class]), så kun vores egne tabeller
   uden klasser rammes. De gamle pensumtabeller har Bootstrap-klasser
   (table table-bordered table-striped) og skal blive ved med at bruge dem.

   Rækkefølgen af stylesheets på siden:
     1. bootstrap 5.1.3
     2. /css/mentoclub.css      (temaets grundstil, body = 13px, html = 14px)
     3. /style.css
     4. denne fil               <- indlæses sidst og vinder derfor
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Eksisterende regler — MÅ IKKE FJERNES
   Disse fem regler lå i den nuværende mentoclub-tilpasset-21.css og styrer
   sidens yderste afstande. Fjernes de, ændrer layoutet sig på hele websitet.
   -------------------------------------------------------------------------- */

body { font-size: 1em; }
p { font-size: 1em; }
.site-page { padding: 0 20px; }
.container-fluid {
    padding-right: var(--bs-gutter-x, 1.75rem) !important;
    padding-left: var(--bs-gutter-x, 1.75rem) !important;
}


/* --------------------------------------------------------------------------
   2. Læsbar brødtekst

   Temaet sætter body til 13px og afstanden under afsnit til 0,71rem. Det er
   stramt til en side, man skal læse igennem.
   -------------------------------------------------------------------------- */

.page-content .site-page {
    font-size: 16px;
    line-height: 1.7;
    color: #444;
}

/* Formularer, knapper og ikoner skal ikke vokse med brødteksten. */
.page-content .site-page .btn,
.page-content .site-page input,
.page-content .site-page select,
.page-content .site-page textarea,
.page-content .site-page label,
.page-content .site-page i,
.page-content .site-page .fa,
.page-content .site-page .fas,
.page-content .site-page .far { font-size: 1rem; line-height: 1.5; }

.page-content .site-page > .row > .col-12 > p { margin-bottom: 1rem; }

/* Tekst må ikke løbe i meget lange linjer på en bred skærm. Kun direkte
   indhold rammes, så indlejrede moduler beholder deres egen bredde. */
.page-content .site-page > .row > .col-12 > p,
.page-content .site-page > .row > .col-12 > ul,
.page-content .site-page > .row > .col-12 > ol,
.page-content .site-page > .row > .col-12 > dl,
.page-content .site-page > .row > .col-12 > h2,
.page-content .site-page > .row > .col-12 > blockquote { max-width: 68ch; }


/* --------------------------------------------------------------------------
   3. Overskrifter
   -------------------------------------------------------------------------- */

.page-content .site-page h1 {
    font-size: 2rem;
    font-weight: 600;
    margin: 0 0 1.5rem;
    text-align: center;   /* følger de øvrige sider, som bruger .headline-center */
}

.page-content .site-page h2 {
    font-size: 1.45rem;
    font-weight: 600;
    margin: 2.5rem 0 .75rem;
    padding-bottom: .35rem;
    border-bottom: 1px solid #e6e6e6;
}

.page-content .site-page h3 {
    font-size: 1.15rem;
    font-weight: 600;
    margin: 1.75rem 0 .5rem;
}

.page-content .site-page h1 + h2,
.page-content .site-page h2:first-child,
.page-content .site-page h3:first-child { margin-top: 0; }


/* --------------------------------------------------------------------------
   4. TABELLER — den vigtigste rettelse

   Bootstrap 5 nulstiller alle tabeller, men giver kun rammer og cellepolstring
   til <table class="table">. Vores sider bruger rene <table> uden klasser,
   fordi CMS-editoren fjerner klasser. Uden reglerne herunder står tabellerne
   helt uden streger og luft.

   :not([class]) sikrer, at kun VORES tabeller rammes. Tabeller med klasser
   (de gamle pensumtabeller, og alt hvad CMS-moduler laver) røres ikke.
   -------------------------------------------------------------------------- */

.page-content .site-page table:not([class]) {
    width: 100%;
    margin: 1.25rem 0 1.75rem;
    border-collapse: collapse;
    font-size: .95em;
}

.page-content .site-page table:not([class]) th,
.page-content .site-page table:not([class]) td {
    border: 1px solid #dcdcdc;
    padding: .55rem .7rem;
    text-align: left;
    vertical-align: top;
}

.page-content .site-page table:not([class]) thead th {
    background: #f2f2f2;
    font-weight: 600;
    color: #333;
    border-bottom-width: 2px;
}

.page-content .site-page table:not([class]) tbody tr:nth-child(even) {
    background: #fafafa;
}

/* Tabeller uden <thead>: første række med <th> bruges som hoved. */
.page-content .site-page table:not([class]) > tbody > tr:first-child > th {
    background: #f2f2f2;
}


/* --------------------------------------------------------------------------
   5. Lister
   -------------------------------------------------------------------------- */

.page-content .site-page > .row > .col-12 ul,
.page-content .site-page > .row > .col-12 ol { margin: 0 0 1rem; padding-left: 1.5rem; }
.page-content .site-page > .row > .col-12 li { margin-bottom: .35rem; }
.page-content .site-page > .row > .col-12 li > ul,
.page-content .site-page > .row > .col-12 li > ol { margin-top: .35rem; margin-bottom: .35rem; }


/* --------------------------------------------------------------------------
   6. Definitionslister
   -------------------------------------------------------------------------- */

.page-content .site-page dl { margin: 0 0 1.25rem; }
.page-content .site-page dt {
    font-weight: 600;
    color: #333;
    margin-top: .9rem;
}
.page-content .site-page dt:first-child { margin-top: 0; }
.page-content .site-page dd {
    margin: .15rem 0 0;
    padding-left: 1.1rem;
    border-left: 2px solid #e6e6e6;
}


/* --------------------------------------------------------------------------
   7. Links, fremhævninger og øvrigt
   -------------------------------------------------------------------------- */

/* Temaets grønne accent (#72c02c) bevares, men understregning gør det tydeligt,
   hvad der er et link i en tekst. Temaet slår understregning fra med
   !important, så det er nødvendigt her. Kun links i tekst rammes — ikke links
   i lister, som CMS-moduler bruger til ikonrækker. */
.page-content .site-page p > a,
.page-content .site-page dd > a,
.page-content .site-page table:not([class]) a,
.page-content .site-page > .row > .col-12 > ul > li > a,
.page-content .site-page > .row > .col-12 > ol > li > a { text-decoration: underline !important; }

.page-content .site-page strong { font-weight: 600; color: #333; }

.page-content .site-page blockquote {
    margin: 1.25rem 0;
    padding: .25rem 0 .25rem 1rem;
    border-left: 3px solid #72c02c;
    color: #666;
}

.page-content .site-page hr { margin: 2rem 0; border: 0; border-top: 1px solid #e6e6e6; }

.page-content .site-page img { max-width: 100%; height: auto; }

/* Videoindlejringer. Editoren indsætter dem med faste mål (fx 560x315), så
   uden dette løber de ud over kanten på en telefon. Sideforholdet sættes kun
   på YouTube og Vimeo, hvor 16:9 er rigtigt. */
.page-content .site-page iframe { max-width: 100%; border: 0; }
.page-content .site-page iframe[src*="youtube"],
.page-content .site-page iframe[src*="youtu.be"],
.page-content .site-page iframe[src*="vimeo"] {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    margin: 1.25rem 0;
}


/* --------------------------------------------------------------------------
   7b. Forsidens kontekstboks

   Forsiden er en genereret side uden .site-page, så afsnit 2-7 rammer den
   ikke. Boksens tekstfelt har til gengæld sin egen klasse, .mento-textfield,
   og den optræder præcis ét sted på hele websitet — midt på forsiden. Derfor
   kan den styles direkte uden risiko for at ramme andet.

   Overskriften over boksen ligger i div.headline > h2 og er et selvstændigt
   CMS-felt. Den er ikke rørt her, da .headline også bruges på kontaktsiden.
   -------------------------------------------------------------------------- */

/* Overskrift og tekstfelt er søskende i CMS'et. De sættes op som ét kort med
   en grøn streg i toppen. :has() bruges, så kun den overskrift, der står
   umiddelbart før kontekstboksen, rammes — .headline bruges også andre steder.

   Temaets egen .headline h2 er kun 18px med vægt 400. Det er den, der får
   forsiden til at virke flad ved siden af indholdssiderne. */
.headline:has(+ .mento-textfield) {
    background: #fff;
    border: 1px solid #e3e3e3;
    border-top: 4px solid #72c02c;
    border-bottom: 0;
    margin-bottom: 0;
    padding: 1.5rem 1.6rem .3rem;
}

.headline:has(+ .mento-textfield) h2 {
    display: block;
    top: 0;
    margin: 0;
    padding: 0;
    border-bottom: 0;
    font-size: 1.85rem;
    font-weight: 700;
    line-height: 1.25;
    color: #2b2b2b;
}

.mento-textfield {
    font-size: 16px;
    line-height: 1.7;
    color: #444;
    background: #fff;
    border: 1px solid #e3e3e3;
    border-top: 0;
    padding: .9rem 1.6rem 1.6rem;
}

.mento-textfield p { margin-bottom: 1rem; font-size: inherit; }
.mento-textfield p:last-child { margin-bottom: 0; }
.mento-textfield strong { font-weight: 600; color: #333; }

.mento-textfield a { text-decoration: underline !important; }

/* Første afsnit er indledningen og må gerne have lidt mere vægt. */
.mento-textfield p:first-of-type { font-size: 1.12em; color: #333; }

/* Sidste afsnit er henvisningerne til medlemmer. Det skilles fra med en
   tynd streg, så det ikke konkurrerer med budskabet til nye. */
.mento-textfield p:last-of-type:not(:first-of-type) {
    margin-top: 1.3rem;
    padding-top: .9rem;
    border-top: 1px solid #ececec;
    font-size: .93em;
    color: #666;
}

/* Et afsnit, der kun indeholder ét link, bliver en knap. Linket genkendes på
   sin href, så der skal ikke sættes klasser i editoren — det kan den ikke.
   :only-child sikrer, at almindelige links i en sætning ikke rammes. */
.mento-textfield p > a[href="/ny-til-taekwondo/start-her"]:only-child {
    display: inline-block;
    background: #72c02c;
    color: #fff !important;
    font-weight: 700;
    font-size: 1.02em;
    padding: .75rem 1.6rem;
    text-decoration: none !important;
    /* Temaet tvinger border-radius til 0, så en fast underkant læses som en
       knap i stedet for et blødt skygge-fald. */
    box-shadow: 0 3px 0 #57901f;
    transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.mento-textfield p > a[href="/ny-til-taekwondo/start-her"]:only-child:hover,
.mento-textfield p > a[href="/ny-til-taekwondo/start-her"]:only-child:focus {
    background: #66ab27;
    color: #fff !important;
    transform: translateY(1px);
    box-shadow: 0 2px 0 #57901f;
}

/* Afsnittet med knappen skal have lidt luft omkring sig. */
.mento-textfield p:has(> a[href="/ny-til-taekwondo/start-her"]:only-child) {
    margin: 1.3rem 0;
}

@media (prefers-reduced-motion: reduce) {
    .mento-textfield p > a[href="/ny-til-taekwondo/start-her"]:only-child {
        transition: none;
    }
}

@media (max-width: 767px) {
    .headline:has(+ .mento-textfield) { padding: 1.2rem 1.2rem .3rem; }
    .headline:has(+ .mento-textfield) h2 { font-size: 1.5rem; }
    .mento-textfield { font-size: 15px; padding: .8rem 1.2rem 1.2rem; }
    .mento-textfield p:first-of-type { font-size: 1.08em; }
    /* Knappen i fuld bredde er nemmere at ramme med en tommel. */
    .mento-textfield p > a[href="/ny-til-taekwondo/start-her"]:only-child {
        display: block;
        text-align: center;
    }
}


/* --------------------------------------------------------------------------
   8. Mobil
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
    .page-content .site-page { font-size: 15px; }
    .page-content .site-page h1 { font-size: 1.6rem; }
    .page-content .site-page h2 { font-size: 1.3rem; margin-top: 2rem; }
    .page-content .site-page h3 { font-size: 1.08rem; }

    .page-content .site-page table:not([class]) { font-size: .875em; }
    .page-content .site-page table:not([class]) th,
    .page-content .site-page table:not([class]) td { padding: .4rem .45rem; }

    .page-content .site-page > .row > .col-12 > p,
    .page-content .site-page > .row > .col-12 > ul,
    .page-content .site-page > .row > .col-12 > ol,
    .page-content .site-page > .row > .col-12 > dl,
    .page-content .site-page > .row > .col-12 > h2,
    .page-content .site-page > .row > .col-12 > blockquote { max-width: none; }
}


/* --------------------------------------------------------------------------
   9. Print

   Pensum og terminologi bliver printet af medlemmer, der vil øve hjemme.
   -------------------------------------------------------------------------- */

@media print {
    .page-content .site-page { font-size: 11pt; line-height: 1.45; color: #000; }
    .page-content .site-page h1 { font-size: 18pt; }
    .page-content .site-page h2 { font-size: 14pt; margin-top: 1.2rem; }
    .page-content .site-page h2,
    .page-content .site-page h3 { page-break-after: avoid; }
    .page-content .site-page table:not([class]) { font-size: 9.5pt; }
    .page-content .site-page tr { page-break-inside: avoid; }
    .page-content .site-page thead { display: table-header-group; }
    .page-content .site-page table:not([class]) tbody tr:nth-child(even) { background: none; }
    .page-content .site-page table:not([class]) th { background: #eee !important; }
    .page-content .site-page > .row > .col-12 > p,
    .page-content .site-page > .row > .col-12 > ul,
    .page-content .site-page > .row > .col-12 > ol,
    .page-content .site-page > .row > .col-12 > dl,
    .page-content .site-page > .row > .col-12 > h2 { max-width: none; }
}