@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap");

/* ==========================================================
   Design tokens (match admin/kontrollpanel-look)
========================================================== */
:root{
  --bg: #f3efe4;            /* varm krem */
  --panel: #ffffff;         /* kort */
  --panel-soft: #fbf8f1;    /* lys panel */
  --text: #1f2a1f;
  --muted: #5b675a;

  --green: #2e5d2f;         /* “admin-grønn” */
  --green-2: #3d7a3f;
  --accent: #d28a1f;        /* “admin-gull/oransje” */
  --accent-2: #b67312;

  --border: rgba(32, 46, 32, .10);
  --shadow-sm: 0 8px 24px rgba(0,0,0,.07);
  --shadow-md: 0 14px 40px rgba(0,0,0,.10);

  --radius: 14px;
  --radius-lg: 18px;

  --container: 1120px;

  --aboutFadeShift: -50%;
  --about-panel: var(--panel-soft);   /* off-white bak teksten */
  --about-content-width: 50%;         /* mindre = mer bilde synlig */
  --about-fade-width: 120px;          /* bredden på selve faden */
}
*,
*::before,
*::after{ box-sizing: border-box; }

html, body{ height: 100%; }
/* Optional base */
body{
  background: var(--bg);
  color: var(--text);
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img{ max-width: 100%; height: auto; display: block; }
/* ==========================================================
   Header
========================================================== */
.site-header{
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(243, 239, 228, .86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0,0,0,.04);
}

.site-header__inner{
  max-width: var(--container);
  position: relative;
  margin: 0 auto;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* Brand */
.brand{
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  flex-shrink: 0;
}

.brand__logo{
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: rgba(255,255,255,.7);
  box-shadow: var(--shadow-sm);
  display: grid;
  place-items: center;
  overflow: hidden;
  flex-shrink: 0;
}

.brand__logo img{
  width: 40px;
  height: auto;
  display: block;
}

.brand__text{
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}

.brand__title{
  font-weight: 800;
  letter-spacing: .3px;
}

.brand__subtitle{
  color: var(--muted);
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  font-size: 12px;
  margin-top: 2px;
}

/* Nav layout */
.nav{
  display: flex;
  position: relative;
  align-items: center;
  gap: 12px;
}

.nav__toggle{
  display: none;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.72);
  width: 44px;
  height: 44px;
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease;
}

.nav__toggle:hover{
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.nav__toggleLines{
  display: block;
  width: 18px;
  height: 2px;
  background: var(--green);
  margin: 0 auto;
  position: relative;
  border-radius: 2px;
}

.nav__toggleLines::before,
.nav__toggleLines::after{
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  background: var(--green);
  border-radius: 2px;
  transition: transform .22s ease, top .22s ease, opacity .22s ease;
}

.nav__toggleLines::before{ top: -6px; }
.nav__toggleLines::after{ top: 6px; }

.site-header.is-nav-open .nav__toggleLines{
  background: transparent;
}
.site-header.is-nav-open .nav__toggleLines::before{
  top: 0;
  transform: rotate(45deg);
}
.site-header.is-nav-open .nav__toggleLines::after{
  top: 0;
  transform: rotate(-45deg);
}

/* Desktop panel */
.nav__panel{
  display: flex;
  align-items: center;
  gap: 18px;
}

.nav__links{
  list-style: none;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0;
  margin: 0;
}

.nav__link{
  position: relative;
  text-decoration: none;
  color: var(--text);
  font-weight: 650;
  font-size: 14px;
  white-space: nowrap;
  padding: 8px 10px;
  border-radius: 10px;
  transition: background .18s ease, transform .18s ease, color .18s ease;
}

.nav__link:hover{
  background: rgba(255,255,255,.60);
  transform: translateY(-1px);
}

.nav__link::after{
  content:"";
  position:absolute;
  left: 10px;
  right: 10px;
  bottom: 6px;
  height: 2px;
  border-radius: 999px;

  /* Fade ut på begge sider */
  background: linear-gradient(
    90deg,
    rgba(46,93,47,0) 0%,
    rgba(46,93,47,.95) 50%,
    rgba(46,93,47,0) 100%
  );

  opacity: 0;
  transform: translateY(3px) scaleX(.92);
  filter: drop-shadow(0 2px 6px rgba(46,93,47,.18));
  transition: opacity .18s ease, transform .18s ease;
}

.nav__link:hover::after,
.nav__link.is-active::after{
  opacity: 1;
  transform: translateY(0) scaleX(1);
}


.nav__actions{
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}

/* Buttons */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 42px;
  padding: 0 14px;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 750;
  letter-spacing: .2px;
  border: 1px solid transparent;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
  user-select: none;
  white-space: nowrap;
}

.btn--primary{
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  color: #fff;
  box-shadow: var(--shadow-sm);
}

.btn--primary:hover{
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn--ghost{
  background: rgba(255,255,255,.65);
  color: var(--green);
  border-color: rgba(46,93,47,.18);
  box-shadow: var(--shadow-sm);
}

.btn--ghost:hover{
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
  background: rgba(255,255,255,.82);
}

/* ==========================================================
   Mobile behavior
========================================================== */
@media (max-width: 979px){
  .nav__toggle{ display: inline-flex; align-items:center; justify-content:center; }

  .nav__panel{
    position: absolute;
    left: 12px;
    right: 12px;
    top: calc(100% + 10px);
    background: rgba(255,255,255,.86);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0,0,0,.06);
    border-radius: 18px;
    box-shadow: var(--shadow-md);
    padding: 14px;
    display: grid;
    gap: 12px;

    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
  }

  .site-header.is-nav-open .nav__panel{
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  .nav__links{
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }

  .nav__link{
    padding: 12px 12px;
    background: rgba(243,239,228,.45);
  }

  .nav__actions{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .brand{ min-width: auto; }
}

/* Skip link (matches your index.php) */
.skip-link{
  position: absolute;
  left: -999px;
  top: 10px;
  background: #fff;
  color: #000;
  padding: 10px 12px;
  border-radius: 10px;
  box-shadow: var(--shadow-md);
  z-index: 100;
}
.skip-link:focus{
  left: 12px;
}
/* ==========================================================
   HERO (main.php)
========================================================== */
.hero{
  position: relative;
  border-radius: 0 0 24px 24px;
  overflow: hidden;
  /* Litt ekstra bunnplass for å “gi rom” til overlappende stats-kort */
  padding-bottom: 54px;
}

.hero__inner{
  max-width: var(--container);
  margin: 0 auto;
  padding: 54px 18px 34px;
  position: relative;
  z-index: 2;
  display: grid;
  align-items: center;
  min-height: 380px;
}

.hero__bg{
  position: absolute;
  inset: 0;
  background-image: url("../img/hero/hero-hay-dog.jpg");
  background-size: cover;
  background-position: center right;
  transform: scale(1.02);
  filter: saturate(1.02) contrast(1.02);
  z-index: 0;
}

.hero__overlay{
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    /* venstre “lesbar” gradient */
    linear-gradient(90deg, rgba(16,22,16,.78) 0%, rgba(16,22,16,.52) 35%, rgba(16,22,16,.18) 60%, rgba(16,22,16,0) 76%),
    /* subtil varm tone */
    linear-gradient(0deg, rgba(243,239,228,.12), rgba(243,239,228,.12));
}

.hero__content{
  max-width: 560px;
  color: #fff;
  text-shadow: 0 6px 18px rgba(0,0,0,.24);
}

.hero__title{
  margin: 0 0 14px 0;
  font-weight: 900;
  letter-spacing: .2px;
  line-height: 1.02;
  font-size: clamp(34px, 4.6vw, 56px);
}

.hero__titleAccent{
  display: inline-block;
}

.hero__lead{
  margin: 0 0 18px 0;
  font-size: clamp(15px, 2vw, 18px);
  color: rgba(255,255,255,.92);
  line-height: 1.5;
  max-width: 48ch;
}

.hero__actions{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.hero__btn{
  height: 46px; /* litt mer premium i hero */
  padding: 0 18px;
}

/* Litt mer “premium” hover på hero-knapper */
.hero .btn--primary:hover,
.hero .btn--ghost:hover{
  transform: translateY(-2px);
}

/* ==========================================================
   OVERLAPP-HOOK for statsmain.php
   Bruk denne wrapper-klassen i statsmain.php:
   <section class="stats-dock">...</section>
========================================================== */
.stats-dock{
  max-width: var(--container);
  margin: -38px auto 0; /* overlapp over hero */
  padding: 0 18px;
  position: relative;
  z-index: 3;
}

/* ==========================================================
   Mobile justeringer for hero
========================================================== */
@media (max-width: 979px){
  .hero__inner{
    padding-top: 44px;
    min-height: 340px;
  }

  .hero__overlay{
    background:
      linear-gradient(180deg, rgba(16,22,16,.72) 0%, rgba(16,22,16,.50) 45%, rgba(16,22,16,.18) 72%, rgba(16,22,16,0) 100%),
      linear-gradient(0deg, rgba(243,239,228,.10), rgba(243,239,228,.10));
  }

  .hero__content{
    max-width: 100%;
  }

  .stats-dock{
    margin-top: -28px; /* litt mindre overlapp på mobil */
  }
}
/* ==========================================================
   STATSMIN (statsmain.php)
========================================================== */
.stats-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.stat-card{
  background: #ffffff;  
  border: 1px solid rgba(0,0,0,.05);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 16px 16px 14px;
  text-align: center;
  position: relative;
  overflow: hidden;

  transition: transform .18s ease, box-shadow .18s ease;
}

.stat-card::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1200px 240px at 50% -20%, rgba(210,138,31,.14), transparent 55%),
    radial-gradient(900px 220px at 10% 0%, rgba(46,93,47,.12), transparent 60%);
  pointer-events: none;
}

.stat-card:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.stat-card__label{
  position: relative;
  z-index: 1;
  color: var(--muted);
  font-weight: 750;
  letter-spacing: .2px;
  font-size: 13px;
  margin-bottom: 6px;
}

.stat-card__value{
  position: relative;
  z-index: 1;
  color: var(--green);
  font-weight: 900;
  letter-spacing: .3px;
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1;
}

/* Mobile stacking */
@media (max-width: 820px){
  .stats-grid{
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .stat-card{
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
  }
  .stat-card__label{
    margin: 0;
    font-size: 13px;
  }
  .stat-card__value{
    font-size: 30px;
  }
}
/* ==========================================================
   Global section helpers
========================================================== */
.section{
  padding: 18px 0 10px;
}

.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 18px;
}

/* ==========================================================
   ABOUT (aboutmain.php) — image behind, panel + fade on top
========================================================== */
.about-card{
  position: relative;
  overflow: hidden;
  min-height: 180px;

  background: rgba(255,255,255,.86);
  border: 1px solid rgba(0,0,0,.05);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease;
}

.about-card:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* Media: legg bildet bak hele kortet */
.about-card__media{
  position: absolute;
  inset: 0;
  z-index: 0;
}

.about-card__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 20% 20%;
  display: block;
  transform: scale(1.02);
}

/* Skru av gammel overlay (for å unngå “seam”/dobbel fade) */
.about-card__mediaOverlay{
  display: none;
}

/* Content: off-white panel oppå bildet */
.about-card__content{
  position: relative;
  z-index: 2;

  width: var(--about-content-width);
  min-height: 180px;

  padding: 18px;
  display: grid;
  align-content: center;
  gap: 10px;

  background: var(--about-panel);
}

/* Fade ut fra panelet og inn i bildet */
.about-card__content::after{
  content: "";
  position: absolute;
  top: 0;
  right: calc(-1 * var(--about-fade-width));
  width: var(--about-fade-width);
  height: 100%;
  pointer-events: none;

  background: linear-gradient(
    90deg,
    var(--about-panel) 0%,
    rgba(251,248,241,0) 100%
  );
}
.about-card__btn{
  justify-self: start;   /* stopper grid-stretch */
  width: auto;           /* alltid “normal” bredde */
  min-width: 140px;
}

/* ==========================================================
   Mobile
========================================================== */
@media (max-width: 900px){
  .about-card{
    display: grid;
    grid-template-columns: 1fr;
  }

  .about-card__media{
    position: relative;
    inset: auto;
    min-height: 190px;
    order: -1;
  }

  .about-card__content{
    width: 100%;
  }

  .about-card__content::after{
    display: none; /* ingen side-fade på mobil */
  }
}


/* ==========================================================
   Section header (used by events/news etc.)
========================================================== */
.section-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 10px 0 14px;
  padding: 0 2px;
}

