/* ==========================================================================
   Ånn – Nordic theme layer
   Loaded after main.css. Keeps the photography as the hero and gives the
   chrome a calm, crisp look: frosted "snow" panels, pine green, fjäll slate
   and the cloudberry orange from the logo ring as accent.
   ========================================================================== */

:root {
  --pine-900: #10231c;
  --pine-700: #1f3d31;
  --pine-500: #2f5a48;
  --slate-600: #3e566a;
  --lichen-300: #b9c6ad;
  --snow-50: #f7f9f8;
  --ink: #16211c;
  --ink-muted: #4a5a53;
  --cloudberry: #c8660a;
  --cloudberry-dark: #a4530a;

  --panel: rgba(250, 252, 251, 0.84);
  --panel-strong: rgba(250, 252, 251, 0.92);
  --hairline: rgba(22, 33, 28, 0.09);
  --shadow-soft: 0 1px 2px rgba(16, 35, 28, 0.06), 0 12px 32px rgba(16, 35, 28, 0.14);
  --radius-lg: 20px;
  --radius-md: 12px;

  --font-sans: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---- Base ---------------------------------------------------------------- */

body {
  font-family: var(--font-sans);
  font-weight: 400;
  line-height: 1.6;
  background-color: var(--pine-900) !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--cloudberry);
  color: #fff;
}

/* ---- Header / navigation --------------------------------------------------- */

.ann-logo {
  width: 72px;
  border-radius: 50%;
  box-shadow: 0 6px 20px rgba(16, 35, 28, 0.35);
  transition: transform 0.25s ease;
}

.ann-logo:hover {
  transform: rotate(-4deg) scale(1.04);
}

header .container .navbar .menu {
  background: rgba(250, 252, 251, 0.72);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 999px;
  padding: 6px;
  box-shadow: var(--shadow-soft);
}

header .container .navbar .menu .menu-item a,
header .container .navbar .menu .menu-item .topmenu-item {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink);
  padding: 10px 20px;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

header .container .navbar .menu .menu-item a:hover,
header .container .navbar .menu .menu-item .topmenu-item:hover {
  background-color: var(--pine-700);
  color: #fff;
}

.dropdown-arrow {
  font-size: 0.6em;
  margin-left: 6px;
  opacity: 0.6;
  vertical-align: middle;
}

/* Dropdown: small frosted card, with an invisible bridge so it doesn't
   close while the pointer travels from the pill to the menu */
header .container .navbar .menu .dropdown .submenu {
  margin-top: 8px;
  padding: 6px;
  min-width: 180px;
  background: var(--panel-strong);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
}

header .container .navbar .menu .dropdown .submenu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -10px;
  height: 10px;
}

.submenu li {
  padding: 0;
}

header .container .navbar .menu .dropdown .submenu li a {
  font-size: 15px;
  font-weight: 500;
  padding: 9px 14px;
  border-radius: 8px;
  white-space: nowrap;
}

/* Mobile menu */
@media screen and (max-width: 767px) {
  header .container .mobile-nav {
    background: rgba(250, 252, 251, 0.78);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-radius: 16px;
    box-shadow: var(--shadow-soft);
  }

  .hamburger div {
    background-color: var(--pine-700);
    border-radius: 2px;
  }

  header .container .navbar .menu {
    border-radius: var(--radius-lg);
    background: var(--panel-strong);
    padding: 16px;
  }

  header .container .navbar .menu .menu-item a,
  header .container .navbar .menu .menu-item .topmenu-item {
    font-size: 20px;
  }

  header .container .navbar .menu .dropdown .submenu {
    position: static;
    box-shadow: none;
    background: transparent;
    border: 0;
    margin: 0 0 0 12px;
  }
}

/* ---- Page heroes ------------------------------------------------------------ */

/* Gentle top/bottom shade over the photo so white headings stay readable */
main .section-annby1,
main .section-annactivities,
main .section-annentrepeneur,
main .section-annabout,
main .section-sparoleder,
main .section-gallery {
  position: relative;
  isolation: isolate;
}

