/*
Theme Name:   Rotundus
Theme URI:    https://rotundus.se/
Description:  Child-tema till GeneratePress för rotundus.se. Byggt kring en rullande klotrobot: markytan under sidhuvudet visar läsförloppet med ett klot som rullar och roterar. Självhostade typsnitt (Familjen Grotesk och Source Serif 4), automatisk innehållsförteckning i långa guider och stilar för tabeller, länkboxar och vanliga frågor.
Author:       Redaktionen
Template:     generatepress
Version:      1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License:      GNU General Public License v2 or later
Text Domain:  rotundus
*/

/* ---------- Typsnitt (självhostade, SIL Open Font License) ---------- */
@font-face{font-family:"Familjen Grotesk";font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/familjen-grotesk-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Familjen Grotesk";font-style:normal;font-weight:600;font-display:swap;src:url(assets/fonts/familjen-grotesk-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Familjen Grotesk";font-style:normal;font-weight:700;font-display:swap;src:url(assets/fonts/familjen-grotesk-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Source Serif 4";font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/source-serif-4-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Source Serif 4";font-style:italic;font-weight:400;font-display:swap;src:url(assets/fonts/source-serif-4-latin-400-italic.woff2) format("woff2")}
@font-face{font-family:"Source Serif 4";font-style:normal;font-weight:600;font-display:swap;src:url(assets/fonts/source-serif-4-latin-600-normal.woff2) format("woff2")}

/* ---------- Tokens ---------- */
:root{
	--polykarbonat:#E9EFEC;
	--skal:#F7FAF8;
	--grafit:#1C2B2D;
	--grafit-mjuk:#3E4F51;
	--petrol:#0E5C5E;
	--petrol-hover:#0A4648;
	--signal:#F0B323;
	--linje:#C4D0CB;
	--rubrik:"Familjen Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
	--brod:"Source Serif 4",Georgia,"Times New Roman",serif;
	--las:44rem;
	--markyta:26px;
}

/* ---------- Grund ---------- */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body,button,input,select,textarea{font-family:var(--brod)}
body{background:var(--polykarbonat);color:var(--grafit);font-size:1.125rem;line-height:1.72;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4,h5,h6,.main-title,.main-navigation,.site-description,table,.rot-innehall,.internlankar,.site-footer,.menu-toggle,button,input[type=submit],.wpcf7 label{font-family:var(--rubrik)}
h1,h2,h3,h4{color:var(--grafit);font-weight:600;letter-spacing:-.01em;line-height:1.2}
h1{font-size:clamp(2.1rem,1.4rem + 2.6vw,3.25rem);font-weight:700;letter-spacing:-.025em;line-height:1.06;margin-bottom:.6em}
h2{font-size:clamp(1.5rem,1.25rem + 1vw,1.85rem);margin:2.2em 0 .55em}
h3{font-size:1.25rem;margin:1.7em 0 .45em}
h4{font-size:1.05rem}
p{margin-bottom:1.25em}
strong,b{font-weight:600}
a{color:var(--petrol);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover{color:var(--petrol-hover);text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--signal);outline-offset:3px;border-radius:2px}
::selection{background:var(--signal);color:var(--grafit)}
hr{background:var(--linje);height:1px}

/* ---------- Sidhuvud ---------- */
.site-header{background:var(--polykarbonat)}
.inside-header{padding-top:22px;padding-bottom:14px;align-items:center}
.site-branding-container{align-items:center;gap:14px}
.site-logo{margin-right:0!important}
.site-logo .header-image{width:46px;height:46px}
.main-title{font-size:1.6rem;font-weight:700;letter-spacing:-.03em;line-height:1;margin:0}
.main-title a,.main-title a:hover{color:var(--grafit);text-decoration:none}
.site-description{font-size:.92rem;color:var(--grafit-mjuk);margin-top:4px;font-weight:500;line-height:1.25}
.main-navigation,.main-navigation ul ul{background:transparent}
.main-navigation .main-nav ul li a{color:var(--grafit);font-weight:500;font-size:1rem;padding-left:14px;padding-right:14px;line-height:44px;text-decoration:none;position:relative}
.main-navigation .main-nav ul li a:hover,.main-navigation .main-nav ul li[class*=current-menu-] > a{color:var(--petrol);background:transparent}
.main-navigation .main-nav ul li[class*=current-menu-] > a::after{content:"";position:absolute;left:50%;bottom:4px;width:7px;height:7px;margin-left:-3.5px;border-radius:50%;background:var(--signal);box-shadow:0 0 0 1.5px var(--grafit)}
.menu-toggle,.menu-toggle:hover,.menu-toggle:focus{background:transparent;color:var(--grafit)}

@media (max-width:1100px) and (min-width:769px){.main-navigation .main-nav ul li a{padding-left:9px;padding-right:9px;font-size:.95rem}.site-description{display:none}}

/* ---------- Markytan med det rullande klotet ---------- */
.rot-markyta{position:sticky;top:var(--wp-admin--admin-bar--height,0px);z-index:90;height:var(--markyta);background:linear-gradient(to top,var(--grafit) 0,var(--grafit) 2px,var(--polykarbonat) 2px);pointer-events:none}
.rot-markyta-inre{position:relative;height:100%;max-width:1200px;margin:0 auto;padding:0 40px}
.rot-klot{position:absolute;bottom:2px;left:40px;width:22px;height:22px;transform:translateX(var(--x,0px)) rotate(var(--r,0rad));will-change:transform}
.rot-klot svg{display:block;width:100%;height:100%}

/* ---------- Innehållsyta ---------- */
.one-container .site-content,.separate-containers .inside-article{background:var(--skal)}
.one-container .site-content{padding:48px 40px 64px}
.separate-containers .inside-article{padding:48px 40px 64px}
.separate-containers .site-main{margin-top:28px;margin-bottom:28px}
.entry-header,.entry-content > *,.page-header-image-single{max-width:var(--las)}
.entry-content > table,.entry-content > .rot-kort,.entry-content > figure.wp-block-table{max-width:52rem}
.entry-title{max-width:20ch}
.entry-content > p:first-of-type{font-size:1.24rem;line-height:1.62;color:var(--grafit)}
.entry-content h2{scroll-margin-top:calc(var(--markyta) + 24px)}
.entry-content ul,.entry-content ol{margin-left:1.3em}
.entry-content li{margin-bottom:.35em}
.entry-content ul li::marker{color:var(--petrol)}
.entry-content img{border-radius:3px}
.featured-image.page-header-image-single img{border-radius:3px}

/* ---------- Tabeller ---------- */
.entry-content table{border-collapse:collapse;width:100%;margin:1.8em 0 2em;font-size:.94rem;line-height:1.45;border:0;background:transparent}
.entry-content th,.entry-content td{border:0;border-bottom:1px solid var(--linje);padding:10px 12px 10px 0;text-align:left;vertical-align:top}
.entry-content thead th{border-bottom:2px solid var(--grafit);font-weight:600;color:var(--grafit);background:transparent;padding-top:0}
.entry-content tbody tr:hover td{background:rgba(240,179,35,.10)}
.entry-content td:first-child{font-weight:600}
@media (max-width:768px){.entry-content table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}.entry-content th,.entry-content td{min-width:120px}}

/* ---------- Innehållsförteckning ---------- */
.rot-innehall{margin:1.6em 0 2.4em;padding:0 0 0 22px;border-left:2px solid var(--grafit);position:relative}
.rot-innehall::before{content:"";position:absolute;left:-7px;top:0;width:12px;height:12px;border-radius:50%;background:var(--signal);box-shadow:0 0 0 1.5px var(--grafit)}
.rot-innehall-rubrik{font-weight:600;font-size:1.05rem;margin:0 0 .4em;line-height:1}
.rot-innehall ul{list-style:none;margin:0;padding:0;columns:2;column-gap:28px}
.rot-innehall li{margin:0 0 .3em;font-size:.97rem;line-height:1.35;break-inside:avoid}
.rot-innehall a{text-decoration:none;color:var(--petrol)}
.rot-innehall a:hover{text-decoration:underline}
@media (max-width:640px){.rot-innehall ul{columns:1}}

/* ---------- Internlänkbox ---------- */
.internlankar{margin:3em 0 1.5em;padding:20px 0 4px;border-top:2px solid var(--grafit);background:transparent;border-radius:0}
.internlankar h2{font-size:1.2rem;margin:0 0 .7em}
.internlankar ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 10px}
.internlankar li{margin:0}
.internlankar a{display:inline-block;padding:7px 14px 7px 30px;border:1.5px solid var(--grafit);border-radius:999px;text-decoration:none;color:var(--grafit);font-weight:500;font-size:.97rem;line-height:1.3;position:relative;background:var(--skal)}
.internlankar a::before{content:"";position:absolute;left:11px;top:50%;width:10px;height:10px;margin-top:-5px;border-radius:50%;background:var(--signal);box-shadow:0 0 0 1.5px var(--grafit)}
.internlankar a:hover{background:var(--grafit);color:var(--skal)}