.section-head__title{
  margin: 0;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: .2px;
  color: var(--text);
}

.btn--sm{
  height: 38px;
  padding: 0 12px;
  border-radius: 12px;
  font-weight: 800;
}

/* ==========================================================
   Events grid
========================================================== */
.events-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.event-card{
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(0,0,0,.05);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;

  transform: translateY(6px);
  opacity: 0;
  animation: cardIn .55s ease forwards;
  animation-delay: calc(var(--i) * 80ms);
}

@keyframes cardIn{
  to { transform: translateY(0); opacity: 1; }
}

.event-card__link{
  display: grid;
  grid-template-rows: 110px auto;
  text-decoration: none;
  color: inherit;
  height: 100%;
}

.event-card__media{
  position: relative;
  overflow: hidden;
}

.event-card__media img{
  width: 100%;
  height: 110px;
  object-fit: cover;
  display: block;
  transform: scale(1.03);
  transition: transform .35s ease;
  filter: saturate(1.02) contrast(1.02);
}

.event-card__media::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,0));
  pointer-events: none;
}

.event-card__body{
  padding: 12px 14px 14px;
}

.event-card__title{
  margin: 0 0 8px 0;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .2px;
}

.event-card__meta{
  display: grid;
  gap: 4px;
  color: rgba(31,42,31,.82);
  font-weight: 560;
}

