/**
 * Variabler
 */
/* @link https://utopia.fyi/type/calculator?c=480,16,1.2,1240,18,1.333,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

:root {
  --fs-body-xs: clamp(0.6331rem, 0.7332rem + -0.1291vw, 0.6944rem);
  --fs-body-s: clamp(0.8333rem, 0.8266rem + 0.0224vw, 0.844rem);
  --fs-body: clamp(1rem, 0.9211rem + 0.2632vw, 1.125rem);
  --fs-4: clamp(1.2rem, 1.0108rem + 0.6308vw, 1.4996rem);
  --fs-3: clamp(1.44rem, 1.0869rem + 1.1768vw, 1.999rem);
  --fs-2: clamp(1.728rem, 1.1364rem + 1.9719vw, 2.6647rem);
  --fs-1: clamp(2.0736rem, 1.1399rem + 3.1124vw, 3.552rem);
  --fs-xl: clamp(2.4883rem, 1.0695rem + 4.7295vw, 4.7348rem);
}

/* @link https://utopia.fyi/space/calculator?c=480,16,1.2,1240,18,1.333,5,2,&s=0.75,1.5|2|3|4|6|8|10,s-xl|xl-3xl|2xl-4xl|3xl-5xl|m-xl&g=s,l,xl,NaN */

:root {
  --space-xs: clamp(0.75rem, 0.6711rem + 0.2632vw, 0.875rem);
  --space-s: clamp(1rem, 0.9211rem + 0.2632vw, 1.125rem);
  --space-m: clamp(1.5rem, 1.3816rem + 0.3947vw, 1.6875rem);
  --space-l: clamp(2rem, 1.8421rem + 0.5263vw, 2.25rem);
  --space-xl: clamp(3rem, 2.7632rem + 0.7895vw, 3.375rem);
  --space-2xl: clamp(4rem, 3.6842rem + 1.0526vw, 4.5rem);
  --space-3xl: clamp(6rem, 5.5263rem + 1.5789vw, 6.75rem);
  --space-4xl: clamp(8rem, 7.3684rem + 2.1053vw, 9rem);
  --space-5xl: clamp(10rem, 9.2105rem + 2.6316vw, 11.25rem);

  /* One-up pairs */
  --space-xs-s: clamp(0.75rem, 0.5132rem + 0.7895vw, 1.125rem);
  --space-s-m: clamp(1rem, 0.5658rem + 1.4474vw, 1.6875rem);
  --space-m-l: clamp(1.5rem, 1.0263rem + 1.5789vw, 2.25rem);
  --space-l-xl: clamp(2rem, 1.1316rem + 2.8947vw, 3.375rem);
  --space-xl-2xl: clamp(3rem, 2.0526rem + 3.1579vw, 4.5rem);
  --space-2xl-3xl: clamp(4rem, 2.2632rem + 5.7895vw, 6.75rem);
  --space-3xl-4xl: clamp(6rem, 4.1053rem + 6.3158vw, 9rem);
  --space-4xl-5xl: clamp(8rem, 5.9474rem + 6.8421vw, 11.25rem);

  /* Custom pairs */
  --space-s-xl: clamp(1rem, -0.5rem + 5vw, 3.375rem);
  --space-m-xl: clamp(1.5rem, 0.3158rem + 3.9474vw, 3.375rem);
  --space-xl-3xl: clamp(3rem, 0.6316rem + 7.8947vw, 6.75rem);
  --space-2xl-4xl: clamp(4rem, 0.8421rem + 10.5263vw, 9rem);
  --space-3xl-5xl: clamp(6rem, 2.6842rem + 11.0526vw, 11.25rem);
}

:root{
	--border-radius: 0.625rem;	
}

/**
 * Tema tweaks
 */

/* Sidhuvudet*/
.site-header{
	padding-inline: clamp(1rem, 0.848rem + 0.758vw, 1.5rem);
}

/* Text */
:is(h1, h2, h3, h4, h5, h6), .balance{
	text-wrap: balance;
}

p, blockquote, li{
	text-wrap: pretty;
}

p:last-child:last-of-type{
	margin-bottom: 0;
}

/*
 * Utlities 
 */

/* Radbegränsningar */
.line-limit-3, .line-limit-2{
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.line-limit-3{
	-webkit-line-clamp: 3;
}

.line-limit-2{
	-webkit-line-clamp: 2;
}

/* Visuellt dold */
.visually-hidden:not(:focus):not(:active){
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.sr-only{
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
}

/* Transition */
.transition{
	transition: all .25s ease-in-out;
}

/* GP Menu Tillgänglighets hack */
#site-navigation ul.sub-menu{
	display: block;
}

#site-navigation li:hover .gp-icon svg{
	transform: rotate(180deg);
}

#site-navigation li:hover .sub-menu{
	visibility: visible;
}

/* Stretch link */
.stretch-link{
	position: relative;
}

.stretch-link a::after{
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}
.stretch-link a:is(:focus-visible)::after{
	outline: 2px solid;
}

.stretch-link a:is(:hover, :focus){
	outline: none;
}

.sr-only:not(:focus):not(:active) {
  clip: rect(0 0 0 0); 
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap; 
  width: 1px;
}

/**
 * Search modal 
 */
.search-modal-fields {
    position: relative;
}

.search-suggestions {
    position: absolute;
    top: calc(100% - 6px);
    left: 0;
    right: 0;
    background: #fff;
    z-index: 9999;
    max-height: 250px;
    overflow-y: auto;
	border-radius: 0 0 6px 6px;
}

.suggestion-item {
    display: block;
    padding: 8px 12px;
    text-decoration: none;
    color: #333;
    font-size: 14px;
}

.suggestion-item:hover {
    background-color: #f0f0f0;
}

.suggestion-item .post-type {
    color: #999;
    font-style: italic;
    margin-left: 4px;
}

.suggestion-item.active {
    background-color: #e5f3ff;
}