/* --- Container --- */
.container{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* --- Header --- */
.site-header{
  border-bottom: 1px solid var(--rule);
  padding: 14px 0 8px;
}

/* Rad som håller titel + klocka */
.header-row{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--gutter);
}

/* Vänstersidan: titel + nav */
.header-left{
  flex: 1;
}

/* Höger sida: klocka */
.header-right{
  text-align: right;
}

/* Sajttitel */
.site-title{
  display: inline-block;
  font-size: clamp(52px, 6vw, 72px);
  letter-spacing: 0.02em;
  color: var(--BlackanOrange);
  text-decoration: none;
}


/* Navigation */
.site-nav{
  margin-top: 8px;
  position: relative;
}

/* A11y: skip link */
.skip-link{
  position: absolute;
  left: -9999px;
  top: -9999px;
  padding: 10px 12px;
  background: var(--BlackanVitt);
  color: var(--BlackanSvart);
  border-radius: 10px;
}
.skip-link:focus{
  left: 0;
  top: 0;
  z-index: 9999;
}

/* Mobil: utfällbar meny */
.nav-details{
  display: block;
}

.nav-summary{
  list-style: none;
  cursor: pointer;
  user-select: none;
  padding: 10px 12px;
  border-radius: 10px;
  color: rgba(255,255,255,0.82);
}
.nav-summary::-webkit-details-marker{ display:none; }

.nav-summary:focus-visible{
  outline: 2px solid var(--BlackanOrange);
  outline-offset: 2px;
}

.nav-summary-icon{
  margin-left: 8px;
  opacity: 0.8;
}

.nav-list{
  margin: 10px 0 0;
  padding: 8px 0 0;
  list-style: none;
  border-top: 1px solid rgba(255,255,255,0.12);
}

.nav-list a{
  display: block;
  padding: 12px 12px;
  border-radius: 10px;
  text-decoration: none;
  color: rgba(255,255,255,0.82);
}

.nav-list a:hover{
  background: rgba(255,255,255,0.06);
}

.nav-list a:focus-visible{
  outline: 2px solid var(--BlackanOrange);
  outline-offset: 2px;
}

.nav-list a[aria-current="page"]{
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Desktop: horisontell meny */
@media (min-width: 720px){
  .nav-summary{ display: none; }

  .nav-list{
    display: flex;
    gap: 22px;
    margin: 8px 0 0;
    padding: 0;
    border-top: 0;
  }

  .nav-list a{
    display: inline-block;
    padding: 6px 0;
    border-radius: 0;
    background: none;
  }

  .nav-list a:hover{
    background: none;
    text-decoration: underline;
  }
}


/* Lokal klocka */
.local-clock{
  font-size: var(--base);
  font-weight: 700;
  white-space: nowrap;
}


/* Utility */
.muted{ color: var(--muted); }


/* --- Main layout --- */
.site-main{ padding: 28px 0 40px; }

.layout{
  display: grid;
  gap: var(--gutter);
  align-items: start;
  grid-template-columns: 1fr; /* Mobile: 1 kolumn */
}

/* News wrapper */
.news{
  display: grid;
  gap: var(--gutter);
  grid-template-columns: 1fr; /* Default: 1 nyhetskolumn (mobil + tablet) */
}

/* Tablet: 2 kolumner total (news + sidebar) */
@media (min-width: 860px){
  .layout{
    grid-template-columns: 1fr 320px;
  }
  /* Håll sidebaren uppe (inte "neddriftad" av auto-placering) */
  .sidebar{
    grid-column: 2;
    grid-row: 1;
    align-self: start;
  }
}



/* Tablet/halvbred: håll vädret i vänsterkolumnen (inte under sidebaren) */
@media (min-width: 860px) and (max-width: 1199px){
  .clock-section{ grid-column: 1; grid-row: 1; }
  .sidebar{ grid-column: 2; grid-row: 1; }
  .metro-board{ grid-column: 1; grid-row: 2; }
  .metro-disclaimer{ grid-column: 1; grid-row: 2; }
  .weather-block{ grid-column: 1; grid-row: 3; }
  .news{ grid-column: 1; grid-row: 4; }
}

/* Desktop: 3 kolumner total (news split i två + sidebar) */
@media (min-width: 1200px){
  .layout{
    grid-template-columns: 1fr 1fr 320px;
  }
  .sidebar{
    grid-column: 3;
    grid-row: 1;
    align-self: start;
  }
  .layout > .section-title{
    grid-column: 1 / span 2;
  }
  /* Varje news-col blir varsin spalt */
  .news{
    grid-template-columns: 1fr 1fr;
    grid-column: 1 / span 2; /* tar två vänsterkolumner */
  }
  .metro-board{
    grid-column: 1 / span 2;
  }
  .metro-disclaimer{
    grid-column: 1 / span 2;
  }

/* Desktop: place clock + weather side by side above metro */
.clock-section{
  grid-column: 1;
  grid-row: 1;
}
.weather-block{
  grid-column: 2;
  grid-row: 1;
}
.metro-board{
  grid-column: 1 / span 2;
  grid-row: 2;
}
.metro-disclaimer{
  grid-column: 1 / span 2;
  grid-row: 2;
}
.news{
  grid-column: 1 / span 2;
  grid-row: 3;
}
}

/* För läsbar radlängd i spalter (tweaka fritt) */
.news-col{
  max-width: 42ch;
}

/* --- Sidor med långtext (t.ex. om.html, kontakt.html) --- */
.page-content{
  /* Samma rytm som övriga sektioner */
  margin: 0 0 24px;
}

/* Desktop: låt sidans innehåll ta två kolumner (som “huvudområdet” på start) */
@media (min-width: 1200px){
  .page-content{
    grid-column: 1 / span 2;
    grid-row: 1;
  }
}

/* --- Typografi / sektioner --- */
.section-title,
.side-title{
  font-weight: 700;
  margin: 0 0 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rule);
}

