/* Ekebys öppettider: meddelandefält, tabell och avvikelselista. Använder temats variabler med fallback. */

/* ---------- Meddelandefält ---------- */
.ekeby-meddelande { --_bg: var(--dis, #f1eefa); --_fg: var(--natt, #170d44); --_ak: var(--violett, #381d92);
  display: block; width: 100%; box-sizing: border-box; background: var(--_bg); color: var(--_fg);
  font-family: var(--brod, "Mulish", system-ui, sans-serif); font-size: 1rem; line-height: 1.5; position: relative; z-index: 60; }
.ekeby-meddelande[hidden] { display: none; }
.ekeby-meddelande--info { border-bottom: 3px solid var(--violett, #381d92); box-shadow: inset 6px 0 0 var(--violett, #381d92); }
.ekeby-meddelande--varning { --_bg: var(--solnedgang, #f6a94b); --_fg: var(--natt, #170d44); --_ak: var(--natt, #170d44); border-bottom: 3px solid var(--solnedgang-mork, #b9650c); }
.ekeby-meddelande--stangt { --_bg: var(--natt, #170d44); --_fg: #fff; --_ak: var(--solnedgang, #f6a94b); border-bottom: 4px solid var(--solnedgang, #f6a94b); }
.ekeby-meddelande__inner { box-sizing: border-box; max-width: var(--max, 1200px); margin-inline: auto; padding: 14px clamp(16px, 4vw, 32px);
  display: flex; align-items: flex-start; gap: 14px; }
.ekeby-meddelande__ikon { flex: none; margin-top: 2px; color: var(--_ak); }
.ekeby-meddelande--varning .ekeby-meddelande__ikon { color: var(--natt, #170d44); }
.ekeby-meddelande__body { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.ekeby-meddelande p { margin: 0; }
.ekeby-meddelande__rubrik { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.ekeby-meddelande__rubrik strong { font-family: var(--rubrik, "Bricolage Grotesque", "Mulish", system-ui, sans-serif); font-size: 1.15rem; font-weight: 700; letter-spacing: -.01em; }
.ekeby-meddelande__typ { display: inline-block; padding: 1px 10px; border-radius: 999px; font-size: .875rem; font-weight: 800; line-height: 1.5;
  background: var(--violett, #381d92); color: #fff; }
.ekeby-meddelande--varning .ekeby-meddelande__typ { background: var(--natt, #170d44); color: #fff; }
.ekeby-meddelande--stangt .ekeby-meddelande__typ { background: var(--solnedgang, #f6a94b); color: var(--natt, #170d44); }
.ekeby-meddelande__text { margin-top: 4px; max-width: 70ch; }
.ekeby-meddelande__lank { margin-top: 6px; font-weight: 700; }
.ekeby-meddelande__lank a { color: var(--_ak); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; }
.ekeby-meddelande__lank a:hover { text-decoration-thickness: 4px; }
.ekeby-meddelande a:focus-visible, .ekeby-meddelande__stang:focus-visible { outline: 3px solid var(--_ak); outline-offset: 3px; border-radius: 4px; }
.ekeby-meddelande--varning a:focus-visible, .ekeby-meddelande--varning .ekeby-meddelande__stang:focus-visible { outline-color: var(--natt, #170d44); }
.ekeby-meddelande__stang { flex: none; display: inline-flex; align-items: center; gap: 8px; min-width: 44px; min-height: 44px; padding: 0 14px; margin: -4px 0;
  font: inherit; font-weight: 700; color: inherit; background: transparent; border: 2px solid currentColor; border-radius: 999px; cursor: pointer;
  transition: background-color .2s var(--ease-ut, ease-out); }
.ekeby-meddelande__stang[hidden] { display: none; }
.ekeby-meddelande__stang:hover { background: color-mix(in srgb, currentColor 14%, transparent); }
@media (max-width: 520px) {
  .ekeby-meddelande__inner { gap: 10px; }
  .ekeby-meddelande__stang { padding: 0; justify-content: center; width: 44px; }
  .ekeby-meddelande__stang span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (prefers-reduced-motion: no-preference) {
  .ekeby-meddelande { animation: ekeby-in .45s var(--ease-ut, cubic-bezier(.25, 1, .5, 1)) both; }
  @keyframes ekeby-in { from { transform: translateY(-10px); } to { transform: none; } }
}

/* ---------- Öppettidstabell ---------- */
.wp-block-ekeby-oppettider .hours table { width: 100%; border-collapse: collapse; }
.wp-block-ekeby-oppettider .hours caption { text-align: left; }
/* Raderna ritas på tr (färg från tabellen), så att dämpade celler (.na) inte gör linjen svag */
.wp-block-ekeby-oppettider .hours tr { border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent); }
.wp-block-ekeby-oppettider .hours tr:last-child { border-bottom: 1px solid color-mix(in srgb, currentColor 22%, transparent); }
.wp-block-ekeby-oppettider .hours td { border: 0; }
.wp-block-ekeby-oppettider .hours td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.wp-block-ekeby-oppettider .hours tr.is-today td { font-weight: 700; color: var(--violett, #381d92); }
.on-dark .wp-block-ekeby-oppettider .hours tr.is-today td, .boka .wp-block-ekeby-oppettider .hours tr.is-today td { color: var(--solnedgang, #f6a94b); }
.hours .ekeby-avv-tid { font-weight: 700; display: block; }
.hours .ekeby-avv-not { display: block; font-size: .85em; font-weight: 400; opacity: .92; }
.hours tr.ekeby-avviker td:last-child { padding-left: 12px; }
.ekeby-avvikelser { margin-top: 20px; font-size: 1rem; }
.ekeby-avvikelser__rubrik { margin: 0 0 8px; font-family: var(--rubrik, "Bricolage Grotesque", system-ui, sans-serif); font-weight: 700; font-size: 1.15rem; }
.ekeby-avvikelser ul { list-style: none; margin: 0; padding: 0; }
.ekeby-avvikelser li { padding: 8px 0; border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent); overflow-wrap: anywhere; }
.ekeby-avvikelser__datum { font-weight: 700; margin-right: 6px; }
.ekeby-avvikelser__not { display: block; opacity: .92; }

/* Dämpad "Stängt"-cell: mörk på ljus bakgrund (temats ljusa ton gäller bara på mörkt) */
.wp-block-ekeby-oppettider .hours .na { color: #5a5280; }
.on-dark .wp-block-ekeby-oppettider .hours .na, .boka .wp-block-ekeby-oppettider .hours .na { color: #b9b0da; }

/* Mallens sidhuvud ligger i en omslutande div som är lika hög som sidhuvudet, så position: sticky på .top
   hade aldrig något att "klistra" mot. Låt omslaget försvinna ur layouten så att sidhuvudet fäster mot sidan,
   medan meddelandefältet ovanför scrollar bort. */
.wp-block-template-part:has(> .top, > .ekeby-meddelande) { display: contents; }