/* ---------- Guidelistan på startsidan ---------- */
.internlankar.rot-kort{border-top:0;padding:0;margin:2.2em 0 1em}
.internlankar.rot-kort h2{font-size:1.5rem;margin-bottom:.4em}
.internlankar.rot-kort ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 36px;border-top:1px solid var(--linje)}
.internlankar.rot-kort li{background:none;border:0;border-bottom:1px solid var(--linje);border-radius:0;padding:16px 0 16px 34px;position:relative}
.internlankar.rot-kort li::before{content:"";position:absolute;left:0;top:21px;width:20px;height:20px;border-radius:50%;background:var(--signal);box-shadow:inset 0 0 0 1.5px var(--grafit)}
.internlankar.rot-kort li::after{content:"";position:absolute;left:9.25px;top:31px;width:1.5px;height:7px;background:var(--grafit);transform:rotate(-22deg);transform-origin:50% 0}
.internlankar.rot-kort a{display:inline;padding:0;border:0;border-radius:0;background:none;font-size:1.18rem;font-weight:600;color:var(--grafit);text-decoration:none}
.internlankar.rot-kort a::before{display:none}
.internlankar.rot-kort a:hover{background:none;color:var(--petrol);text-decoration:underline}
.internlankar.rot-kort li span{display:block;margin-top:3px;font-family:var(--brod);font-size:1rem;line-height:1.5;color:var(--grafit-mjuk)}
@media (max-width:700px){.internlankar.rot-kort ul{grid-template-columns:1fr}}