.event-card__footer{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(0,0,0,.06);
}

.event-card__status{
  font-size: 12px;
  font-weight: 850;
  color: rgba(31,42,31,.70);
}

.event-card__date{
  font-size: 13px;
}

.event-card__club{
  font-size: 12px;
  color: rgba(31,42,31,.70);
}

/* Hover: premium lift + image zoom */
.event-card{
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.event-card:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: rgba(210,138,31,.22);
}

.event-card:hover .event-card__media img{
  transform: scale(1.10);
}

/* ==========================================================
   Empty state (0 events)
========================================================== */
.empty-card{
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(0,0,0,.05);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.empty-card__text strong{
  display: block;
  font-weight: 900;
  margin-bottom: 4px;
}

.empty-card__sub{
  color: rgba(31,42,31,.70);
  font-weight: 560;
  font-size: 13px;
}

.empty-card__actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* ==========================================================
   Responsive
========================================================== */
@media (max-width: 980px){
  .events-grid{
    grid-template-columns: 1fr;
  }
  .event-card__link{
    grid-template-rows: 160px auto;
  }
  .event-card__media img{
    height: 160px;
  }
  .empty-card{
    flex-direction: column;
    align-items: flex-start;
  }
  .empty-card__actions{
    justify-content: flex-start;
  }
}
/* ==========================================================
   NEWS / RESULTS (newsmain.php)
========================================================== */
.news-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.news-card{
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(0,0,0,.05);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  position: relative;

  transform: translateY(6px);
  opacity: 0;
  animation: cardIn .55s ease forwards;
}

.news-card:nth-child(2){
  animation-delay: 90ms;
}

.news-card::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 220px at 20% -10%, rgba(46,93,47,.12), transparent 60%),
    radial-gradient(900px 220px at 80% 120%, rgba(210,138,31,.14), transparent 60%);
  pointer-events: none;
}

