:root {
  --bg-dark: hsl(0 80% 91%);
  --bg: hsl(0 80% 96%);
  --bg-light: hsl(0 80% 99.5%);
  --text: hsl(359 57% 5%);
  --text-muted: hsl(1 14% 30%);
  --highlight: hsl(0 100% 100%);
  --primary: hsl(0, 80%, 45%);
  --secondary: hsl(90, 80%, 45%);
  --blue:hsl(230.96deg 61.86% 46.27%);
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;
    --font-size-sm: 0.8rem;
    --font-size-base:1rem;
    --font-size-h3: clamp(1.6rem, 4vw, 2rem);
    --font-size-h5: clamp(1.3rem, 4vw, 1.6rem);
    --line-height: 1.5;
    --font-family: "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --border-radius-xsm: 0.7rem;
    --border-radius-sm: 1rem;
    --border-radius: 2rem;
    --border-width: 1px;
    --border:1px solid var(--bg-dark);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 12px 12px rgba(0, 0, 0, 0.15);
  --shadow-cb: 0px 4px 4px #00000030, 0px 12px 12px #00000015;
  }
  *,
  *::before,
  *::after {box-sizing: border-box;margin: 0;padding: 0;vertical-align: middle;position: relative;}
  html {box-sizing: border-box;scroll-behavior: smooth;overflow-y: scroll;}
  
  body {font-family: var(--font-family);background: var(--bg);color: var(--text);font-size: var(--font-size-base);line-height: var(--line-height);-webkit-font-smoothing: antialiased;}
  h1, h2, h3, h4, h5, h6 {font-weight: 700;color: var(--text);}
  h3 {font-size: var(--font-size-h3);}
  h5 {font-size: var(--font-size-h5);}
  a {text-decoration: none;color: inherit;}
  input,select,textarea {all:unset;display: flex;align-items: center;border-radius: var(--border-radius);padding: 0 var(--spacing-sm);font-family: inherit;font-size: var(--font-size-base);width: 100%;height: 2.7rem;transition: box-shadow var(--transition);background: var(--bg-light);cursor: text;border:var(--border);border-top:1px solid var(--highlight);min-height: 3rem;block-size: 100%;box-sizing: border-box;position: relative;}
  input:focus,select:focus,textarea:focus {background:var(--highlight);} 
  select {width:clamp(6.5rem, 15vw, 200px);}
  sup, sub {color:var(--text-muted);font-size: var(--font-size-sm);}
  sub {display: flex;gap:var(--spacing-xs) var(--spacing-sm);margin-block-start: var(--spacing-xs);flex-wrap: wrap;font-size: var(--font-size-base);}

.visually-hidden {position: absolute !important;width: 1px !important; height: 1px !important;padding: 0 !important;margin: -1px !important;overflow: hidden !important;clip: rect(0, 0, 0, 0) !important;white-space: nowrap !important;border: 0 !important;}
.hidden {display: none;}
  
.container {max-width: 1200px;margin: 0 auto;padding: var(--spacing-sm);}

.meny {position: absolute;top: var(--spacing-sm);right: var(--spacing-sm);z-index: 99;display: inline-flex;align-items: center;gap: var(--spacing-xs);}  
.extranav {display: grid;grid-template-columns: 1fr fit-content(35%) fit-content(23%);gap: 0.4rem;margin:var(--spacing-sm) 0 var(--spacing-sm) 0;justify-content: space-between;}
  
.tophead {display:flex;gap: var(--spacing-lg);flex-wrap: wrap;}
.logo {color: var(--blue);font-weight: 700;font-size: 1.4rem;display: inline-flex;flex-direction: column;}
.logo img {width: 100%;max-width: 120px;object-fit: contain;}
 
.activity-card {background: var(--bg-light);border-radius: var(--border-radius-sm);display: flex;flex-wrap: wrap;transition: box-shadow var(--transition);z-index: 1;margin:1rem 0;border:var(--border);border-top:1px solid var(--highlight);}
.activity-content {padding:clamp(1rem, 3vw, 1.3rem) clamp(1rem, 3vw, 2rem);display: inline-flex;flex-wrap: wrap;flex: 1; gap:clamp(var(--spacing-sm),5vw,var(--spacing-lg));align-items: stretch;}
.activity-date {display: inline-flex;align-items: center;flex-direction: column;text-align: center;flex-shrink: 0;}
.activity-date .month {margin-block-start:var(--spacing-xs);color:var(--text-muted);}
.activity-card.cancel {border: 0.2rem solid var(--primary);}
.activity-info {flex: 1; padding: 0;min-width: 0;flex-direction: column;display: inline-flex;}
.activity-info p {margin: 0.3125rem 0 0;font-size: 0.9rem;color: var(--text-muted);}
.activity-title {display: flex;justify-content: space-between;flex-direction: column;font-size:1.2rem;min-height:clamp(39px,6vw,48px);}
.activity-title a {font-weight: 700;}
.activity-time {display: none;  /* Dold på mobil */}

.show-time {display: inline-flex;  /* Synlig på mobil */}
.search-wrapper {display: flex;flex-direction: column;} 
.searchbox svg {position: absolute;left:1rem; }
.searchbox {display: inline-flex;align-items: center;}
.searchbox input {padding-left: 3rem;flex: 0 1 18rem;}
#search-live-region {padding-left:1rem;font-size: var(--font-size-sm);}
.select {height: fit-content;}
.select select {background: transparent;border: 0;}
.select svg {position: absolute;top: 50%;right: 5%;transform: translateY(-50%);cursor: pointer;width: 1.5rem;height: 1.5rem;}


.extra {flex: 1 1 100%;background:var(--bg);border-radius: 0 0 var(--border-radius-sm) var(--border-radius-sm);padding: 0.6rem 1rem;display: inline-flex;flex-direction: row;  /* Horisontell på mobil */justify-content: space-between;align-items: center;}
  
.anmal {display: flex;flex-direction: column;align-items: center;gap: 0.5rem;}
.anmal i {font-size: var(--font-size-sm);}
.anmal .btn-main {background:var(--primary);color: var(--highlight);padding: 0.2rem 1rem;}
.anmal .btn-main {transition: .3s;border: none;}

.pinned-box {position: absolute;top: -0.3rem;right: -0.5rem;font-size: 0.6rem;color: var(--primary);z-index: 2;} 
.pinned-sign {display: inline-flex;flex-direction: row-reverse;align-items: center;}
.pinned-sign svg {transform: rotate(45deg);font-variation-settings: 'FILL' 1;}

.cancel-box {position: absolute;overflow: hidden;top: 0;left: 0;width: 5rem;height: 4rem;border-radius: 0;}
.cancel-sign {position: absolute;top: 0.5rem;left: -2.1rem;background: var(--primary);color: var(--highlight);border-radius: 0.25rem;padding: 0.1rem 2rem;transform: rotate(-41deg);z-index: 99;}

.forward {cursor: pointer;border-radius: var(--border-radius-xsm);display: flex;justify-content: center;align-items: center;padding: 0.3rem;background: var(--bg);width: fit-content;top: -0.3rem;right: 0;transition: var(--transition);outline: 0.3rem solid transparent;border:var(--border);border-top:1px solid var(--highlight);}
.action-icon {border-radius: 50%;cursor: pointer;outline: none;padding: 0.375rem;transition: var(--transition);width: fit-content;display: inline-flex;align-items: center;justify-content: center;}
.fxIcon {display: inline-flex;gap: 0.3rem;align-items: center;}
.extra-nav {position: absolute;right: 0;top: 0.3rem;display: flex;gap: 0.5rem;flex-direction: column-reverse;align-items: center;}