.section-title{ font-size: 22px; }

/* Behåll större rubrik i nyhetsblocket */
.news .section-title{ font-size: 32px; }
.side-title{ font-size: 20px; }


/* --- Top area: less “rule lines” (as per sketch) --- */
.clock-section .section-title,
.weather-block .section-title,
.sidebar .side-title{
  border-bottom: none;
  padding-bottom: 0;
}
.clock-section .section-title,
.weather-block .section-title{
  margin-bottom: 10px;
}

/* --- Stories --- */
.story{
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--rule);
}
.story:last-child{
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}
.story-title{
  margin: 0 0 6px;
  font-size: 20px;
  line-height: 1.2;
  font-weight: 700;
}
.story-date{
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 14px;
}
.story-lead{ margin: 0; }

/* --- Sidebar --- */
.sidebar{
  border-left: 1px solid var(--sidebar-border);
  padding-left: var(--gutter);
}
@media (max-width: 859px){
  /* När sidebar hamnar under: ingen vertikal linje */
  .sidebar{
    border-left: none;
    padding-left: 0;
    border-top: 1px solid var(--rule);
    padding-top: 22px;
  }
}

.side-block{ margin-bottom: 26px; }

.calendar{
  list-style: none;
  padding: 0;
  margin: 0;
}
.calendar-item{
  margin-bottom: 14px;
}
.calendar-date{
  display: block;
  font-weight: 700;
  margin-bottom: 2px;
}
.calendar-text{
  display: block;
}

.notice p{
  margin: 0 0 12px;
}
.notice p:last-child{ margin-bottom: 0; }

/* Tips-box (enkel, “tråkig” ruta) */
.tipbox{
  border: 1px solid var(--rule);
  padding: 16px;
}
.tipbox-text{ margin: 0 0 10px; }
.tipbox-email{ margin: 0; }

/* --- Footer --- */
.site-footer{
  border-top: 1px solid var(--rule);
  padding: 22px 0;
  color: var(--muted);
  font-size: 14px;
}
.site-footer p{ margin: 6px 0; }
.site-footer a{ color: inherit; }


/* --- Tunnelbana (metro board) --- */
.metro-board{
  margin: 0 0 24px;
}

/* Två rutor som blir en kolumn på smalt, två på bredare */
.metro-board__grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gutter);
  margin-top: 12px;
}

@media (min-width: 900px){
  .metro-board__grid{
    grid-template-columns: 1fr 1fr;
  }
}

.metro-card__title{
  margin: 0 0 10px;
  font-size: 18px;
}

.metro-list{
  list-style: none;
  padding: 0;
  margin: 0;
}

.metro-list li{
  padding: 8px 0;
  border-top: 1px solid var(--rule);
}

.metro-list li:first-child{
  border-top: 0;
}

.metro-line{
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.metro-line__left{
  min-width: 0;
}

.metro-line__dest{
  font-weight: 700;
}

.metro-line__when{
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.metro-board__meta{
  margin-top: 10px;
  font-size: 14px;
}
.metro-notice{
  margin: 8px 0 12px;
  padding: 8px 12px;
  border-left: 3px solid #c00;
  background: #fafafa;
  font-weight: 700;
}

.metro-notice.hidden{
  display: none;
}

.clock-section{
  margin: 0 0 24px;
}

.clock-line{
  margin: 10px 0 0;
  font-weight: 700;
}


/* Desktop: störningsrad ska ta båda vänsterkolumnerna */
@media (min-width: 1200px){
  .metro-notice{
    grid-column: 1 / span 2;
  }
  .clock-section{
    grid-column: 1 / span 2;
  }
}
.metro-disclaimer{
  margin-top: 8px;
  font-size: 13px;
  color: var(--muted);
  max-width: 60ch;
}