.news-card__body{
  position: relative;
  z-index: 1;
  padding: 16px 16px 14px;
  display: grid;
  gap: 8px;
}

.news-card__title{
  margin: 0;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .2px;
}

.news-card__text{
  margin: 0;
  color: rgba(31,42,31,.78);
  font-weight: 560;
  line-height: 1.5;
}

.news-card{
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.news-card:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: rgba(46,93,47,.20);
}

/* Mobile */
@media (max-width: 980px){
  .news-grid{
    grid-template-columns: 1fr;
  }
}
/* ==========================================================
   LOGIN (loginmain.php)
========================================================== */
.login-card{
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(0,0,0,.05);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}

.login-card:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.login-card__head{
  padding: 14px 16px;
  border-bottom: 1px solid rgba(0,0,0,.06);
  background: rgba(251,248,241,.7);
}

.login-card__title{
  margin: 0;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: .2px;
}

.login-card__form{
  padding: 14px 16px 12px;
}

.login-grid{
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 12px;
  align-items: end;
}

.field{
  display: grid;
  gap: 6px;
}

.field__label{
  font-size: 12px;
  font-weight: 800;
  color: rgba(31,42,31,.70);
  letter-spacing: .2px;
}

.field__input{
  height: 42px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.90);
  padding: 0 12px;
  outline: none;
  box-shadow: 0 6px 16px rgba(0,0,0,.05);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.field__input:focus{
  border-color: rgba(46,93,47,.45);
  box-shadow: 0 10px 24px rgba(46,93,47,.12);
  transform: translateY(-1px);
}

