/* Global variables and reset */
:root{
  --w:1120px;
  --head:#111; /* top header bg */
  --headText:#fff;
  --green:#0a7a0a;
  --sidebar-w:220px;
  --header-h:64px;
  --footer-h:48px; /* height for the global footer */
  --content-offset: 80px; /* how much to pull content toward the sidebar */
}
*{box-sizing:border-box}
body{font-family:Arial,Helvetica,sans-serif;margin:0;color:#111;background:#fff}

/* Top full-width header */
.topHeader{
  position:fixed;
  top:0;left:0;right:0;
  height:var(--header-h);
  background:var(--head);
  color:var(--headText);
  z-index:1200;
  display:flex;align-items:center;box-shadow:0 2px 8px rgba(0,0,0,.12);
}
.topHeader .topInner{
    width:100%;
    max-width:var(--w);
    /* Left-align header content to match sidebar text start (12px left + 8px padding = 20px) */
    margin:0; /* start from viewport left */
    padding-left:20px;
    padding-right:10px;
  position:relative;
  display:flex;align-items:center;justify-content:space-between;
}
.topHeader h1{font-size:30px;margin:0;font-weight:700}

/* Header right-aligned live date/time */
.topHeader .topInner .headerRight{
  position:fixed;
  right:12px;
  top:0;
  height:var(--header-h);
  display:flex;
  align-items:center;
  color:var(--headText);
  font-size:14px;
  padding-right:12px;
  z-index:1400;
}

@media (max-width:760px){
  .topHeader .topInner .headerRight{ position:static; margin-left:auto; padding-right:0; }
}

/* Fixed left sidebar under the top header */
.leftPane{
  position:fixed;
  left:12px;
  top:calc(var(--header-h) + 12px);
  width:var(--sidebar-w);
  z-index:1100;
}
.leftPane .sideNav{
  background:#f6f6f6;
  border-radius:8px;
  padding:8px;
  box-shadow: 0 2px 6px rgba(0,0,0,.04);
}
.leftPane .sideNav ul{list-style:none;padding:6px;margin:0}
.leftPane .sideNav li{margin:6px 0}
.leftPane .sideNav a{color:#111;text-decoration:none;padding:8px 10px;display:block;border-radius:6px}
.leftPane .sideNav a:hover{background:#eee}
.leftPane .sideNav a.active{background:rgba(0,0,0,0.06);border-radius:6px;font-weight:700}

/* Page wrapper and main content need space for header and sidebar */
.wrap{max-width:var(--w);margin:12px auto;padding:0 10px}
.main{
  /* Move content closer to sidebar without changing sidebar width */
  margin-left: calc(var(--sidebar-w) - var(--content-offset));
  margin-top: calc(var(--header-h) + 18px);
  padding:18px 12px 30px 12px;
  min-height: 60vh;
  /* reserve space for fixed footer so content is not covered */
  padding-bottom: calc(var(--footer-h) + 24px);
}

/* App-style square buttons on index page (right side) */
.main{position:relative}
.appGrid{display:grid;grid-template-columns:repeat(4,220px);gap:20px;align-items:start;margin:14px auto 0;max-width:934px}
.appBtn{width:220px;display:block;text-decoration:none;background:transparent;padding:0;box-shadow:none;border-radius:0;overflow:visible;line-height:0;cursor:pointer}
.appBtn:hover{transform:none;box-shadow:none}
.appBtn:active{transform:none}
.appLabel{display:none}

/* Make the image itself act as the button (shadow follows PNG transparency) */
.appGrid .appBtn{border-radius:40px;overflow:visible;transition:transform .18s ease}
.appGrid .appBtn > img{width:100% !important;height:auto !important;display:block !important;border-radius:40px;filter:drop-shadow(0 12px 18px rgba(0,0,0,0.22));transition:filter .18s ease}
.appGrid .appBtn:hover{transform:translateY(-6px)}
.appGrid .appBtn:hover > img{filter:drop-shadow(0 22px 28px rgba(0,0,0,0.30))}
.appGrid .appBtn:active{transform:translateY(-4px)}
.appGrid .appBtn:active > img{filter:drop-shadow(0 18px 22px rgba(0,0,0,0.26))}

/* gradients for variety; red-tinted variant fades earlier to transparent */
.appBtn--orange{background:transparent}
.appBtn--blue{background:transparent}
.appBtn--green{background:transparent}

/* Text-style button for Trykk og lengde: elongated, rounded, with green hover and red active glow */
.appBtn--purple{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:56px;
  width:220px;
  padding:12px 18px;
  border-radius:14px;
  background: linear-gradient(180deg,#222,#141414);
  color:#ffffff;
  font-weight:700;
  line-height:1;
  text-decoration:none;
  border:1px solid rgba(255,255,255,0.04);
  box-shadow: 0 8px 18px rgba(0,0,0,0.20), inset 0 1px 0 rgba(255,255,255,0.02);
  /* Stronger red glow behind the text (multiple layers for depth) */
  text-shadow:
    0 0 6px rgba(244,67,54,0.9),
    0 0 12px rgba(244,67,54,0.55),
    0 0 22px rgba(244,67,54,0.30);
  transition: box-shadow .18s ease, transform .12s ease, color .12s ease, background .12s ease, text-shadow .12s ease;
}
.appBtn--purple:hover{
  box-shadow: 0 0 40px 8px rgba(0,200,83,0.12), 0 10px 24px rgba(0,0,0,0.22);
  transform: translateY(-4px);
  color:#fff;
}
.appBtn--purple:active{
  box-shadow: 0 0 36px 8px rgba(244,67,54,0.16), 0 6px 12px rgba(0,0,0,0.14);
  transform: translateY(-1px);
  /* Stronger red glow on active */
  text-shadow:
    0 0 10px rgba(244,67,54,1),
    0 0 22px rgba(244,67,54,0.9),
    0 0 36px rgba(244,67,54,0.6);
}

@media (max-width:1280px){
  .appGrid{grid-template-columns:repeat(3,220px);justify-content:center}
}
@media (max-width:980px){
  .appGrid{grid-template-columns:repeat(2,220px);justify-content:center}
}
@media (max-width:560px){
  .appGrid{grid-template-columns:repeat(1,1fr);grid-auto-rows:220px}
  .appBtn{width:100%}
}

/* Global fixed footer across bottom of viewport */
.siteFooter{
  position:fixed;
  left:0;right:0;bottom:0;
  height:var(--footer-h);
  display:flex;align-items:center;z-index:1300;
  background:var(--head);color:var(--headText);
}
.siteFooter > div{
  width:100%;max-width:var(--w);margin:0 auto;padding:8px 10px;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:12px;text-align:center
}
.siteFooter a{color:var(--headText)}
.siteFooter .siteDisclaimer{font-size:11px;color:#ddd;margin-top:6px;max-width:var(--w);}
.siteFooter .siteCredit{white-space:nowrap;display:inline-block}

/* Shared button styles */
.btnRow{display:flex;gap:8px;align-items:center}
.btn{background:#2c2c2c;color:#fff;border:1px solid #444;border-radius:6px;padding:7px 10px;font-size:12px;cursor:pointer;user-select:none}
.btn:hover{background:#3a3a3a}
.btn:active{transform:translateY(1px)}

/* Small screens: sidebar flows above content, header remains top */
@media (max-width:760px){
  .leftPane{position:static;width:auto;top:auto;left:auto;margin:12px}
  .main{margin-left:0;margin-top: calc(var(--header-h) + 12px)}
  /* On small screens remove offset to avoid overlap */
  :root{ --content-offset: 0px; }
}