@charset "UTF-8";
/* ==========================================================================
   YA 2026 – egna stilar för yrkesakademin.fi
   --------------------------------------------------------------------------
   Den här filen är den som gäller. Den laddas av barntemat
   (templates/yootheme_ya/config.php -> src/YaSearchGroup.php, funktionen
   styles) efter temats egen CSS, och påverkas inte av att man sparar i
   YOOtheme-byggaren.
   Blocken "YA 2026", "YA SALMIAK", "YA TEXTKNAPP" och "YA MENY" i
   YOOtheme > Settings > Custom Code är äldre kopior av samma regler och
   finns kvar som reserv. Ändra här, inte där.
   Färger: turkos #00707F, mörkblå #0B2331, dämpad text #4A6070,
   ljus turkos #7FD3E6. Typsnitt: Encode Sans.
   Hörande skript: templates/yootheme_ya/js/ya-2026.js
   ========================================================================== */
/* --- 1. Typografi och grund -------------------------------------------------
   Textstorlekar och rubriknivåer (h1-h6), inga versaler i rubriker,
   kortrubriker, ingress (uk-text-lead), dämpad text med godkänd kontrast,
   knappstorlekar, understrukna länkar i löptext, synlig fokusram för
   tangentbord, pill-filterknapparnas färger samt märkningen på
   utbildningskort (ya-badge-star = Ny utbildning, ya-badge-bolt = Förnyad,
   ya-badge-lock = Ansökan stängd). */