.login-btn{
  height: 42px;
  min-width: 120px;
}

.login-card__note{
  margin-top: 10px;
  color: rgba(31,42,31,.70);
  font-weight: 650;
  font-size: 12px;
}

/* Mobile */
@media (max-width: 980px){
  .login-grid{
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .login-btn{
    width: 100%;
  }
}
/* ==========================================================
   LOGIN ALERTS (loginmain.php)
========================================================== */
.login-alert{
  margin: 14px 16px 0;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.80);
  box-shadow: 0 8px 20px rgba(0,0,0,.06);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.25;
}

.login-alert--error{
  border-color: rgba(170, 40, 40, .22);
  background: rgba(170, 40, 40, .08);
  color: rgba(120, 20, 20, .92);
}

.login-alert--warning{
  border-color: rgba(180, 120, 20, .22);
  background: rgba(180, 120, 20, .10);
  color: rgba(120, 80, 10, .92);
}

/* ==========================================================
   FOOTER (footer.php)
========================================================== */
.site-footer{
  margin-top: 26px;
  padding: 22px 0 26px;
  background: rgba(243,239,228,.75);
  border-top: 1px solid rgba(0,0,0,.05);
}

.site-footer__inner{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 18px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  color: rgba(31,42,31,.78);
  font-weight: 600;
  font-size: 13px;
}

.site-footer__left{ justify-self: start; }
.site-footer__nav{ justify-self: center; display:flex; align-items:center; gap:10px; }
.site-footer__right{ justify-self: end; }

.site-footer__link{
  color: rgba(31,42,31,.82);
  text-decoration: none;
  font-weight: 800;
  transition: color .18s ease, transform .18s ease;
}

.site-footer__link:hover{
  color: var(--green);
  transform: translateY(-1px);
}

.site-footer__sep{
  opacity: .45;
}

/* Mobile */
@media (max-width: 980px){
  .site-footer__inner{
    grid-template-columns: 1fr;
    text-align: center;
  }
  .site-footer__left,
  .site-footer__nav,
  .site-footer__right{
    justify-self: center;
  }
}
:focus-visible{
  outline: 3px solid rgba(210,138,31,.55);
  outline-offset: 3px;
  border-radius: 12px;
}
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
/* ==========================================================
   Reveal-on-scroll helpers (site.js)
========================================================== */
.will-reveal{
  opacity: 0;
  transform: translateY(8px);
}

.is-revealed{
  opacity: 1;
  transform: translateY(0);
  transition: opacity .45s ease, transform .45s ease;
}
/* ==========================================================
   HERO underline (orange/gold accent line)
========================================================== */
.hero__titleAccent{
  position: relative;
  display: inline-block;
  padding-bottom: 10px; /* avstand til streken */
}

.hero__titleAccent::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 2px;
  height: 4px;
  width: min(260px, 60%);
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), rgba(210,138,31,.0));
  opacity: .95;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.18));
}

@media (max-width: 700px){
  .hero__titleAccent::after{
    width: min(220px, 70%);
    height: 3px;
  }
}
/* ==========================================================
   Section dividers (subtle fade line)
========================================================== */
.section-divider{
  max-width: var(--container);
  margin: 18px auto;
  padding: 0 18px;
}

.section-divider::before{
  content: "";
  display: block;
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(0,0,0,0),
    rgba(0,0,0,.10),
    rgba(0,0,0,0)
  );
}
/* ==========================================================
   ABOUT PAGE
========================================================== */

.hero--subpage{
  position: relative;
  min-height: 360px;
  background-size: cover;
  background-position: center;
  border-bottom: 1px solid rgba(0,0,0,.06);
}

.hero--subpage .hero__overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.35) 42%, rgba(0,0,0,.10) 70%, rgba(0,0,0,0) 100%);
}

.hero--subpage .hero__inner{
  position: relative;
  padding: 64px 0;
}