/* ---------- Startsidan ---------- */
.home .entry-title{font-size:clamp(2.4rem,1.5rem + 3.4vw,4rem);max-width:14ch}

/* ---------- Kontaktformulär ---------- */
.wpcf7 label{font-weight:500;font-size:1rem;display:block}
.wpcf7 input[type=text],.wpcf7 input[type=email],.wpcf7 textarea{width:100%;max-width:32rem;background:#fff;border:1.5px solid var(--linje);border-radius:4px;padding:10px 12px;color:var(--grafit);font-family:var(--brod);font-size:1.05rem}
.wpcf7 input:focus,.wpcf7 textarea:focus{border-color:var(--petrol);outline:none;box-shadow:0 0 0 3px rgba(14,92,94,.18)}
.wpcf7 input[type=submit],button,html input[type=button],input[type=reset]{background:var(--grafit);color:var(--skal);border-radius:999px;padding:11px 26px;font-weight:600;font-size:1rem}
.wpcf7 input[type=submit]:hover,button:hover{background:var(--petrol);color:#fff}

/* ---------- Sidfot ---------- */
.site-footer,.footer-widgets,.site-info{background:var(--grafit);color:#D7E0DC}
.footer-widgets{border-top:0}
.inside-footer-widgets{padding:52px 40px 28px}
.footer-widgets .widget-title{color:#fff;font-size:1.05rem;font-weight:600}
.footer-widgets a,.site-info a{color:#fff;text-decoration:none}
.footer-widgets a:hover,.site-info a:hover{color:var(--signal);text-decoration:underline}
.footer-widgets ul li{margin-bottom:.4em;font-size:.98rem}
.footer-widgets .menu{columns:2;column-gap:32px;max-width:30rem}
.footer-widgets .menu li{break-inside:avoid}
.site-info{border-top:1px solid #34474A;font-size:.92rem}
.inside-site-info{padding:18px 40px 26px}
.rot-sidfot{display:flex;align-items:center;gap:12px}
.rot-sidfot svg{width:26px;height:26px;flex:0 0 26px}

/* ---------- Mobil ---------- */
@media (max-width:768px){
	body{font-size:1.075rem}
	.inside-header{padding:16px 16px 10px}
	.site-logo .header-image{width:38px;height:38px}
	.main-title{font-size:1.35rem}
	.site-description{display:none}
	.rot-markyta-inre{padding:0 16px}
	.rot-klot{left:16px}
	.one-container .site-content,.separate-containers .inside-article{padding:30px 18px 44px}
	.separate-containers .site-main{margin:0}
	.entry-content > p:first-of-type{font-size:1.14rem}
	.inside-footer-widgets{padding:36px 18px 20px}
	.inside-site-info{padding:16px 18px 22px}
}
@media print{.rot-markyta,.rot-innehall,.internlankar{display:none}}