main .section-annby1::after,
main .section-annactivities::after,
main .section-annentrepeneur::after,
main .section-annabout::after,
main .section-sparoleder::after,
main .section-gallery::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(16, 35, 28, 0.55) 0%, rgba(16, 35, 28, 0.15) 32%, rgba(16, 35, 28, 0) 48%),
    linear-gradient(0deg, rgba(16, 35, 28, 0.35) 0%, rgba(16, 35, 28, 0) 30%);
}

main section h1,
main .section-annby1 h1,
main .section-annactivities h1,
main .section-annentrepeneur h1,
main .section-annabout h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(44px, 7vw, 92px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: #fff;
  text-shadow: 0 2px 24px rgba(16, 35, 28, 0.35);
  margin-bottom: 14px;
}

main section h2,
main .section-annby1 h2,
main .section-annactivities h2,
main .section-annentrepeneur h2,
main .section-annabout h2 {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(18px, 2.2vw, 24px);
  line-height: 1.4;
  letter-spacing: 0.005em;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 12px rgba(16, 35, 28, 0.45);
  margin-bottom: 40px;
  max-width: 46ch;
}

/* Small "kicker" line above the title, like a trail sign */
main section .container > h1::before,
main section .page-hero > h1::before {
  content: "Ånn · Jämtland";
  display: block;
  margin-bottom: 14px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lichen-300);
  text-shadow: none;
}

/* Coordinates on the home page read as a quiet caption */
main .section-annby1 h2 {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.14em;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.85);
}

main .section-annby1 img[src*="SverigeOutline"],
main .section-annby1 img[src*="sverigeoutline"] {
  /* invert the black outline to white; hue-rotate brings the orange dot back */
  filter: invert(1) hue-rotate(180deg) drop-shadow(0 2px 8px rgba(16, 35, 28, 0.4));
  opacity: 0.9;
}

/* Spår & leder: same hero treatment as the other pages */
main .section-sparoleder .page-hero h1,
main .section-sparoleder .page-hero h2 {
  color: #fff;
  text-align: left;
}

/* ---- Content panels (the old grey boxes) ------------------------------------ */

.table-ann {
  background: var(--panel);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.55) !important;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: 8px 28px;
  color: var(--ink);
}

main section .logo-list.table-ann {
  padding: 8px 28px;
}

main section .logo-item {
  gap: 24px;
  margin: 0;
  padding: 22px 0;
  align-items: flex-start;
}

main section .logo-item + .logo-item {
  border-top: 1px solid var(--hairline);
}

main section .text {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
  color: var(--ink-muted);
}

main section .text b {
  color: var(--ink);
  font-weight: 650;
}

/* The first link in each item works as the item's title */
main section .logo-item .text > a:first-child {
  display: inline-block;
  margin-bottom: 4px;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--pine-700);
}

main section .logo-item .text > a:first-child:hover {
  color: var(--cloudberry);
}