.hero--subpage .hero__content{
  max-width: 760px;
}

.hero--subpage .hero__title{
  margin: 0 0 10px;
  font-weight: 900;
  letter-spacing: .2px;
  line-height: 1.05;
  color: #fff;
  font-size: clamp(34px, 4vw, 56px);
  text-shadow: 0 18px 40px rgba(0,0,0,.35);
}

.hero--subpage .hero__lead{
  margin: 0 0 18px;
  color: rgba(255,255,255,.88);
  font-weight: 650;
  max-width: 62ch;
}

.hero--subpage .hero__actions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Blocks */
.about-wrap{
  display: grid;
  gap: 18px;
}

.about-block{
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(0,0,0,.05);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.about-block--split{
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  align-items: stretch;
}

.about-block--reverse{
  grid-template-columns: .85fr 1.15fr;
}

.about-block__panel{
  padding: 18px 18px 16px;
}

.about-block__title{
  margin: 0 0 10px;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: .2px;
}

.about-block__p{
  margin: 0 0 10px;
  color: rgba(31,42,31,.86);
  line-height: 1.55;
}

.about-block__list{
  margin: 10px 0 0;
  padding-left: 18px;
  color: rgba(31,42,31,.86);
  line-height: 1.55;
}

.about-block__media{
  padding: 12px;
  display:flex;
}

.about-media{
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  background: rgba(0,0,0,.04);
  display:flex;
  min-height: 220px;
}

.about-media__img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
}

.about-media__placeholder{
  width: 100%;
  height: 100%;
}

/* Callout */
.about-callout{
  background: rgba(251,248,241,.75);
  border: 1px solid rgba(0,0,0,.05);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.about-callout__inner{
  padding: 18px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
}

.about-callout__title{
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 900;
}

.about-callout__p{
  margin: 0 0 10px;
  color: rgba(31,42,31,.86);
  line-height: 1.55;
}

.about-callout__actions{
  display: grid;
  gap: 10px;
  min-width: 220px;
}

/* Mobile */
@media (max-width: 980px){
  .about-block--split,
  .about-block--reverse{
    grid-template-columns: 1fr;
  }

  .about-block__media{
    padding: 0 12px 12px;
  }

  .about-callout__inner{
    grid-template-columns: 1fr;
  }

  .about-callout__actions{
    min-width: 0;
  }
}
/* ==========================================================
   CLUBS PAGE
========================================================== */

.clubs-hero{
  /* Bruker samme overlay som hero--subpage. Du kan sette bakgrunnsbilde her senere om ønskelig. */
  background: radial-gradient(1200px 500px at 20% 20%, rgba(46,93,47,.35), rgba(0,0,0,0));
}

.clubs-wrap{ display:grid; gap: 18px; }

.clubs-top{
  display:grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: end;
}

.clubs-h2{
  margin: 0;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: .2px;
}

.clubs-muted{
  margin: 6px 0 0;
  color: rgba(31,42,31,.70);
  font-weight: 650;
}

.clubs-search{ display:grid; gap: 6px; }
.clubs-search__label{
  font-size: 12px;
  font-weight: 800;
  color: rgba(31,42,31,.70);
}
.clubs-search__input{
  height: 42px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.90);
  padding: 0 12px;
  outline: none;
  box-shadow: 0 6px 16px rgba(0,0,0,.05);
}

.clubs-map-card{
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(0,0,0,.05);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.clubs-map{
  height: 420px;
}

.clubs-list-head{ margin-top: 6px; }

.clubs-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 14px;
}

.club-card{
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(0,0,0,.05);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}
.club-card:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.club-card__head{
  padding: 14px 16px;
  border-bottom: 1px solid rgba(0,0,0,.06);
  background: rgba(251,248,241,.7);
  display:flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
}

.club-card__titlewrap{
  display:flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.club-card__title{
  margin: 0;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: .2px;
}
.club-pill{
  display:inline-flex;
  align-items:center;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.7);
  font-weight: 800;
  font-size: 12px;
}

.club-card__meta{
  display:flex;
  gap: 10px;
  align-items:center;
  flex-wrap: wrap;
}
.club-meta{
  font-size: 12px;
  font-weight: 800;
  color: rgba(31,42,31,.70);
}