html body { font-size: 17px; line-height: 1.6; }
html h1, html .uk-h1 { font-size: 34px; line-height: 1.15; font-weight: 700; letter-spacing: -0.3px; text-transform: none; }
html h2, html .uk-h2 { font-size: 28px; line-height: 1.2; font-weight: 700; letter-spacing: 0; text-transform: none; }
html h3, html .uk-h3 { font-size: 22px; line-height: 1.3; font-weight: 600; letter-spacing: 0; text-transform: none; }
html h4, html .uk-h4 { font-size: 19px; line-height: 1.35; font-weight: 600; letter-spacing: 0; text-transform: none; }
html h5, html .uk-h5 { font-size: 17px; line-height: 1.4; font-weight: 600; letter-spacing: 0; text-transform: none; }
html h6, html .uk-h6 { font-size: 15px; line-height: 1.4; font-weight: 600; letter-spacing: 0; text-transform: none; }
@media (min-width: 960px) {
  html h1, html .uk-h1 { font-size: 44px; }
  html h2, html .uk-h2 { font-size: 34px; }
  html h3, html .uk-h3 { font-size: 24px; }
  html h4, html .uk-h4 { font-size: 20px; }
}
html .uk-heading-small, html .uk-heading-medium, html .uk-heading-large, html .uk-heading-xlarge,
html blockquote, html .uk-article-title, html .uk-modal-title, html .uk-description-list > dt,
html .uk-table th, html .uk-form-label, html .uk-label, html .uk-nav-header { text-transform: none; letter-spacing: 0; }
html .uk-card-title { font-size: 20px; line-height: 1.3; font-weight: 600; text-transform: none; letter-spacing: 0; }
html .uk-accordion-title { font-size: 18px; line-height: 1.4; font-weight: 600; text-transform: none; letter-spacing: 0; }
html .uk-text-lead { font-size: 20px; line-height: 1.5; font-weight: 400; }
html .uk-text-large { font-size: 19px; line-height: 1.55; }
html .uk-text-small { font-size: 15px; line-height: 1.5; }
html .uk-text-meta, html .uk-article-meta { font-size: 15px; line-height: 1.4; color: #4A6070; font-weight: 400; }
html .uk-text-muted { color: #4A6070 !important; }
html a.uk-link-muted, html .uk-link-muted a { color: #4A6070; }
html .uk-search-input::placeholder, html .uk-input::placeholder { color: #4A6070; }
html .uk-button { font-size: 16px; font-weight: 600; line-height: 44px; text-transform: none; letter-spacing: 0; }
html .uk-button-small { font-size: 15px; line-height: 36px; }
html .uk-button-large { font-size: 17px; line-height: 52px; }
html .tm-main p a:not(.uk-button), html .tm-main .el-content li a:not(.uk-button) { text-decoration: underline; text-underline-offset: 2px; }
html :focus-visible { outline: 3px solid #0B2331; outline-offset: 2px; }
html .uk-light :focus-visible { outline-color: #FFFFFF; }
html .uk-subnav-pill > * > :first-child { color: #0B2331; background: #E3EBEE; border-radius: 500px; padding: 9px 18px; font-weight: 500; }
html .uk-subnav-pill > * > a:hover { background: #0B2331; color: #FFFFFF; }
html .uk-subnav-pill > .uk-active > a { background: #2B7C95; color: #FFFFFF; }
html .ya-badge { display: none; }
html .ya-badge-star, html .ya-badge-bolt, html .ya-badge-lock { display: inline-block; position: absolute; top: 12px; left: 12px; z-index: 1; padding: 4px 10px; border-radius: 4px; font-size: 13px; font-weight: 600; line-height: 1.4; }
html .ya-badge-star { background: #0B2331; color: #FFFFFF; }
html .ya-badge-star::after { content: "Ny utbildning"; }
html .ya-badge-bolt { background: #FFFFFF; color: #0B2331; }
html .ya-badge-bolt::after { content:"F\F6 rnyad"; }
html .ya-badge-lock { background: #7A2E00; color: #FFFFFF; }
html .ya-badge-lock::after { content:"Ans\F6 kan st\E4 ngd"; }
/* --- 2. Salmiakmönstret -----------------------------------------------------
   YA:s rutmönster som diskret bakgrund till höger i sidhuvudet
   (images/grafik/ya-salmiak-header.svg) samt avdelarlinjer och länkar i
   sidfoten (sektionen med klassen ya-footer). */
html .tm-header .uk-navbar-container:not(.uk-navbar-transparent),html .tm-header-mobile .uk-navbar-container:not(.uk-navbar-transparent){background-image:url("/images/grafik/ya-salmiak-header.svg");background-repeat:no-repeat;background-position:right bottom;background-size:auto 100%}
html .ya-footer .uk-list-divider>:nth-child(n+2){border-top-color:rgba(255,255,255,.16)!important}
html .ya-footer a{text-decoration:none}
html .ya-footer a:hover{text-decoration:underline}
/* --- 3. Textknappar ---------------------------------------------------------
   Knappstilen "text": tar bort temats streck framför knappen, gör den till
   en turkos länk med understrykning vid hover, vit på mörka sektioner. */
html .uk-button-text{padding-left:0;font-weight:600}
html .uk-button-text::before,html .uk-button-text::after{display:none!important}
html .uk-button-text:hover{text-decoration:underline}
html .tm-main .uk-button-text,html .uk-section-default .uk-button-text,html .uk-section-muted .uk-button-text{color:#00707F}
html .tm-main .uk-button-text:hover,html .uk-section-default .uk-button-text:hover,html .uk-section-muted .uk-button-text:hover{color:#0B2331}
html .uk-section-primary:not(.uk-preserve-color) .uk-button-text,html .uk-section-secondary:not(.uk-preserve-color) .uk-button-text,html .uk-light .uk-button-text{color:#fff}
/* --- 4. Sidhuvud och dropdown-menyer ----------------------------------------
   Vit menytext på den mörkblå bakgrunden (ljus turkos vid hover och aktiv,
   uppfyller WCAG AA) och vita dropdown-paneler med mörk text, turkos
   överkant, avdelare och knappar. */
html .tm-header .uk-navbar-container:not(.uk-navbar-transparent) .uk-navbar-nav>li>a,html .tm-header-mobile .uk-navbar-container:not(.uk-navbar-transparent) .uk-navbar-nav>li>a{color:#fff!important}
html .tm-header .uk-navbar-container:not(.uk-navbar-transparent) .uk-navbar-nav>li:hover>a,html .tm-header .uk-navbar-container:not(.uk-navbar-transparent) .uk-navbar-nav>li>a[aria-expanded=true],html .tm-header .uk-navbar-container:not(.uk-navbar-transparent) .uk-navbar-nav>li.uk-active>a{color:#7FD3E6!important}
html .tm-header .uk-navbar-container:not(.uk-navbar-transparent) .uk-navbar-nav>li:hover>a::before,html .tm-header .uk-navbar-container:not(.uk-navbar-transparent) .uk-navbar-nav>li>a[aria-expanded=true]::before,html .tm-header .uk-navbar-container:not(.uk-navbar-transparent) .uk-navbar-nav>li.uk-active>a::before{background-color:#02ADCB!important}
html .tm-header .uk-navbar-nav>li>a:focus-visible{outline:2px solid #7FD3E6;outline-offset:-4px}
html .tm-header .uk-navbar-dropdown{background:#fff!important;color:#0B2331!important;border-top:3px solid #00707F;box-shadow:0 12px 28px rgba(11,35,49,.18)!important;padding:28px}
html .tm-header .uk-navbar-dropdown a,html .tm-header .uk-navbar-dropdown .uk-link{color:#0B2331!important}
html .tm-header .uk-navbar-dropdown a:hover{color:#00707F!important;text-decoration:underline}
html .tm-header .uk-navbar-dropdown .uk-nav>li>a{color:#0B2331!important;font-weight:500}
html .tm-header .uk-navbar-dropdown .uk-nav>li>a:hover,html .tm-header .uk-navbar-dropdown .uk-nav>li.uk-active>a{color:#00707F!important}
html .tm-header .uk-navbar-dropdown .uk-icon{color:#00707F}
html .tm-header .uk-navbar-dropdown .uk-text-meta,html .tm-header .uk-navbar-dropdown .uk-text-muted{color:#4A6070!important}
html .tm-header .uk-navbar-dropdown h1,html .tm-header .uk-navbar-dropdown h2,html .tm-header .uk-navbar-dropdown h3,html .tm-header .uk-navbar-dropdown .uk-h4,html .tm-header .uk-navbar-dropdown .uk-h5{color:#0B2331!important}
html .tm-header .uk-navbar-dropdown .uk-nav-divider>:not(.uk-nav-header,html .uk-nav-divider)+:not(.uk-nav-header,html .uk-nav-divider),html .tm-header .uk-navbar-dropdown .uk-list-divider>:nth-child(n+2){border-top-color:#DCE4E7!important}
html .tm-header .uk-navbar-dropdown .uk-grid-divider>:not(.uk-first-column)::before{border-left-color:#DCE4E7!important}
html .tm-header .uk-navbar-dropdown .uk-button-secondary{background:#0B2331!important;color:#fff!important;border-color:#0B2331!important}
html .tm-header .uk-navbar-dropdown .uk-button-secondary:hover{background:#2B7C95!important;border-color:#2B7C95!important;color:#fff!important;text-decoration:none}
html .tm-header .uk-navbar-dropdown .uk-button-default{background:transparent!important;color:#00707F!important;border-color:#00707F!important}
html .tm-header .uk-navbar-dropdown .uk-button-default:hover{background:#2B7C95!important;color:#fff!important;text-decoration:none}
html .tm-header .uk-navbar-dropdown .uk-button .uk-icon{color:inherit}
/* --- 5. Filterknappar -------------------------------------------------------
   Större radavstånd när pill-knapparna bryts till flera rader. */
html .uk-subnav-pill{row-gap:12px}
/* --- 6. Meddelanden som kan döljas ------------------------------------------
   Sätt klassen ya-dismiss på ett element i byggaren (Avancerat > Klass) så
   får det en "Dölj"-knapp. Valet sparas i besökarens webbläsare och rutan
   visas igen när texten ändras. Logiken finns i js/ya-2026.js. Används på
   inforutan under Grundexamen, Yrkesexamen och Specialyrkesexamen. */
html .ya-dismiss{position:relative}
html .ya-dismiss[hidden]{display:none!important}
html .ya-dismiss .ya-dismiss-close{float:right;margin:0 0 8px 16px;padding:4px 12px;background:transparent;border:1px solid #00707F;border-radius:500px;color:#00707F;font:inherit;font-size:.875rem;font-weight:600;line-height:1.5;cursor:pointer}
html .ya-dismiss .ya-dismiss-close:hover,html .ya-dismiss .ya-dismiss-close:focus-visible{background:#2B7C95;color:#fff}
html .ya-dismiss-open{display:inline-block;margin:0 0 20px;padding:0;background:none;border:0;color:#00707F;font:inherit;font-size:.875rem;font-weight:600;text-decoration:underline;cursor:pointer}
html .ya-dismiss-open[hidden]{display:none!important}
html .ya-dismiss-open:hover{color:#0B2331}
/* --- 7. Pil på klickbara kort -----------------------------------------------
   En rund vit bricka med sned turkos pil visas uppe till höger på alla
   klickbara kort med bild när markören är över kortet eller det har
   tangentbordsfokus. Visas inte på pekskärm. */
html a.el-item.uk-card:has(img.el-image){position:relative}
html a.el-item.uk-card:has(img.el-image)::after{content:"";position:absolute;z-index:2;top:38px;right:38px;width:40px;height:40px;border-radius:50%;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none' stroke='%2300707F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 14.5l9-9'/%3E%3Cpath d='M7.5 5.5h7v7'/%3E%3C/svg%3E") center/20px 20px no-repeat;box-shadow:0 2px 10px rgba(11,35,49,.25);opacity:0;transform:translate(-6px,6px);transition:opacity .2s ease,transform .2s ease;pointer-events:none}
html a.el-item.uk-card.uk-card-small:has(img.el-image)::after{top:28px;right:28px}
html a.el-item.uk-card:has(.uk-card-media-top)::after,html a.el-item.uk-card.uk-card-small:has(.uk-card-media-top)::after{top:12px;right:12px}
html a.el-item.uk-card:has(img.el-image):hover::after,html a.el-item.uk-card:has(img.el-image):focus-visible::after{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){html a.el-item.uk-card:has(img.el-image)::after{transition:none;transform:none}}
/* --- 8. Utbildningsöversikter i mobil (under 640 px) ------------------------
   Gäller bara element med klasserna ya-utb-hero (sidhuvudets sektion) och
   ya-utb-grid (Grid Pro-elementet) på de sex översikterna: Alla
   utbildningar, Grundexamen, Yrkesexamen, Specialyrkesexamen, Delexamen
   och Övrig utbildning. Dator och surfplatta påverkas inte. */
@media (max-width:639px){
/* Sidhuvud */
html .ya-utb-hero{padding-top:18px!important;padding-bottom:18px!important}
html .ya-utb-hero h1{font-size:1.75rem;line-height:1.15;margin-bottom:0}
html .ya-utb-hero .uk-text-lead{display:none}
html .ya-utb-hero .uk-breadcrumb{margin-bottom:8px;font-size:.8125rem}
html .ya-utb-hero + .uk-section{padding-top:20px}
/* Filter- och examensknappar på en rad som sveps i sidled */
html .ya-utb-hero .uk-subnav,html .ya-utb-grid .uk-subnav{flex-wrap:nowrap!important;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;row-gap:0;margin-right:-15px;padding:2px 15px 6px 0;scroll-snap-type:x proximity}
html .ya-utb-hero .uk-subnav::-webkit-scrollbar,html .ya-utb-grid .uk-subnav::-webkit-scrollbar{display:none}
html .ya-utb-hero .uk-subnav>*,html .ya-utb-grid .uk-subnav>*{flex:none;white-space:nowrap;scroll-snap-align:start}
html .ya-utb-hero .uk-subnav>*>a,html .ya-utb-grid .uk-subnav>*>a{white-space:nowrap}
/* Kort som listrader */
html .ya-utb-grid .uk-grid>.uk-grid-margin{margin-top:10px!important}
html .ya-utb-grid a.el-item.uk-card{min-height:96px}
html .ya-utb-grid a.el-item.uk-card>object,html .ya-utb-grid a.el-item.uk-card:not(:has(>object)){display:grid!important;grid-template-columns:104px minmax(0,1fr);align-items:stretch;height:100%}
html .ya-utb-grid a.el-item .uk-card-media-top{grid-column:1;grid-row:1;position:relative;min-height:96px;overflow:hidden;border-radius:inherit;border-top-right-radius:0;border-bottom-right-radius:0}
html .ya-utb-grid a.el-item .uk-card-media-top img{position:absolute;inset:0;width:100%!important;height:100%!important;object-fit:cover;border-radius:0}
html .ya-utb-grid a.el-item .uk-card-body{grid-column:2;grid-row:1;min-width:0;padding:10px 12px!important;display:flex;flex-direction:column;justify-content:center}
html .ya-utb-grid a.el-item .el-title{font-size:1rem!important;line-height:1.25!important;margin:0!important}
html .ya-utb-grid a.el-item .el-content{font-size:.8125rem!important;line-height:1.35!important;margin-top:3px!important}
html .ya-utb-grid a.el-item .el-meta{margin:0 0 3px!important;font-size:.75rem}
/* Märkning (ny/förnyad/stängd) som liten etikett i texten i stället för över bilden */
html .ya-utb-grid a.el-item .el-meta .ya-badge-star,html .ya-utb-grid a.el-item .el-meta .ya-badge-bolt,html .ya-utb-grid a.el-item .el-meta .ya-badge-lock{position:static!important;display:inline-block!important;padding:1px 8px!important;font-size:.6875rem!important;margin:0 0 2px!important}
html .ya-utb-grid a.el-item .el-meta .ya-badge-bolt{border:1px solid #0B2331}
/* Ingen hover-pil i listläget */
html .ya-utb-grid a.el-item.uk-card::after{display:none!important}
}
/* --- 9. Flikar (uk-tab) -----------------------------------------------------
   Alla flikar på sajten visas som rundade knappar med turkos ram; den
   aktiva är fylld. Ersätter temats flikar med ljusturkos platta. På mörka
   sektioner vit ram. Pill-filterknapparna (punkt 1 och 5) berörs inte. */
html .tm-page .uk-tab{display:flex;flex-wrap:wrap;gap:10px;margin-left:0;padding:0;border:0}
html .tm-page .uk-tab::before,html .tm-page .uk-tab::after{display:none!important}
html .tm-page .uk-tab>*{padding-left:0;margin:0}
html .tm-page .uk-tab>*>a{display:inline-flex;align-items:center;padding:6px 16px!important;border:2px solid #00707F!important;border-radius:500px!important;background:transparent!important;color:#00707F!important;font-size:1rem;font-weight:600;line-height:1.4;text-transform:none;letter-spacing:0;text-decoration:none;transition:background-color .15s ease,color .15s ease}
html .tm-page .uk-tab>*>a:hover{background:rgba(0,112,127,.08)!important;color:#00707F!important}
html .tm-page .uk-tab>.uk-active>a{background:#2B7C95!important;color:#fff!important}
html .tm-page .uk-tab>*>a:focus-visible{outline:2px solid #0B2331;outline-offset:2px}
html .tm-page .uk-section-primary .uk-tab>*>a,html .tm-page .uk-section-secondary .uk-tab>*>a{border-color:#fff!important;color:#fff!important}
html .tm-page .uk-section-primary .uk-tab>.uk-active>a,html .tm-page .uk-section-secondary .uk-tab>.uk-active>a{background:#fff!important;color:#00707F!important}
@media (max-width:639px){html .tm-page .uk-tab{gap:8px}html .tm-page .uk-tab>*>a{padding:5px 13px!important;font-size:.9375rem}}
/* --- 10. Mobilmenyn (#tm-dialog-mobile) --------------------------------------
   Vit panel med mörk text. Överst fyra genvägar (Utbildningar, Ansökan,
   Studieguiden, Kontakt) och under dem hela menyn, där undermenyer fälls ut
   med pilknappen. Genvägarna och pilknapparna skapas av js/ya-2026.js;
   utan skript visas menyn som en vanlig lista. */
html #tm-dialog-mobile .uk-offcanvas-bar{background:#fff!important;color:#0B2331!important;width:min(380px,90vw);padding:16px 20px 28px;box-shadow:0 0 40px rgba(11,35,49,.25)}
html #tm-dialog-mobile .uk-offcanvas-close{color:#0B2331!important;top:14px;right:14px}
html #tm-dialog-mobile .ya-mm-shortcuts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 18px}
html #tm-dialog-mobile .ya-mm-shortcuts a{display:flex;flex-direction:column;gap:6px;padding:12px;border-radius:10px;background:#E6F2F4;color:#00505B!important;font-size:.9375rem;font-weight:600;line-height:1.25;text-decoration:none}
html #tm-dialog-mobile .ya-mm-shortcuts a:hover,html #tm-dialog-mobile .ya-mm-shortcuts a:focus-visible{background:#2B7C95;color:#fff!important}
html #tm-dialog-mobile .uk-nav>li{border-top:1px solid #DCE4E7}
html #tm-dialog-mobile .uk-nav>li:last-child{border-bottom:1px solid #DCE4E7}
html #tm-dialog-mobile .uk-nav>li>a{color:#0B2331!important;font-size:1.0625rem;font-weight:600;padding:12px 0;min-height:24px;text-transform:none;letter-spacing:0}
html #tm-dialog-mobile .uk-nav>li>a:hover,html #tm-dialog-mobile .uk-nav>li.uk-active>a{color:#00707F!important}
html #tm-dialog-mobile .uk-nav-sub{padding:0 0 12px 12px}
html #tm-dialog-mobile .uk-nav-sub a{color:#0B2331!important;font-size:1rem;font-weight:400;padding:7px 0;text-transform:none}
html #tm-dialog-mobile .uk-nav-sub a:hover,html #tm-dialog-mobile .uk-nav-sub li.uk-active>a{color:#00707F!important;text-decoration:underline}
html #tm-dialog-mobile .ya-mm-parent{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center}
html #tm-dialog-mobile .ya-mm-parent>ul{grid-column:1/-1}
html #tm-dialog-mobile .ya-mm-parent>ul[hidden]{display:none!important}
html #tm-dialog-mobile .ya-mm-toggle{width:44px;height:44px;margin-right:-10px;padding:0;background:transparent;border:0;border-radius:50%;color:#00707F;cursor:pointer;display:flex;align-items:center;justify-content:center}
html #tm-dialog-mobile .ya-mm-toggle:hover{background:#E6F2F4}
html #tm-dialog-mobile .ya-mm-toggle>span{transition:transform .2s ease}
html #tm-dialog-mobile .ya-mm-open>.ya-mm-toggle>span{transform:rotate(180deg)}
@media (prefers-reduced-motion:reduce){html #tm-dialog-mobile .ya-mm-toggle>span{transition:none}}
html #tm-dialog-mobile .uk-offcanvas-bar>div:first-of-type{margin-top:0!important}
html #tm-dialog-mobile .uk-offcanvas-bar .uk-grid{margin-top:0!important}
html #tm-dialog-mobile .uk-offcanvas-bar .uk-grid>*{margin-top:0!important}
html #tm-dialog-mobile .uk-logo{display:block;margin:0 56px 18px 0;line-height:0}
html #tm-dialog-mobile .uk-logo img,html #tm-dialog-mobile .uk-logo svg{width:110px;height:auto}
html #tm-dialog-mobile .ya-mm-shortcuts{margin-top:4px}
html #tm-dialog-mobile.ya-mm .uk-offcanvas-bar{display:block!important}
html #tm-dialog-mobile .ya-mm-orig{display:none!important}
html #tm-dialog-mobile .ya-mm-logo{display:block;width:96px;margin:4px 0 18px;line-height:0}
html #tm-dialog-mobile .ya-mm-logo img{width:96px;height:auto;display:block}
/* Temats egen logotyp i mobilmenyn döljs, annars visas logotypen två gånger.
   Menyns logotyp (.ya-mm-logo) läggs in av js/ya-2026.js. */
html #tm-dialog-mobile .uk-logo{display:none!important}
/* --- 11. Faktarutan på utbildningssidorna (class "ya-fakta") -----------------
   Långa värden i Ort, Studietid, Preliminär start, Ansökningstid och Kostnad
   kortas av js/ya-2026.js: det viktigaste visas i fet stil och resten fälls
   ut med "Visa mer". Texter upp till ca 34 tecken visas som vanligt. */
html .ya-fakta .ya-fakta-head,html .ya-fakta .ya-fakta-full{display:block}
html .ya-fakta .ya-fakta-rest{display:block;margin-top:6px;font-size:.875rem;font-weight:400;line-height:1.45;color:#4A6070}
html .ya-fakta [hidden]{display:none!important}
html .ya-fakta .ya-fakta-more{display:inline-block;margin-top:6px;padding:0;background:none;border:0;color:#00707F;font:inherit;font-size:.875rem;font-weight:600;text-decoration:underline;cursor:pointer}
html .ya-fakta .ya-fakta-more:hover{color:#0B2331}
/* Faktarutan som ett avgränsat kort: mörkare ram, rundade hörn, tätare luft och
   placerad över kanten mellan det grå sidhuvudet och den vita sektionen under. */
html .uk-tile:has(.ya-fakta){background:#fff;border:1px solid #C3CED4;border-radius:12px;padding:22px 28px!important;position:relative;z-index:1;margin-bottom:-56px;box-shadow:0 1px 2px rgba(11,35,49,.04)}
html .uk-section:has(.ya-fakta){padding-bottom:0!important;overflow:visible}
html .uk-section:has(.ya-fakta)+.uk-section{padding-top:104px}
html .ya-fakta .el-title{margin:0 0 4px!important}
html .ya-fakta .el-content{margin-top:0!important;line-height:1.35}
html .ya-fakta .uk-grid-divider>:not(.uk-first-column)::before{border-left-color:#D5DDE1}
@media (max-width:959px){
html .uk-tile:has(.ya-fakta){padding:18px 20px!important;margin-bottom:-40px}
html .uk-section:has(.ya-fakta)+.uk-section{padding-top:72px}
}
/* --- 12. Knappar: lätt rundade hörn -----------------------------------------
   Alla vanliga knappar (primär, sekundär, standard, fara) får 8 px rundade
   hörn. Textknappar och länkknappar berörs inte. */
html .uk-button:not(.uk-button-text):not(.uk-button-link){border-radius:8px}
html .uk-button-small:not(.uk-button-text):not(.uk-button-link){border-radius:6px}
html .uk-button-group>.uk-button:not(:first-child):not(:last-child),html .uk-button-group>div:not(:first-child):not(:last-child) .uk-button{border-radius:0}
html .uk-button-group>.uk-button:first-child,html .uk-button-group>div:first-child .uk-button{border-top-right-radius:0;border-bottom-right-radius:0}
html .uk-button-group>.uk-button:last-child,html .uk-button-group>div:last-child .uk-button{border-top-left-radius:0;border-bottom-left-radius:0}
/* --- 13. Brödsmulor ----------------------------------------------------------
   Avdelaren mellan nivåerna skrivs här som ett snedstreck. Temats eget tecken
   (ett långt tankstreck) visades som skräptecken. Teckenkoder i content skrivs
   med \-kod så att de inte beror på filens teckenkodning. */
html .uk-breadcrumb>:nth-child(n+2):not(.uk-first-column)::before{content:"/";color:#8A9AA5;margin:0 12px 0 calc(12px - 4px)}
/* --- 14. Ansökningsknappar ---------------------------------------------------
   Knapparna byggs av fältet Ansökningslänk (se src/YaSources.php, yaAnsokan).
   .ya-ansokan-knappar  = raden med knappar "Ansök – Vasa" osv.
   .ya-ansokan-bred     = varianten i sidospalten, knapparna i full bredd.
   .ya-ansokan-stangd   = grå rad med hänglås som visas i stället för knapp
                          när ordet "stängd" står i fältets text. */
.ya-ansokan-knappar{display:flex;flex-wrap:wrap;gap:10px}
.ya-ansokan-bred .ya-ansokan-knappar{flex-direction:column}
.ya-ansokan-stangd{display:inline-flex;align-items:center;gap:8px;margin-top:12px;padding:9px 14px;border:1px solid #C3CED4;border-radius:8px;background:#F2F5F6;color:#4A6070;font-size:15px;font-weight:600;line-height:1.3}
.ya-ansokan-stangd:first-child{margin-top:0}
.ya-ansokan-bred .ya-ansokan-stangd{display:flex}
/* --- 15. Reportage (ZOO-appen Artiklar) --------------------------------------
   .ya-artikel sitter på artikeltexten i mallen "Artiklar layout".
   Texten får en läsvänlig radlängd och något större stil, första stycket
   visas som ingress, och bilder i texten får rundade hörn. */
.ya-artikel{max-width:720px;font-size:17px;line-height:1.7}
.ya-artikel>p:first-child{font-size:20px;line-height:1.55;color:#0B2331}
.ya-artikel img{max-width:100%;height:auto;border-radius:8px}
.ya-artikel h2,.ya-artikel h3{margin-top:32px}
/* --- 16. Mötesutrymmen: pris och utrustning på rumskorten --------------------
   Används i kortens innehåll på sidan Tjänster > Mötesutrymmen (artikel 10).
   .ya-rum-pris    = två rutor bredvid varandra: timpris och heldagspris.
   .ya-rum-moms    = liten momsrad under priset.
   .ya-rum-etikett = liten rubrik "Utrustning".
   .ya-chips       = utrustningen som etiketter i stället för löpande text.
   .ya-rum-tabell  = pristabell (gymnastiksalen har fyra prisnivåer).
   .ya-rum-offert  = ruta för rum utan fast pris. */
.ya-rum-pris{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 6px}
.ya-rum-pris>div{background:#F2F5F6;border-radius:8px;padding:8px 12px}
.ya-rum-pris span{display:block;font-size:13px;color:#4A6070}
.ya-rum-pris strong{display:block;font-size:22px;line-height:1.3;font-weight:700;color:#0B2331}
.ya-rum-moms{font-size:13px;color:#4A6070;margin:0 0 14px}
.ya-rum-etikett{font-size:13px;font-weight:600;color:#4A6070;margin:0 0 6px}
.ya-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.ya-chips>li{font-size:13px;line-height:1.3;color:#0B2331;border:1px solid #C3CED4;border-radius:6px;padding:4px 9px;background:#fff}
.ya-rum-offert{background:#F2F5F6;border-radius:8px;padding:10px 12px;margin:0 0 14px;font-size:15px}
.ya-rum-tabell{width:100%;border-collapse:collapse;margin:0 0 8px;font-size:14px}
.ya-rum-tabell th,.ya-rum-tabell td{padding:7px 4px;border-bottom:1px solid #D5DDE1;text-align:left;vertical-align:top}
.ya-rum-tabell thead th{font-size:13px;font-weight:600;color:#4A6070}
.ya-rum-tabell tbody th{font-weight:400}
.ya-rum-tabell td{white-space:nowrap;font-weight:700;color:#0B2331}
/* --- 17. YA i siffror: flerspråkig sida i infografikstil ---------------------
   Sidan (artikel 18) byggs i YOOtheme med ett Grid-element som har klassen
   ya-siffror. Varje ruta är ett objekt: Titel = det stora talet, Innehåll = texten.
   SPRÅK: text skrivs tre gånger efter varandra i <span lang="sv">, <span lang="fi">
   och <span lang="en">. Bara det valda språket visas. Sektionerna har klassen
   ya-i18n, språkknapparna (Subnav) klassen ya-sprakval. Valet görs av
   js/ya-2026.js och kan länkas med ?sprak=sv, ?sprak=fi eller ?sprak=en.
   Hjälpklasser i innehållet:
   .ya-rubrik   = liten rubrik i versaler,   .ya-tal = stort tal i löptext,
   .ya-lista    = lista utan punkter,        .ya-pie = lista "15 % Vasa" som
   ritas som cirkeldiagram,                  .ya-medaljer = tre medaljcirklar. */
.ya-i18n [lang]{display:none}
html:not([data-ya-lang]) .ya-i18n [lang="sv"],
html[data-ya-lang="sv"] .ya-i18n [lang="sv"],
html[data-ya-lang="fi"] .ya-i18n [lang="fi"],
html[data-ya-lang="en"] .ya-i18n [lang="en"]{display:inline}
.ya-sprakval>li>a{border:1px solid #00707F;border-radius:8px;color:#00707F;padding:6px 14px;font-weight:600}
.ya-sprakval>li.uk-active>a{background:#2B7C95;color:#fff}
html .ya-siffror>.uk-grid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;margin:0!important;padding:0;background:#fff;border-radius:18px;overflow:hidden}
html .ya-siffror>.uk-grid>*{width:auto!important;max-width:none;padding:0!important;margin:0!important;background:#E9EDEF}
html .ya-siffror .el-item{position:relative;height:100%;box-sizing:border-box;padding:26px 24px 22px;color:#0B2331;font-size:15px;line-height:1.45}
html .ya-siffror .el-title{font-size:clamp(40px,4.2vw,58px);line-height:1;font-weight:800;color:#0B2331;margin:0 0 10px;padding-right:48px;letter-spacing:-.01em}
html .ya-siffror>.uk-grid>:nth-child(2) .el-title{color:#0094B3}
html .ya-siffror .el-image{position:absolute;top:24px;right:22px;width:36px;height:auto;color:#0B2331;margin:0}
html .ya-siffror img.el-image{position:static;width:150px;max-width:70%;display:block;margin:10px auto 0}
html .ya-siffror .el-content{margin-top:0}
html .ya-siffror .el-content p{margin:0 0 8px}
html .ya-siffror .el-content strong{font-weight:800;color:#0B2331}
html .ya-siffror .ya-rubrik{font-size:15px;font-weight:800;text-transform:uppercase;letter-spacing:.02em;line-height:1.25;margin:0 0 12px;padding-right:48px}
html .ya-siffror .ya-tal{font-size:30px;line-height:1.1;margin-right:4px}
html .ya-siffror .ya-lista{list-style:none;margin:0;padding:0}
html .ya-siffror .ya-lista>li{margin:0 0 4px}
html .ya-siffror .ya-lista strong{color:#0094B3}
html .ya-siffror .ya-lista a{color:#00707F;font-weight:600;text-decoration:underline}
html .ya-siffror .ya-pie{list-style:none;margin:0;padding:0;font-size:13px;line-height:1.3;columns:2;column-gap:14px}
html .ya-siffror .ya-pie>li{margin:0 0 4px;break-inside:avoid;display:flex;align-items:baseline;gap:6px}
html .ya-siffror .ya-pie>li::before{content:"";flex:0 0 10px;width:10px;height:10px;border-radius:2px;background:var(--ya-c,#00707F);transform:translateY(1px)}
html .ya-siffror .ya-pie-svg{display:block;width:150px;height:150px;margin:0 auto 14px}
html .ya-siffror .ya-medaljer{display:flex;gap:10px;margin:0 0 14px}
html .ya-siffror .ya-medaljer>span{display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;font-size:20px;font-weight:800;color:#0B2331;background:#fff;border:4px solid #C9A227}
html .ya-siffror .ya-medaljer>span:nth-child(2){border-color:#9AA4AB}
html .ya-siffror .ya-medaljer>span:nth-child(3){border-color:#B0703A}
@media (max-width:1199px){html .ya-siffror>.uk-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:639px){html .ya-siffror>.uk-grid{grid-template-columns:minmax(0,1fr);border-radius:12px}}
/* --- 18. Utbildningssidor: rubriken för relaterade utbildningar ---------------
   Rubriken "Relaterad utbildning" / "Kompetensområden eller delexamen" i
   sidospalten har klassen ya-rel-rubrik. Linjen ovanför ritas av rubriken själv.
   Finns det ingen lista direkt efter rubriken (inga kopplade utbildningar)
   döljs rubriken och linjen helt. */
.ya-rel-rubrik{border-top:1px solid #E5E5E5;padding-top:20px;margin-top:20px}
.ya-rel-rubrik:not(:has(+ .ya-rel-lista)){display:none!important}
/* Sociala kanaler i sidospalten: rader utan länk döljs, och hela listan om ingen rad har länk. */
.ya-sociala li:not(:has(a[href]:not([href=""]):not([href="#"]))),
.ya-sociala:not(:has(a[href]:not([href=""]):not([href="#"]))){display:none!important}

/* --- 19. Huvudmenyn på desktop i samma stil som mobilmenyn ---------------------
   Dropdown-panelerna (Utbildningar, Ansökan, Arbetsliv, Tjänster, Studieguiden)
   har en genvägsruta till vänster (.ya-meny-ruta) och undersidorna i två
   kolumner (.ya-meny-lista). Innehållet ställs in under YOOtheme > Menyer.
   Studieguiden (menypunkt 129) visas som en knapp längst till höger. */
html .tm-header .uk-navbar-dropdown{padding:22px 24px}
html .tm-header .uk-navbar-dropdown a.ya-meny-ruta{display:flex;flex-direction:column;gap:6px;padding:16px;border-radius:10px;background:#E6F2F4;color:#00505B!important;text-decoration:none!important;line-height:1.3}
html .tm-header .uk-navbar-dropdown a.ya-meny-ruta strong{font-size:1.0625rem;font-weight:600;color:inherit}
html .tm-header .uk-navbar-dropdown a.ya-meny-ruta small{font-size:.875rem;color:#00606D}
html .tm-header .uk-navbar-dropdown a.ya-meny-ruta .uk-icon{color:inherit!important}
html .tm-header .uk-navbar-dropdown a.ya-meny-ruta:hover,html .tm-header .uk-navbar-dropdown a.ya-meny-ruta:focus-visible{background:#2B7C95;color:#fff!important}
html .tm-header .uk-navbar-dropdown a.ya-meny-ruta:hover small,html .tm-header .uk-navbar-dropdown a.ya-meny-ruta:focus-visible small{color:#fff}
html .tm-header .uk-navbar-dropdown .ya-meny-lista .uk-nav>li{margin:0!important;padding:0!important;border-top:1px solid #DCE4E7!important}
html .tm-header .uk-navbar-dropdown .ya-meny-lista .uk-nav>li::before{display:none!important}
html .tm-header .uk-navbar-dropdown .ya-meny-lista .uk-nav>li>a{padding:11px 0;font-size:1rem;font-weight:500;text-decoration:none}
html .tm-header .uk-navbar-dropdown .ya-meny-lista .uk-nav>li>a:hover{text-decoration:underline}
html .tm-header .uk-navbar-dropdown .ya-meny-lista li:has(>a[href*="for-sokanden/for-studeranden"]){display:none!important}
html .tm-header .uk-navbar-dropdown a.ya-meny-guide{display:flex;align-items:center;gap:14px;margin-top:6px;padding:14px 16px;border-radius:10px;background:#2B7C95;color:#fff!important;text-decoration:none!important;line-height:1.3}
html .tm-header .uk-navbar-dropdown a.ya-meny-guide .uk-icon{color:#fff!important;flex:none}
html .tm-header .uk-navbar-dropdown a.ya-meny-guide .ya-meny-guide-text{display:flex;flex-direction:column;gap:2px;margin-right:auto}
html .tm-header .uk-navbar-dropdown a.ya-meny-guide strong{font-size:1.0625rem;font-weight:600;color:#fff}
html .tm-header .uk-navbar-dropdown a.ya-meny-guide small{font-size:.875rem;color:#E6F2F4}
html .tm-header .uk-navbar-dropdown a.ya-meny-guide:hover,html .tm-header .uk-navbar-dropdown a.ya-meny-guide:focus-visible{background:#0B2331}
html .tm-header .uk-navbar-nav>li.item-129,html .tm-header .uk-navbar-nav>li:has(>a[href$="/for-studerande"]){order:99;margin-left:10px;display:flex;align-items:stretch}
html .tm-header .uk-navbar-container:not(.uk-navbar-transparent) .uk-navbar-nav>li.item-129>a,html .tm-header .uk-navbar-container:not(.uk-navbar-transparent) .uk-navbar-nav>li:has(>a[href$="/for-studerande"])>a{padding:0 18px!important;margin:0 0 0 0;background:none!important;color:#fff!important;font-weight:600}
html .tm-header .uk-navbar-container:not(.uk-navbar-transparent) .uk-navbar-nav>li.item-129>a::before,html .tm-header .uk-navbar-container:not(.uk-navbar-transparent) .uk-navbar-nav>li:has(>a[href$="/for-studerande"])>a::before{content:""!important;display:block!important;position:absolute!important;left:0!important;right:0!important;top:50%!important;bottom:auto!important;width:auto!important;height:44px!important;transform:translateY(-50%)!important;border:0!important;border-radius:999px!important;background:#2B7C95!important;opacity:1!important;z-index:-1!important;transition:background-color .1s ease-in-out}
html .tm-header .uk-navbar-container:not(.uk-navbar-transparent) .uk-navbar-nav>li.item-129>a:hover,html .tm-header .uk-navbar-container:not(.uk-navbar-transparent) .uk-navbar-nav>li.item-129>a[aria-expanded=true],html .tm-header .uk-navbar-container:not(.uk-navbar-transparent) .uk-navbar-nav>li:has(>a[href$="/for-studerande"])>a:hover,html .tm-header .uk-navbar-container:not(.uk-navbar-transparent) .uk-navbar-nav>li:has(>a[href$="/for-studerande"])>a[aria-expanded=true]{color:#00505B!important}
html .tm-header .uk-navbar-container:not(.uk-navbar-transparent) .uk-navbar-nav>li.item-129>a:hover::before,html .tm-header .uk-navbar-container:not(.uk-navbar-transparent) .uk-navbar-nav>li.item-129>a[aria-expanded=true]::before,html .tm-header .uk-navbar-container:not(.uk-navbar-transparent) .uk-navbar-nav>li:has(>a[href$="/for-studerande"])>a:hover::before,html .tm-header .uk-navbar-container:not(.uk-navbar-transparent) .uk-navbar-nav>li:has(>a[href$="/for-studerande"])>a[aria-expanded=true]::before{background:#fff!important}

/* --- 20. Startsidan: blocket om Studieguiden (.ya-guide-block) ------------------ */
.ya-guide-etikett p{margin:0;font-size:.875rem;font-weight:600;letter-spacing:.03em;color:#E6F2F4}
.ya-guide-kort .uk-card{border-radius:12px}
.ya-guide-kort .ya-guide-lista .uk-nav>li>a{font-weight:500;padding:9px 0}

/* --- 21. Sökfältet i Studieguiden på mobil ---------------------------------------
   Fältet (#ya-sg-q) använder den stora formulärstorleken. På mobil blir det
   mindre. Textstorleken i fältet hålls på 16 px, annars zoomar iPhone in. */
@media (max-width:639px){
  html #ya-sg-q{height:46px;padding:0 12px;font-size:1rem;text-overflow:ellipsis}
  html #ya-sg-q::placeholder{font-size:.9375rem}
  html form:has(#ya-sg-q) .uk-button-large{height:46px;padding:0 16px;font-size:1rem;line-height:44px}
}

/* --- 22. Sidfoten på mobil och surfplatta ---------------------------------------
   .ya-footer      = den mörka delen (kontakt, genvägar, Om YA)
   .ya-footer-bas  = den ljusa raden längst ner (certifikat, policylänkar, Söfuk)
   På små skärmar: länkarna som en enkel vänsterställd lista, logotyperna små
   och bredvid varandra, mindre luft. Desktop (960 px och bredare) är oförändrad. */
@media (max-width:959px){
  html .ya-footer-bas{padding-top:20px!important;padding-bottom:20px!important}
  html .ya-footer-bas .uk-container>.uk-grid{display:grid;grid-template-columns:auto auto;justify-content:start;align-items:center;column-gap:24px;row-gap:14px;margin:0!important}
  html .ya-footer-bas .uk-container>.uk-grid>*{width:auto!important;padding:0!important;margin:0!important}
  html .ya-footer-bas .uk-container>.uk-grid>:nth-child(2){grid-column:1/-1;order:-1}
  html .ya-footer-bas .uk-container>.uk-grid>:nth-child(1) img{width:64px;height:auto}
  html .ya-footer-bas .uk-container>.uk-grid>:nth-child(3) img{width:72px;height:auto}
  html .ya-footer-bas .uk-container>.uk-grid>* .uk-margin,html .ya-footer-bas .uk-container>.uk-grid>* [class*="uk-margin"]{margin:0!important}
  html .ya-footer-bas .uk-container>.uk-grid>* *{text-align:left!important}
  html .ya-footer-bas .uk-container>.uk-grid .uk-grid{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:0;margin:0!important}
  html .ya-footer-bas .uk-container>.uk-grid .uk-grid>*{padding:0!important;margin:0!important}
  html .ya-footer-bas .uk-button-link{display:inline-block;padding:6px 0;font-size:.9375rem;font-weight:500;line-height:1.4}
  html .ya-footer-bas .uk-button-link .uk-icon{display:none}
  html .ya-footer-bas .uk-text-small{margin-top:8px!important;font-size:.8125rem}
}
@media (max-width:639px){
  html .ya-footer{padding-top:32px!important;padding-bottom:32px!important}
  html .ya-footer .uk-container>.uk-grid{row-gap:0}
  html .ya-footer .uk-container>.uk-grid>.uk-grid-margin{margin-top:28px!important}
  html .ya-footer .uk-list>li{font-size:.9375rem}
  html .ya-footer .uk-list-divider>:nth-child(n+2){margin-top:8px;padding-top:8px}
  html .ya-footer [class*="uk-column-1-2"]{column-count:2;column-gap:20px}
  html .ya-footer [class*="uk-column-1-2"]>ul>li,html .ya-footer [class*="uk-column-1-2"] li{break-inside:avoid}
}

/* --- 23. 404-sidan (.ya-404) ------------------------------------------------------
   Den stora siffran är dekoration (dold för skärmläsare). Nollan lutar som en
   skylt som hänger på sned. Rörelsen stängs av för den som valt minskad rörelse. */
.ya-404-tal p{margin:0;font-size:clamp(5rem,22vw,11rem);font-weight:800;line-height:1;letter-spacing:-.02em;color:#00707F}
.ya-404-tal span{display:inline-block;color:#0B2331;transform:rotate(14deg);transform-origin:50% 10%;animation:ya-404-gunga 3.2s ease-in-out infinite}
@keyframes ya-404-gunga{0%,100%{transform:rotate(14deg)}50%{transform:rotate(-6deg)}}
@media (prefers-reduced-motion:reduce){.ya-404-tal span{animation:none}}

/* --- 24. Enskild nyhet: listan "Fler nyheter" i sidospalten (.ya-nyhet-rel) -------
   Listan byggs av src/YaSources.php (fältet yaRelaterade). */
.ya-nyhet-rel h2{margin:0 0 12px}
.ya-nyhet-rel ul{margin:0}
.ya-nyhet-rel li>a{display:block;color:#0B2331;font-weight:500;line-height:1.35;text-decoration:none}
.ya-nyhet-rel li>a:hover{color:#00707F;text-decoration:underline}
.ya-nyhet-rel-datum{display:block;font-size:.8125rem;font-weight:400;color:#4A6070;margin-bottom:2px}

/* --- 25. Nyheter: namnlistor av CSV (.ya-namnlista) och kort brödsmula ------------
   Listan byggs av src/YaSources.php (fältet yaNamnlista). Namnen står i
   spalter som anpassar sig efter bredden: tre på desktop, två på surfplatta,
   en på telefon. Sökfältet sköts av js/ya-2026.js. */
.ya-namnlista{margin-top:32px}
.ya-namnlista-topp{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 24px;margin-bottom:16px}
.ya-namnlista-topp>div{flex:1 1 260px;max-width:420px}
.ya-namnlista-total{margin:0;font-size:1.0625rem;color:#0B2331}
.ya-namnlista-tom{margin:16px 0;color:#4A6070}
.ya-namnlista-enhet{border:1px solid #DCE4E7;border-radius:10px;margin-top:12px;background:#fff}
.ya-namnlista-enhet>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;font-size:1.125rem;font-weight:600;color:#0B2331;cursor:pointer;list-style:none}
.ya-namnlista-enhet>summary::-webkit-details-marker{display:none}
.ya-namnlista-enhet>summary::after{content:"+";font-weight:400;font-size:1.4em;line-height:1;color:#00707F;margin-left:4px}
.ya-namnlista-enhet[open]>summary::after{content:"\2212"}
.ya-namnlista-enhet>summary:focus-visible{outline:2px solid #00707F;outline-offset:2px;border-radius:10px}
.ya-namnlista-antal{margin-left:auto;padding:2px 10px;border-radius:999px;background:#E6F2F4;color:#00505B;font-size:.875rem;font-weight:600}
.ya-namnlista-enhet>.ya-namnlista-grupp{padding:0 16px 8px}
.ya-namnlista-grupp{margin-top:8px}
.ya-namnlista-grupp h3{margin:16px 0 8px;padding-top:12px;border-top:1px solid #DCE4E7;font-size:1rem;font-weight:600;color:#0B2331}
.ya-namnlista-grupp h3 span{font-weight:400;color:#4A6070}
.ya-namnlista-grupp h3 span::before{content:"· "}
.ya-namnlista-grupp ul{list-style:none;margin:0 0 12px;padding:0;column-width:230px;column-gap:28px}
.ya-namnlista-grupp li{break-inside:avoid;padding:5px 0;line-height:1.35;font-size:.9375rem;color:#0B2331}
.ya-namn strong{font-weight:600}
.ya-namn-ort{color:#4A6070;font-size:.875rem}
.ya-namn-ort::before{content:", ";color:#4A6070}
.ya-namn-kombi{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:999px;background:#E6F2F4;color:#00505B;font-size:.75rem;font-weight:600;vertical-align:1px}
.ya-brod-kort li:has(>a[href*="ya-news-feed"]),.ya-brod-kort li:has(>a[href*="/category/"]){display:none}

/* --- 26. Kontaktsidan: de tre rutorna överst (.ya-kontaktrutor) -------------------
   .ya-kdl      = etikett till vänster, värde till höger (en kolumn på smala rutor)
   .ya-adresser = enheternas besöksadresser, ort i fet stil och adress under */
.ya-kontaktrutor .el-content{container-type:inline-size}
.ya-kontaktrutor .ya-kdl{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:8px 16px;margin:0 0 12px;font-size:.9375rem;line-height:1.45}
.ya-kontaktrutor .ya-kdl dt{margin:0;font-weight:400;color:#4A6070;font-size:.875rem;white-space:nowrap;padding-top:1px}
.ya-kontaktrutor .ya-kdl dd{margin:0;color:#0B2331;overflow-wrap:anywhere}
.ya-kontaktrutor .ya-kdl-not{color:#4A6070;font-size:.875rem}
.ya-kontaktrutor .ya-adresser{list-style:none;margin:0;padding:0;font-size:.9375rem;line-height:1.45}
.ya-kontaktrutor .ya-adresser li{padding:9px 0;border-top:1px solid #DCE4E7}
.ya-kontaktrutor .ya-adresser li:first-child{border-top:0;padding-top:0}
.ya-kontaktrutor .ya-adresser strong{display:block;font-weight:600;color:#0B2331}
.ya-kontaktrutor .ya-adresser span{color:#4A6070}
.ya-kontaktrutor .el-content>p:last-child{margin-bottom:0}
/* Smal ruta (under 400 px inre bredd): etiketten ovanför värdet i stället för bredvid. */
@container (max-width:400px){.ya-kontaktrutor .ya-kdl{grid-template-columns:1fr;gap:1px 0}.ya-kontaktrutor .ya-kdl dd{margin-bottom:9px}}

/* 27. Infografik som komplement till text (Studieguiden) */
.ya-infografik{margin:24px 0 8px}
.ya-infografik img{display:block;width:100%;max-width:440px;height:auto;border-radius:8px;border:1px solid #DCE4E7}

/* 27b. Studieguiden: kompakt lista "Mer i <kategori>" i sidospalten */
.ya-sg-rel h2{margin:0 0 6px;font-size:1rem}
.ya-sg-rel ul{list-style:none;margin:0;padding:0;font-size:.95rem;line-height:1.35}
.ya-sg-rel li{border-top:1px solid #DCE4E7}
.ya-sg-rel li:last-child{border-bottom:1px solid #DCE4E7}
.ya-sg-rel a{display:block;padding:6px 0;color:#00707F;text-decoration:none}
.ya-sg-rel a:hover,.ya-sg-rel a:focus-visible{color:#0B2331;text-decoration:underline}

/* 28. Utskrift: bara innehållet, svart text på vitt, utan meny, sidfot och knappar */
@media print{
@page{margin:16mm 15mm 18mm}
html,body{background:#fff!important;font-size:11pt!important;line-height:1.45!important}
/* dölj navigation och sådant som inte fungerar på papper */
.tm-toolbar,.tm-header,.tm-header-mobile,.tm-header-placeholder,.uk-sticky-placeholder,.tm-page>footer,footer,.ya-footer,.ya-footer-bas,
.uk-offcanvas,.uk-modal,.uk-notification,.uk-totop,[uk-totop],.tm-cookie-banner,[class*="cookie"],.uk-navbar-container,.uk-dropbar,
.uk-breadcrumb,.ya-brod-kort,.uk-subnav,.uk-pagination,.uk-slidenav,.uk-dotnav,.uk-search,form[role="search"],#ya-sg-q,
.uk-button,.uk-icon-button,.ya-sociala,[class*="social-sharing"],[class*="yooessentials-social"],
iframe,video,audio,.uk-lightbox,.ya-namnlista-sok,.ya-nyhet-rel,.ya-sg-rel,.ya-rel-rubrik,.ya-rel-lista,.ya-guide-kort{display:none!important}
/* delningsikoner och rubriken "Dela sidan" */
div:has(>ul>li.el-item :is(a[href*="facebook.com/sharer"],a[href*="linkedin.com/"],a[href*="wa.me"],a[href*="whatsapp"],a[href*="twitter.com/intent"],a[href*="x.com/intent"],a[title^="Dela"],a[aria-label^="Dela"],a[href*="share"])),:is(h1,h2,h3,h4,h5,h6):has(+ div:has(>ul>li.el-item :is(a[href*="facebook.com/sharer"],a[href*="linkedin.com/"],a[href*="wa.me"],a[href*="whatsapp"],a[href*="twitter.com/intent"],a[href*="x.com/intent"],a[title^="Dela"],a[aria-label^="Dela"],a[href*="share"]))){display:none!important}
/* full bredd, lite luft */
.tm-page,.tm-page-container,.tm-main,.uk-section,.uk-container,[class*="uk-container-"]{width:auto!important;max-width:none!important;margin:0!important;padding-left:0!important;padding-right:0!important;min-height:0!important;height:auto!important;background:none!important;border:0!important}
.uk-section,[class*="uk-section-"]{padding-top:0!important;padding-bottom:10pt!important}
.uk-tile,.uk-card,[class*="uk-tile-"],[class*="uk-card-"]{background:none!important;box-shadow:none!important;border:0!important;padding:0!important}
.uk-grid{display:block!important;margin:0!important}
.uk-grid>*{width:100%!important;max-width:100%!important;padding-left:0!important;margin-top:0!important;float:none!important}
.uk-grid>*+*{margin-top:8pt!important}
/* innehåll som annars är dolt eller animerat ska synas */
[uk-scrollspy] *,[uk-scrollspy-class],[class*="uk-animation-"],.uk-invisible{opacity:1!important;visibility:visible!important;animation:none!important;transform:none!important}
.uk-accordion-content,.uk-accordion>*>[hidden],details>*{display:block!important}
.uk-accordion-content[hidden]{display:block!important}
details{display:block!important}
details>summary{list-style:none!important;font-weight:700}
.uk-position-sticky,[uk-sticky]{position:static!important}
.uk-light,.uk-light *{color:#000!important}
/* typografi */
h1,.uk-h1,.uk-heading-small,.uk-heading-medium,.uk-heading-large{font-size:22pt!important;line-height:1.15!important;margin:0 0 8pt!important}
h2,.uk-h2{font-size:15pt!important;margin:14pt 0 5pt!important}
h3,.uk-h3{font-size:12.5pt!important;margin:11pt 0 4pt!important}
h4,.uk-h4,h5,h6{font-size:11pt!important;margin:9pt 0 3pt!important}
h1,h2,h3,h4,h5,h6{break-after:avoid;page-break-after:avoid;color:#000!important}
p,li{orphans:3;widows:3}
p,ul,ol,dl,table{margin:0 0 7pt!important}
li,tr,figure,img,.ya-infografik,.ya-namnlista-grupp{break-inside:avoid;page-break-inside:avoid}
a,a:visited{color:#000!important;text-decoration:underline}
/* skriv ut adressen efter externa länkar i löpande text */
.ya-artikel a[href^="http"]::after,.el-content a[href^="http"]::after{content:" (" attr(href) ")";font-size:8.5pt;word-break:break-all;text-decoration:none;display:inline}
.ya-artikel a[href*="ya27mig"]::after,.el-content a[href*="yrkesakademin.fi"]::after{content:none}
/* bilder och tabeller */
img{max-width:100%!important;height:auto!important}
.el-image,.uk-cover-container img{max-height:70mm!important;width:auto!important;object-fit:contain!important;position:static!important}
.uk-cover-container{height:auto!important;min-height:0!important}
.ya-infografik img{max-width:105mm!important;border:0!important}
table{width:100%!important;border-collapse:collapse!important}
th,td{border:1px solid #999!important;padding:3pt 5pt!important;text-align:left}
/* avsändare överst */
.tm-page::before{content:"Yrkesakademin i Österbotten · yrkesakademin.fi";display:block;font-size:9pt;letter-spacing:.03em;border-bottom:1px solid #000;padding-bottom:4pt;margin-bottom:12pt}
/* namnlistor: alla enheter utfällda, två spalter */
.ya-namnlista details:not([open])>*{display:block!important}
.ya-namnlista ul{columns:2;column-gap:10mm}
}

/* 29. Utskrift av utbildningssidor: faktablad på ett A4 (förslag B).
   Klasserna ya-p-* sätts i YOOtheme-mallarna för Grundexamen, Yrkesexamen, Specialyrkesexamen och Delexamen. */
.ya-p-bara{display:none}
@media print{
.ya-p-nej{display:none!important}
.ya-p-bara{display:block!important}
.ya-p-topp,.ya-p-innehall,.ya-p-topp *,.ya-p-innehall *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
.ya-p-topp a::after,.ya-p-innehall a::after{content:none!important}
.ya-p-topp .ya-ansokan,.ya-p-innehall .ya-ansokan{display:none!important}
/* sidhuvud: examen + namn till vänster, bild till höger */
.ya-p-topp .uk-grid:has(h1){display:grid!important;grid-template-columns:minmax(0,1fr) 58mm;column-gap:8mm;align-items:end;border-bottom:2.5pt solid #2B7C95!important;padding-bottom:4mm!important;margin:0 0 4mm!important}
.ya-p-topp .uk-grid:has(h1)>*{margin:0!important;width:auto!important}
.ya-p-topp .uk-grid:has(h1) img{display:block;width:58mm!important;height:34mm!important;max-height:none!important;object-fit:cover!important;border-radius:3pt}
.ya-p-topp h1{font-size:24pt!important;margin:2pt 0 0!important}
/* faktarutan: fem rutor på rad */
html .ya-p-topp .uk-tile:has(.ya-fakta){margin:0!important;padding:0!important;border:0!important;box-shadow:none!important}
html .ya-p-topp .ya-fakta .uk-grid,html .ya-p-topp .ya-fakta.uk-grid{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr));gap:2mm;margin:0!important}
html .ya-p-topp .ya-fakta .uk-grid>*,html .ya-p-topp .ya-fakta.uk-grid>*{margin:0!important;width:auto!important;padding:2mm 2.5mm!important;background:#E6F2F4!important;border-radius:2pt}
html .ya-p-topp .ya-fakta .uk-grid>*::before,html .ya-p-topp .ya-fakta.uk-grid>*::before{display:none!important}
html .ya-p-topp .ya-fakta .el-title{font-size:7.5pt!important;margin:0!important}
html .ya-p-topp .ya-fakta .el-content{font-size:9pt!important;line-height:1.25!important}
html .ya-p-topp .ya-fakta .ya-fakta-more{display:none!important}
html .ya-p-topp .ya-fakta .ya-fakta-rest,html .ya-p-topp .ya-fakta .ya-fakta-rest[hidden]{display:block!important;font-size:7.5pt!important;margin-top:1pt!important}
/* innehåll: text till vänster, ansökan och kontakt i ruta till höger */
html .ya-p-innehall{padding-top:5mm!important}
.ya-p-innehall .uk-grid:has(.ya-p-oppen){display:grid!important;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);column-gap:7mm;align-items:start;margin:0!important}
.ya-p-innehall .uk-grid:has(.ya-p-oppen)>*{margin:0!important;width:auto!important}
.ya-p-innehall .uk-grid:has(.ya-p-oppen)>:first-child{font-size:9.5pt!important;line-height:1.4!important}
.ya-p-innehall .uk-grid:has(.ya-p-oppen)>:first-child :is(h2,h3){font-size:12pt!important;margin:8pt 0 3pt!important;color:#00566A!important}
.ya-p-innehall .uk-grid:has(.ya-p-oppen)>:first-child :is(p,ul,ol){margin:0 0 5pt!important}
.ya-p-innehall .uk-grid:has(.ya-p-oppen)>:last-child{background:#E6F2F4!important;border-radius:3pt;padding:4mm!important;font-size:9pt!important;line-height:1.35!important}
.ya-p-innehall .uk-grid:has(.ya-p-oppen)>:last-child .uk-tile{padding:0!important;background:none!important}
.ya-p-innehall .uk-grid:has(.ya-p-oppen)>:last-child :is(h2,h3){font-size:10.5pt!important;margin:0 0 3pt!important}
.ya-p-innehall .uk-grid:has(.ya-p-oppen)>:last-child hr{border:0!important;border-top:.6pt solid #8FA6B0!important;margin:3mm 0!important}
.ya-p-innehall .uk-grid:has(.ya-p-oppen)>:last-child :is(p,ul,ol){margin:0 0 4pt!important}
.ya-p-oppen .uk-accordion-title{display:block;padding:0!important;margin:3pt 0 2pt!important;font-size:9.5pt!important;font-weight:700!important}
.ya-p-oppen .uk-accordion-title::before,.ya-p-oppen .uk-accordion-title::after{display:none!important}
.ya-p-oppen .uk-accordion-content{margin:0!important}
.ya-p-innehall .uk-grid:has(.ya-p-oppen)>:last-child .uk-grid{margin:0!important}
.ya-p-innehall .uk-grid:has(.ya-p-oppen)>:last-child .uk-grid>*{padding:0!important;margin:0 0 2.5mm!important}
.ya-p-innehall .uk-grid:has(.ya-p-oppen)>:last-child .el-item{display:flex;gap:3mm;align-items:center}
.ya-p-innehall .uk-grid:has(.ya-p-oppen)>:last-child .el-item>.uk-grid{display:flex!important;gap:3mm;align-items:center}
.ya-p-innehall .uk-grid:has(.ya-p-oppen)>:last-child .el-item>.uk-grid>*{margin:0!important;width:auto!important}
.ya-p-innehall .uk-grid:has(.ya-p-oppen)>:last-child .el-image{width:11mm!important;height:11mm!important;max-height:none!important;object-fit:cover!important;border-radius:50%}
.ya-p-oppen .el-item{display:block!important}
.ya-p-oppen .el-item>*{width:auto!important}
.ya-p-innehall .uk-grid:has(.ya-p-oppen)>:last-child .uk-grid-divider>*{border:0!important}
.ya-p-innehall .uk-grid:has(.ya-p-oppen)>:last-child .uk-grid-divider>*::before{display:none!important}
.ya-p-innehall .uk-grid:has(.ya-p-oppen)>:last-child .el-meta{font-size:8pt!important;line-height:1.2!important;margin:0!important}
.ya-p-innehall .uk-grid:has(.ya-p-oppen)>:last-child .el-content{margin:0!important}
.ya-p-webb{margin:3mm 0 0!important;padding-top:3mm;border-top:.6pt solid #8FA6B0;font-size:8pt!important;line-height:1.35!important}
.ya-p-qrrad{display:flex;gap:3mm;align-items:center;margin-bottom:2.5mm;break-inside:avoid}
.ya-p-qrrad>div:last-child{min-width:0;overflow-wrap:anywhere}
.ya-p-webb strong{display:block}
.ya-p-datum{margin:0!important;font-size:7.5pt!important}
/* av "Läs mer om utbildningen" skrivs bara Antagningskrav och urval ut */
.ya-p-drag{display:block!important;margin:8pt 0 0!important;padding:0!important;list-style:none!important;border:0!important}
.ya-p-drag .el-item{display:none!important}
.ya-p-drag .el-item.ya-p-visa{display:block!important;margin:0!important;padding:0!important;border:0!important}
.ya-p-drag .el-title{display:block;padding:0!important;margin:0 0 3pt!important;font-size:12pt!important;font-weight:700!important;color:#00566A!important;text-decoration:none!important}
.ya-p-drag .el-title::before,.ya-p-drag .el-title::after{display:none!important}
.ya-p-drag .uk-accordion-content{margin:0!important}
.ya-p-innehall .uk-grid:has(.ya-p-oppen)>:first-child .ya-p-drag .uk-accordion-content :is(h2,h3,h4){font-size:10pt!important;margin:6pt 0 2pt!important;color:#000!important}
.ya-p-qr{flex:none;width:20mm;height:20mm;padding:1.5mm;background:#fff!important;border-radius:2pt}
.ya-p-qr[hidden]{display:none!important}
.ya-p-qr svg{display:block;width:100%!important;height:100%!important}
.ya-p-qr svg *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
.ya-p-qr svg rect{fill:#fff!important}
.ya-p-qr svg path{fill:#000!important}
}
/* ==========================================================================
   YA – Bakgrundsmönster för examenskorten (Utbildningar-sektionen)
   Grundexamen / Yrkesexamen / Specialyrkesexamen / Delexamen

   Används på YOOtheme-elementet "Grid" (Examenstyper, kortstil Card Secondary).
   1. Ladda upp SVG-filerna till /images/grafik/bakgrunder/
   2. Ta bort bilderna från de fyra grid-objekten (mönstret ska vara bakgrund, inte bild).
   3. Grid-elementet → Advanced → Classes:  ya-examenkort ya-bg-steg
      (byt ya-bg-steg mot ya-bg-salmiak, ya-bg-vav, ya-bg-facett eller ya-bg-glod
      för de andra alternativen)
   Mönstret ligger bakom texten nere till höger, så vit text behåller samma
   kontrast som idag.
   ========================================================================== */

/* Grid-raden oavsett om klassen hamnar på själva uk-grid eller på ett omslag */
:is(.ya-examenkort.uk-grid, .ya-examenkort .uk-grid) > * > .el-item {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* Kortets innehåll (rubrik, text, länk) läggs ovanför mönstret */
:is(.ya-examenkort.uk-grid, .ya-examenkort .uk-grid) > * > .el-item > * {
  position: relative;
  z-index: 1;
}

/* Mönsterlagret: ett pseudo-element bakom innehållet, påverkar aldrig texten */
:is(.ya-examenkort.uk-grid, .ya-examenkort .uk-grid) > * > .el-item::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: right bottom;
  transition: transform .4s ease;
  transform-origin: right bottom;
}

/* A – Salmiakhörn: salmiakrutor som tonar ut från nedre högra hörnet */
.ya-bg-salmiak .el-item::before {
  background-image: url("/images/grafik/bakgrunder/a-salmiakhorn.svg");
  background-size: 320px auto;
}

/* B – Salmiakväv: diskret rutmönster, bortmaskat uppe till vänster där rubriken står */
.ya-bg-vav .el-item::before {
  background-image: url("/images/grafik/bakgrunder/b-salmiakvav.svg");
  background-repeat: repeat;
  background-position: 0 0;
  background-size: 32px 32px;
  -webkit-mask-image: linear-gradient(135deg, transparent 15%, #000 75%);
          mask-image: linear-gradient(135deg, transparent 15%, #000 75%);
}

/* C – Facetter: turkosa trianglar, samma känsla som headern */
.ya-bg-facett .el-item::before {
  background-image: url("/images/grafik/bakgrunder/c-facetter.svg");
  background-size: cover;
}

/* D – Stegvis: antalet fyllda salmiaker visar examensnivån.
   Korten tas i ordning: 1 Grundexamen, 2 Yrkesexamen, 3 Specialyrkesexamen, 4 Delexamen.
   Byter du ordning på korten i Builder måste siffrorna nedan följa med. */
.ya-bg-steg .el-item::before {
  background-size: 170px auto;
  background-position: right 8px bottom 8px;
}
:is(.ya-bg-steg.uk-grid, .ya-bg-steg .uk-grid) > :nth-child(1) > .el-item::before { background-image: url("/images/grafik/bakgrunder/d-stegvis-grund.svg"); }
:is(.ya-bg-steg.uk-grid, .ya-bg-steg .uk-grid) > :nth-child(2) > .el-item::before { background-image: url("/images/grafik/bakgrunder/d-stegvis-yrkes.svg"); }
:is(.ya-bg-steg.uk-grid, .ya-bg-steg .uk-grid) > :nth-child(3) > .el-item::before { background-image: url("/images/grafik/bakgrunder/d-stegvis-special.svg"); }
:is(.ya-bg-steg.uk-grid, .ya-bg-steg .uk-grid) > :nth-child(4) > .el-item::before { background-image: url("/images/grafik/bakgrunder/d-stegvis-del.svg"); }

/* E – Turkos glöd: ingen bildfil, bara en mjuk ljuskägla i hörnet */
.ya-bg-glod .el-item::before {
  background-image: radial-gradient(circle at 100% 100%, rgba(0,112,127,.55) 0, rgba(0,112,127,0) 65%);
}

/* Liten rörelse när man för musen över kortet (av för den som valt mindre animation) */
.ya-examenkort .el-item:hover::before { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) {
  .ya-examenkort .el-item::before { transition: none; }
  .ya-examenkort .el-item:hover::before { transform: none; }
}

/* Mobil: lite mindre mönster så det inte tar över kortet */
@media (max-width: 639px) {
  .ya-bg-salmiak .el-item::before { background-size: 240px auto; }
  .ya-bg-steg .el-item::before { background-size: 130px auto; }
}
/* ==========================================================================
   YA – Prislista för logi (Prislista • Hinnasto • Pricelist)
 
   Används i YOOtheme: lägg HTML-koden (ya-prislista.html) i ett HTML-element
   och den här CSS:en i Customizer → Advanced → Custom CSS (eller i
   sidans/elementets egen CSS). Allt är avgränsat till klassen .ya-prislista,
   så inget annat på sidan påverkas.
   Färger: YA-turkos #2fb5c2, mörk petrol #00707f, mörkblå text #12212e.
   ========================================================================== */
 
/* Färger och mått samlade på ett ställe – ändra här om profilen ändras */
.ya-prislista {
  --pl-turkos: #2fb5c2;
  --pl-petrol: #00707f;
  --pl-text: #12212e;
  --pl-dämpad: #4b5b68;
  --pl-linje: #e6edf1;
  --pl-ljus: #f5f9fa;
  --pl-markerad: #e0f0f2;
  --pl-radie: 14px;
  color: var(--pl-text);
}
 
/* --- Informationsrutan ovanför tabellen ---------------------------------- */
 
/* Ljus ruta med turkos kant till vänster, två spalter på bred skärm */
.ya-prislista .pl-info {
  margin: 0 0 28px;
  padding: 20px 24px;
  list-style: none;
  background: #fff;
  border: 1px solid var(--pl-linje);
  border-left: 4px solid var(--pl-turkos);
  border-radius: var(--pl-radie);
  columns: 2 300px;
  column-gap: 40px;
}
 
/* Varje punkt får en liten turkos salmiakruta i stället för en rund punkt */
.ya-prislista .pl-info li {
  position: relative;
  padding: 4px 0 4px 22px;
  break-inside: avoid;
  line-height: 1.45;
}
.ya-prislista .pl-info li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .8em;
  width: 7px;
  height: 7px;
  background: var(--pl-turkos);
  transform: rotate(45deg);
}
 
/* Belopp i infotexten (t.ex. 15 €) lyfts fram lite */
.ya-prislista .pl-info strong {
  color: var(--pl-petrol);
  font-weight: 600;
  white-space: nowrap;
}
 
/* --- Själva tabellen ----------------------------------------------------- */
 
/* Omslaget ger rundade hörn, skugga och vågrät rullning på mycket smala skärmar */
.ya-prislista .pl-tabell-wrap {
  overflow-x: auto;
  background: #fff;
  border: 1px solid var(--pl-linje);
  border-radius: var(--pl-radie);
  box-shadow: 0 6px 24px rgba(18, 33, 46, .06);
}
 
.ya-prislista table {
  width: 100%;
  min-width: 420px;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums; /* siffrorna linjerar under varandra */
}
 
/* Rubrikraden: petrol bakgrund, vit text */
.ya-prislista thead th {
  padding: 14px 16px;
  background: var(--pl-petrol);
  color: #fff;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: right;
  white-space: nowrap;
}
.ya-prislista thead th:first-child { text-align: left; }
 
/* Persontecken framför antalet personer i rubriken */
.ya-prislista thead th .pl-ikon {
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-right: 6px;
  vertical-align: -.15em;
  opacity: .85;
}
 
/* Cellerna: luftiga, högerställda priser */
.ya-prislista tbody td,
.ya-prislista tbody th {
  padding: 12px 16px;
  border-top: 1px solid var(--pl-linje);
  text-align: right;
  font-size: 1.05rem;
  white-space: nowrap;
}
 
/* Första spalten (antal nätter) i fetstil och vänsterställd */
.ya-prislista tbody th {
  text-align: left;
  font-weight: 700;
  color: var(--pl-petrol);
}
 
/* Varannan rad får en svag ton så raderna är lätta att följa */
.ya-prislista tbody tr:nth-child(even) { background: var(--pl-ljus); }
 
/* Raden under muspekaren markeras */
.ya-prislista tbody tr:hover { background: var(--pl-markerad); }
 
/* €-tecknet görs mindre och dämpat så att siffran syns först */
.ya-prislista .pl-eur {
  margin-left: 3px;
  font-size: .8em;
  color: var(--pl-dämpad);
}
 
/* Långvistelser (15–20 och 21–31 nätter) skiljs av med en tjockare linje */
 
.ya-prislista tbody tr.pl-lang-start { border-top: 2px solid var(--pl-turkos); }
 
/* Fotnot under tabellen */
.ya-prislista .pl-fotnot {
  margin: 12px 4px 0;
  font-size: .85rem;
  color: var(--pl-dämpad);
}
 
/* --- Mobil ---------------------------------------------------------------- */
 
/* På smala skärmar krymper luft och textstorlek så alla fem spalter ryms */
@media (max-width: 640px) {
  .ya-prislista .pl-info { padding: 16px 18px; }
  .ya-prislista table { min-width: 0; }
  .ya-prislista thead th { padding: 12px 8px; font-size: .7rem; letter-spacing: .03em; }
  .ya-prislista thead th .pl-ikon { display: none; }
  .ya-prislista thead th:first-child { white-space: normal; } /* "Nätter / Nights" får bryta rad */
  .ya-prislista tbody td,
  .ya-prislista tbody th { padding: 10px 8px; font-size: .95rem; }
  .ya-prislista .pl-eur { display: none; } /* € står i fotnoten */
}