main section .text a,
main section p a {
  color: var(--pine-500);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(200, 102, 10, 0.45);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

main section .text a:hover,
main section p a:hover {
  color: var(--cloudberry-dark);
  text-decoration-color: var(--cloudberry);
}

main section .logo-item .text > a:first-child {
  text-decoration: none;
}

/* Inline links keep the paragraph's size */
main section .logo-item .text a:not(:first-child) {
  font-size: inherit;
}

/* Logos/icons sit on a soft round "stone". The circle is drawn as a background
   rather than with border-radius: a rounded <img> also clips the logo itself to a
   smaller inner circle, which cut the corners off wide logos. */
main section .logo-item .orglist {
  flex: 0 0 auto;
  width: 84px;
  height: 84px;
  padding: 13px;
  object-fit: contain;
  border-radius: 0;
  background: radial-gradient(circle closest-side, #fff calc(100% - 1.5px), rgba(22, 33, 28, 0.12) calc(100% - 1px), transparent 100%);
  filter: drop-shadow(0 4px 8px rgba(16, 35, 28, 0.08));
}

.orglist img {
  width: 84px !important;
}

/* Home page intro panel */
main .section-annby1 .kort-about {
  padding: 24px 28px;
  font-size: 17px;
  line-height: 1.7;
  font-weight: 400;
}

main .section-annby1 .kort-about p {
  color: var(--ink);
}

main .section-annby1 .image-text {
  font-size: 12px;
  letter-spacing: 0.04em;
  opacity: 0.85;
}

@media (max-width: 600px) {
  .table-ann,
  main section .logo-list.table-ann {
    padding: 4px 18px;
    border-radius: 16px;
  }

  main section .logo-item {
    gap: 12px;
  }

  main section .logo-item .orglist {
    width: 64px;
    height: 64px;
    padding: 10px;
  }

  main section .container > h1::before {
    font-size: 11px;
  }
}

/* ---- Motion: respect users who prefer less of it ---------------------------- */
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}

/* ---- Map backgrounds (Byggnader) ------------------------------------------- */
/* The map is light and busy, so headings go dark with a snow-white halo
   instead of white-on-photo */
main .section-annlistedbuildings h1,
main .section-annlistedbuildings h2 {
  color: var(--pine-900);
  text-align: left;
  text-shadow:
    0 0 2px #fff, 0 0 8px #fff, 0 0 18px rgba(255, 255, 255, 0.95), 0 0 36px rgba(255, 255, 255, 0.9);
}

main .section-annlistedbuildings .container > h1::before {
  color: var(--pine-500);
  text-shadow: 0 0 2px #fff, 0 0 10px #fff, 0 0 20px #fff;
}

/* Building list: keep the "Visa på kartan" pill a button, not an inline link */
main section .map-item .text a.map-link-button {
  text-decoration: none;
  color: var(--pine-700);
  font-weight: 600;
}

main section .map-item .text a.map-link-button:hover {
  color: #fff;
  background-color: var(--pine-700);
}

/* ---- Reconnect dialog (Swedish, see App.razor + js/reconnect.js) ------------ */
.reconnect {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
  place-items: center;
  padding: 16px;
  background: rgba(16, 35, 28, 0.35);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.reconnect.components-reconnect-show,
.reconnect.components-reconnect-failed,
.reconnect.components-reconnect-rejected {
  display: grid;
}

.reconnect-card {
  width: min(380px, 100%);
  padding: 26px 26px 22px;
  border-radius: 20px;
  background: rgba(250, 252, 251, 0.97);
  box-shadow: 0 18px 48px rgba(16, 35, 28, 0.35);
  text-align: center;
  color: var(--ink);
  font-family: var(--font-sans);
}

.reconnect-spinner {
  width: 34px;
  height: 34px;
  margin: 0 auto 14px;
  border-radius: 50%;
  border: 3px solid rgba(31, 61, 49, 0.15);
  border-top-color: var(--cloudberry);
  animation: reconnectSpin 0.9s linear infinite;
}

.reconnect.components-reconnect-failed .reconnect-spinner {
  display: none;
}

@keyframes reconnectSpin {
  to { transform: rotate(360deg); }
}

.reconnect-title {
  margin: 0 0 6px;
  font-size: 19px;
  font-weight: 700;
  color: var(--pine-900);
}

.reconnect-text {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-muted);
}

/* Only the text for the current state is shown */
.reconnect .when-show,
.reconnect .when-failed,
.reconnect .when-rejected {
  display: none;
}

.reconnect.components-reconnect-show .when-show,
.reconnect.components-reconnect-failed .when-failed,
.reconnect.components-reconnect-rejected .when-rejected {
  display: inline;
}

.reconnect.components-reconnect-failed .reconnect-actions.when-failed {
  display: flex;
}

.reconnect-actions {
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
  flex-wrap: wrap;
}

.reconnect-btn {
  padding: 10px 18px;
  border: 0;
  border-radius: 999px;
  background: var(--pine-700);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.reconnect-btn:hover {
  background: var(--pine-900);
}

.reconnect-btn.is-secondary {
  background: #fff;
  color: var(--pine-700);
  box-shadow: inset 0 0 0 1px rgba(22, 33, 28, 0.15);
}