.club-card__body{ padding: 14px 16px 16px; }

.club-kv{ display:grid; gap: 8px; margin-bottom: 12px; }
.club-kv__row{
  display:grid;
  grid-template-columns: 90px 1fr;
  gap: 10px;
  align-items: baseline;
  color: rgba(31,42,31,.86);
}
.club-kv__row span{
  color: rgba(31,42,31,.65);
  font-weight: 800;
  font-size: 12px;
}
.club-kv__row a{ font-weight: 800; }

.club-actions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 10px 0 12px;
}

.club-arenas{
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid rgba(0,0,0,.06);
}
.club-arenas__h{
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .2px;
}

.club-arenas__list{ display:grid; gap: 10px; }

.arena-row{
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 14px;
  background: rgba(255,255,255,.75);
  padding: 10px 12px;
}

.arena-row__top{
  display:flex;
  justify-content: space-between;
  gap: 10px;
  align-items: baseline;
  flex-wrap: wrap;
}
.arena-row__title{
  display:flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.arena-row__loc{
  color: rgba(31,42,31,.70);
  font-weight: 700;
  font-size: 13px;
}

.arena-badge{
  display:inline-flex;
  align-items:center;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(46,93,47,.10);
  font-weight: 900;
  font-size: 12px;
}
.arena-badge--muted{
  background: rgba(0,0,0,.06);
  font-weight: 800;
}

.arena-row__meta{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items:center;
  margin-top: 8px;
}
.arena-meta{
  font-size: 12px;
  font-weight: 800;
  color: rgba(31,42,31,.70);
}

.arena-row__contact{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
  color: rgba(31,42,31,.80);
  font-weight: 700;
  font-size: 13px;
}

.clubs-empty{
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(0,0,0,.05);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 18px;
}

.clubs-alert{
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.80);
  box-shadow: 0 8px 20px rgba(0,0,0,.06);
  font-size: 13px;
  font-weight: 750;
}
.clubs-alert--warning{
  border-color: rgba(180, 120, 20, .22);
  background: rgba(180, 120, 20, .10);
  color: rgba(120, 80, 10, .92);
}

/* Popup */
.map-pop__title{ font-weight: 900; margin-bottom: 2px; }
.map-pop__club{ font-weight: 800; color: rgba(31,42,31,.75); margin-bottom: 6px; }
.map-pop__loc{ color: rgba(31,42,31,.85); margin-bottom: 6px; }
.map-pop__meta{ font-size: 12px; font-weight: 900; color: rgba(31,42,31,.70); }
.map-pop__link a{ font-weight: 900; }

/* Mobile */
@media (max-width: 980px){
  .clubs-top{ grid-template-columns: 1fr; }
  .clubs-grid{ grid-template-columns: 1fr; }
  .clubs-map{ height: 380px; }
}

/* ==========================================================
   TILLEGG: Ryddigere seksjonsavstand + moderne helpers
   (Lagt til mars 2026 - redesign)
========================================================== */

/* Bedre seksjonsspacing på forsiden */
.section { padding: 22px 0 14px; }
.section + .section { padding-top: 0; }

/* Page-wrapper for undersider med enkel hero + innhold */
.page-hero {
  position: relative;
  background: var(--green);
  padding: 48px 0 44px;
  overflow: hidden;
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../img/hero/hero-hay-dog.jpg") center/cover no-repeat;
  opacity: .18;
}
.page-hero__inner {
  position: relative;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 18px;
}
.page-hero__title {
  margin: 0 0 8px;
  color: #fff;
  font-size: clamp(26px, 3.5vw, 42px);
  font-weight: 900;
  letter-spacing: .2px;
  line-height: 1.05;
}
.page-hero__lead {
  margin: 0;
  color: rgba(255,255,255,.82);
  font-size: 15px;
  font-weight: 500;
  max-width: 56ch;
  line-height: 1.5;
}

