/* Artikelsidorna (snapsvisans-historia, nar-sjunger-man-snapsvisor): hero med bild,
   klickbar kalender/tidslinje, lasbar artikelkolumn med periodetikett per rubrik, rutor,
   verktygskort, las-vidare-rad och kallor. Sidorna lankar in filen via $header i <head>.
   Farger: sajtens bla (#1F71CA/#0E54A0), varma tonen fran Festbilder (#fbf5e6/#f5f3eb)
   och orange etiketter (#b26a00/#F8A81D). */

/* Hero */
.art-hero {background: linear-gradient(135deg, #fbf5e6 0%, #f5f3eb 55%, #edf3fb 100%); border: 1px solid #b0b3bb; border-radius: .5rem; overflow: hidden;}
.art-hero h1 {font-size: 2.2rem; font-weight: 600; line-height: 1.15; margin-bottom: .75rem;}
.art-hero p {line-height: 1.6; margin-bottom: .75rem;}
.art-hero .art-ingress {font-size: 1.1rem;}
.art-hero-bild {min-height: 240px;}
.art-hero-bild img {display: block; width: 100%; height: 100%; object-fit: cover;}
.art-hero-rad {font-size: .9rem; color: #6c757d; margin: 1rem 0 0 !important;}

/* Sokformular i heron (sok) */
.art-sok {margin: .75rem 0 .25rem;}
.art-sok .form-control {padding: .6rem .9rem;}
.art-sok-rad {display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .6rem; font-size: .9rem; color: #6c757d;}
.art-sok-rad label {margin: 0;}

/* Rubrik och underrad utanfor artikelkolumnen (kalendern/tidslinjen) */
.art-rubrik {font-size: 1.5rem; font-weight: 500; margin: 2.75rem 0 .25rem;}
.art-under {color: #6c757d; margin-bottom: 1rem;}

/* Kalender/tidslinje: klickbara kort med etikett, namn och en rad */
.art-kalender {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem;}
.art-kort {display: block; height: 100%; color: inherit; text-decoration: none; background: #fff; border: 1px solid #d9dde3; border-radius: .5rem; padding: .9rem 1rem 1rem; box-shadow: 0 1px 3px rgba(0, 0, 0, .06); transition: box-shadow .15s ease, transform .15s ease;}
.art-kort:hover {color: inherit; box-shadow: 0 6px 18px rgba(0, 0, 0, .14); transform: translateY(-2px);}
.art-kort-bred {grid-column: 1 / -1;}
.art-nar {display: block; font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #b26a00; margin-bottom: .2rem;}
.art-nu {display: inline-block; vertical-align: middle; background: #F8A81D; color: #fff; border-radius: 1rem; padding: .05rem .5rem .1rem; font-size: .68rem; letter-spacing: .03em; margin-left: .4rem;}
.art-kort-namn {display: block; font-size: 1.1rem; font-weight: 500; color: #0E54A0; margin-bottom: .25rem;}
.art-kort-text {display: block; font-size: .9rem; color: #495057; line-height: 1.5;}

/* Artikelkolumnen */
.art-artikel {max-width: 44rem; margin: 0 auto;}
.art-artikel h2 {font-size: 1.5rem; font-weight: 500; margin: 2.75rem 0 .75rem; scroll-margin-top: 80px;}
.art-artikel h2 .art-nar {margin-bottom: .3rem;}
.art-artikel h3 {font-size: 1.2rem; font-weight: 500; margin: 1.75rem 0 .5rem;}
.art-artikel p, .art-artikel li {line-height: 1.75;}
.art-artikel .art-ingress {font-size: 1.1rem;}
.art-artikel figure {margin: 1.5rem 0;}
.art-artikel figure img {width: 100%; height: auto; border-radius: 8px; display: block;}
.art-artikel figcaption {font-size: .875rem; color: #6c757d; padding-top: .5rem; font-style: italic;}
.art-artikel blockquote {background: linear-gradient(135deg, #fbf5e6 0%, #f5f3eb 100%); border-left: 4px solid #F8A81D; border-radius: 0 .5rem .5rem 0; padding: .9rem 1.25rem; margin: 1.5rem 0; font-size: 1.05rem; line-height: 1.7;}
.art-artikel blockquote p:last-child {margin-bottom: 0;}

/* Tabell i artikelkolumnen (cookiepolicy) */
.art-artikel .art-tabell {font-size: .95rem; margin-bottom: 1rem;}
.art-artikel .art-tabell th {font-weight: 600;}
.art-artikel .art-tabell code {color: #0E54A0; background: #f1f4f6; padding: .1rem .35rem; border-radius: .25rem; font-size: .9em;}

/* Knapprad under ett avsnitt, med "Mest lasta" */
.art-cta {display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin: 1rem 0 .5rem;}
.art-visor {font-size: .9rem; color: #6c757d; line-height: 1.6;}
.art-visor a {white-space: nowrap;}

/* Varm ruta (fraga/svar, las vidare) */
.art-ruta {background: linear-gradient(135deg, #fbf5e6 0%, #f5f3eb 100%); border: 1px solid #e3dfd0; border-radius: .5rem; padding: 1.25rem 1.5rem .5rem; margin: 2.75rem 0;}
.art-ruta h2 {margin-top: 0;}
.art-ruta-lank {display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; padding-bottom: 1.25rem; margin: 2rem 0;}
.art-ruta-lank .art-ruta-text {flex: 1 1 18rem;}
.art-ruta-lank p {margin: 0; line-height: 1.6;}
.art-ruta-lank strong {display: block; font-size: 1.15rem; font-weight: 500; margin-bottom: .25rem;}

/* Tipslista: etikett till vanster, text till hoger */
.art-tips {display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .7rem 1.5rem; margin: 1rem 0 1.5rem;}
.art-tips dt {font-weight: 600; color: #0E54A0; line-height: 1.6;}
.art-tips dd {margin: 0; line-height: 1.6;}

/* Verktygskort */
.art-verktyg {display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1.25rem; margin: 1.25rem 0;}
.art-verktyg-kort {background: #fff; border: 1px solid #d9dde3; border-radius: .5rem; padding: 1.25rem; display: flex; flex-direction: column; gap: .5rem;}
.art-verktyg-kort > i, .art-verktyg-kort > svg {font-size: 1.8rem; color: #1F71CA; line-height: 1; width: 1.9rem; height: 1.9rem;}
.art-verktyg-kort h3 {font-size: 1.15rem; font-weight: 500; margin: 0;}
.art-verktyg-kort p {margin: 0; color: #495057; line-height: 1.6;}
.art-verktyg-kort .btn {align-self: flex-start; margin-top: .5rem;}
/* Variant med knappen i full bredd langst ned i kortet (tipsa-oss) */
.art-verktyg-brett .art-verktyg-kort .btn {align-self: stretch; margin-top: auto; padding-top: .6rem; padding-bottom: .6rem;}
.art-verktyg-brett .art-verktyg-kort p {margin-bottom: .75rem;}

/* Formular i vit ruta (kontakta-oss) */
.art-formular {background: #fff; border: 1px solid #d9dde3; border-radius: .5rem; padding: 1.5rem; box-shadow: 0 1px 3px rgba(0, 0, 0, .06);}
.art-falt {margin-bottom: 1.25rem;}
.art-falt label {display: block; font-weight: 500; margin-bottom: .3rem;}
.art-falt .form-text {display: block; margin-top: .3rem; line-height: 1.5;}
.art-oblig {font-size: .8rem; font-weight: 400; font-style: italic; color: #b94947; margin-left: .5rem;}
.art-formular-fot {font-size: .85rem;}

/* Knapprad i heron (hogtidssidorna) */
.art-hero-knappar {display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem;}

/* Visor i rutnat med hela texten (hogtidssidorna, hogtidsvisor-mall.php) */
.art-visor-rutnat {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem;}
.art-visa {background: #fff; border: 1px solid #d9dde3; border-radius: .5rem; box-shadow: 0 1px 3px rgba(0, 0, 0, .06); display: flex; flex-direction: column; padding: 1rem 1.25rem 1.25rem;}
.art-visa-titel {font-size: 1.15rem; font-weight: 500; margin: 0 0 .15rem;}
.art-visa-melodi {display: block; font-size: .875rem; color: #6c757d; font-style: italic; margin-bottom: .75rem;}
.art-visa-text {line-height: 1.6; margin: 0 0 1rem;}
.art-visa .btn {align-self: stretch; margin-top: auto;}
.art-ruta-lank.art-ruta-bred {grid-column: 1 / -1; margin: 0;}
.art-faq .accordion-button {font-weight: 500;}
.art-faq .accordion-body {line-height: 1.6;}

/* Las vidare och kallor */
.art-lasvidare {display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 0;}
.art-kallor {font-size: .9rem;}
.art-kallor h3 {font-size: 1.05rem; margin-top: 1.25rem;}
.art-kallor li {margin-bottom: .5rem;}
.art-kallor p, .art-kallor li {line-height: 1.6;}

@media (max-width: 767.98px) {
    .art-kalender {grid-template-columns: repeat(2, minmax(0, 1fr));}
    .art-visor-rutnat {grid-template-columns: 1fr;}
    .art-hero h1 {font-size: 1.8rem;}
    .art-tips {grid-template-columns: 1fr; gap: .1rem 0;}
    .art-tips dd {margin-bottom: .75rem;}
}
@media (max-width: 479.98px) {
    .art-kalender {grid-template-columns: 1fr;}
}

/* Numrerad stegslista (vad-ar-en-snapsvisa): orange siffror i samma ton som etiketterna */
.art-steg {padding-left: 1.6rem; margin: 1rem 0 1.25rem;}
.art-steg li {padding-left: .35rem; margin-bottom: .4rem;}
.art-steg li::marker {color: #b26a00; font-weight: 600;}

/* Exempelvisor som kort i artikelkolumnen (vad-ar-en-snapsvisa): etikett och melodirad i stallet for ikon */
.art-verktyg-kort .art-nar {margin-bottom: 0;}
.art-verktyg-kort .art-visa-melodi {margin: -.25rem 0 0;}
/* Tre exempelvisor sida vid sida i artikelkolumnen, en kolumn pa mobil */
.art-verktyg-tre {grid-template-columns: repeat(3, minmax(0, 1fr));}
@media (max-width: 767.98px) {
    .art-verktyg-tre {grid-template-columns: 1fr;}
}

/* Kallstod under varje regel (skalens-10-gyllene-regler): en liten gra rad med
   lankarna till kallorna, tatt under avsnittets sista stycke */
.art-kallstod {font-size: .85rem; color: #6c757d; line-height: 1.6; margin: -.25rem 0 0;}
/* Checklista med orange bockar i den varma rutan (samma sida) */
.art-bock {list-style: none; padding-left: 0; margin: .75rem 0 1rem;}
.art-bock li {position: relative; padding-left: 1.6rem; margin-bottom: .35rem;}
.art-bock li::before {content: "\2713"; position: absolute; left: .1rem; top: 0; color: #b26a00; font-weight: 700;}

/* Ankare inne i artikelkolumnen (underrubriker och fetade uppslagsord med id, t.ex. orden pa
   snapsens-manga-namn som tabellen lankar ner till) far samma marginal mot den fasta menyn som h2 */
.art-artikel h3, .art-artikel b[id], .art-artikel i[id] {scroll-margin-top: 80px;}

/* Accordion (FAQ) inuti artikelkolumnen: rubrikerna ar h3 och far annars artikelns h3-marginaler och -storlek */
.art-artikel .accordion-header {margin: 0; font-size: 1rem; font-weight: 400;}

/* Sanghaften (app/hafte/index.php): punktlista i verktygskorten, statiska kort for stegen,
   skarmbilder i rutnat med forstoring i modal, och kodformularet i gastrutan */
.art-verktyg-kort ul {margin: 0; padding-left: 1.2rem; color: #495057; line-height: 1.6;}
.art-verktyg-kort li {margin-bottom: .2rem;}
.art-kort-statisk, .art-kort-statisk:hover {box-shadow: 0 1px 3px rgba(0, 0, 0, .06); transform: none; cursor: default;}
.art-bilder {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; margin: 1rem 0 1.5rem;}
.art-artikel .art-bilder figure {margin: 0;}
.art-artikel .art-bilder img {border: 1px solid #d9dde3; cursor: zoom-in;}
.art-ruta-lank .art-kod {flex: 1 1 18rem;}
.art-kod .form-control {padding: .6rem .9rem;}
@media (max-width: 767.98px) {
    .art-bilder {grid-template-columns: 1fr;}
}

/* Herobilden visas bara nar den far plats till hoger om texten (md och uppat). Under det
   lades kolumnen forut under texten, vilket blev klumpigt pa mobilen: nu doljs den i stallet.
   Sidorna ger dessutom mobilen en tom kalla via <picture>/<source> (samma brytpunkt), sa att
   webblasaren inte laddar ner herobilden i onodan nar den anda inte visas. */
@media (max-width: 767.98px) {
    .art-hero-bild {display: none;}
}

/* Guider (samlingssidan): kort med bild overst i 3:2 och texten under, samt fyra kort i bredd
   for hogtiderna (tva pa surfplatta, ett pa mobil) */
.art-kort-bild {padding: 0;}
.art-kort-bild img {display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-bottom: 1px solid #d9dde3; border-radius: .5rem .5rem 0 0;}
.art-kort-inre {display: block; padding: .9rem 1rem 1rem;}
.art-kalender-fyra {grid-template-columns: repeat(4, minmax(0, 1fr));}
@media (max-width: 991.98px) {
    .art-kalender-fyra {grid-template-columns: repeat(2, minmax(0, 1fr));}
}
@media (max-width: 479.98px) {
    .art-kalender-fyra {grid-template-columns: 1fr;}
}

/* Tva kolumner (surfplatta): det breda kortet spanner bara nar det annars hade blivit ensamt
   pa sista raden (udda antal kort). Med jamnt antal blir det tva kort per rad rakt igenom,
   i stallet for 2 + 1 + ett kort over hela bredden. */
@media (max-width: 767.98px) {
    .art-kort-bred {grid-column: auto;}
    .art-kort-bred:last-child:nth-child(odd) {grid-column: 1 / -1;}
}