/* Tab-bryter (Resultater: per event / per hund) */
.tab-bar {
  display: flex;
  gap: 6px;
  background: rgba(255,255,255,.7);
  border: 1px solid rgba(0,0,0,.07);
  border-radius: 14px;
  padding: 5px;
  width: fit-content;
}
.tab-btn {
  padding: 9px 18px;
  border-radius: 10px;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
  transition: background .15s, color .15s, box-shadow .15s;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.tab-btn.is-active,
.tab-btn:hover {
  background: #fff;
  color: var(--green);
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
}
.tab-btn.is-active { font-weight: 800; }

/* Søkeskjema (hund-søk) */
.dog-search-form {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  flex-wrap: wrap;
}
.dog-search-form .field { flex: 1; min-width: 200px; }
.dog-search-form .field__input { width: 100%; font-size: 15px; }

/* Titel-badges */
.title-badge {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .3px;
  border: 1px solid transparent;
}
.title-badge--instinct { background: #f0fdf4; border-color: #bbf7d0; color: #166534; }
.title-badge--novice   { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; }
.title-badge--open     { background: #fff7ed; border-color: #fed7aa; color: #9a3412; }
.title-badge--senior   { background: #fdf4ff; border-color: #e9d5ff; color: #6b21a8; }
.title-badge--master   { background: #fef3c7; border-color: #fde68a; color: #92400e; }
.title-badge--champion { background: #fff8f1; border-color: #fcd34d; color: #78350f; }
.title-badge--crazy    { background: #f1f5f9; border-color: #cbd5e1; color: #334155; }
.title-badge--default  { background: #f8fafc; border-color: #e2e8f0; color: #475569; }

/* Titler-tabell / liste */
.titles-wrap { display: grid; gap: 14px; }

.titles-card {
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform .18s, box-shadow .18s;
}
.titles-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }

.titles-card__head {
  padding: 14px 16px 12px;
  border-bottom: 1px solid rgba(0,0,0,.06);
  background: rgba(251,248,241,.7);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.titles-card__name {
  margin: 0;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: .2px;
}
.titles-card__bhn {
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  margin: 3px 0 0;
}
.titles-card__body { padding: 14px 16px 16px; }

/* Tittel-grid for en hund */
.dog-titles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}
.dog-title-item {
  background: rgba(255,255,255,.8);
  border: 1px solid rgba(0,0,0,.07);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dog-title-item__code {
  font-size: 18px;
  font-weight: 900;
  color: var(--green);
}
.dog-title-item__name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}
.dog-title-item__date {
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
  margin-top: 2px;
}

/* Siste titler - liste */
.recent-titles-list { display: grid; gap: 8px; }
.recent-title-row {
  background: rgba(255,255,255,.8);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 12px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  transition: background .15s;
}
.recent-title-row:hover { background: rgba(255,255,255,.95); }
.recent-title-row__dog { font-weight: 800; font-size: 15px; }
.recent-title-row__bhn { font-size: 12px; color: var(--muted); font-weight: 600; }
.recent-title-row__right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.recent-title-row__date { font-size: 13px; color: var(--muted); font-weight: 600; }

/* Søkeresultat-tom */
.search-empty {
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(0,0,0,.05);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 28px 18px;
  text-align: center;
  color: var(--muted);
  font-weight: 600;
}
.search-empty strong { display: block; font-size: 16px; color: var(--text); margin-bottom: 6px; }

/* Hundsøk-resultater: inline badge for titler i resultat-tabell */
.results-table td a { color: var(--green); font-weight: 700; text-decoration: none; }
.results-table td a:hover { text-decoration: underline; }

/* Forbedret hero--subpage - litt kompaktere */
.hero--subpage { min-height: 280px; }
@media (max-width: 820px) { .hero--subpage { min-height: 200px; } }

/* Hjelpeklasse for myk del-linje mellom kort */
.divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,0,0,.09), transparent);
  margin: 16px 0;
}

/* Forbedret "notice"-melding */
.notice-info {
  padding: 12px 16px;
  border-radius: 12px;
  background: rgba(46,93,47,.07);
  border: 1px solid rgba(46,93,47,.18);
  color: var(--text);
  font-weight: 600;
  font-size: 14px;
}
.notice-warn {
  padding: 12px 16px;
  border-radius: 12px;
  background: #fffae6;
  border: 1px solid rgba(210,138,31,.35);
  color: rgba(31,42,31,.92);
  font-weight: 600;
  font-size: 14px;
}

/* Hund-profillenke i resultat-tabeller */
.dog-link { color: inherit; text-decoration: none; border-bottom: 1px dashed rgba(46,93,47,.35); }
.dog-link:hover { color: var(--green); border-bottom-color: var(--green); }