/* ===========================================================
   global.css (Shared across all pages)
   Goal:
   - NO double scrollbars (no “inner scrollbar flash”)
   - NO horizontal overflow
   - Header is NOT sticky on mobile
   Rule:
   - html is the ONLY scroller
   - body never scrolls
   =========================================================== */

/* =========================
   Reset / Base
   ========================= */
*{ box-sizing: border-box; }

.hidden{ display:none !important; }

html, body{ width:100%; }

h1,h2,h3,h4,h5,h6,p{ margin:0; }

img, video, canvas, svg{
  max-width: 100%;
  height: auto;
}


/* =========================
   Scroll Ownership (THE IMPORTANT BIT)
   ========================= */
/* Force: html scrolls */
html{
  height: 100%;
  overflow-x: hidden !important;
  overflow-y: scroll !important;
  scrollbar-gutter: stable;
}

/* Force: body does NOT scroll */
body{
  margin: 0;
  min-height: 100vh;

  overflow-x: hidden !important;
  overflow-y: visible !important;

  font-family: Arial, sans-serif;
  color: #fff;

  display: flex;
  flex-direction: column;

  background: linear-gradient(-45deg, #1f4b63, #2f6d85, #5a8ca3, #4a7a93);
  background-size: 600% 600%;
  animation: gradientBG 25s ease infinite;
}

@keyframes gradientBG{
  0%{ background-position: 0% 50% }
  50%{ background-position: 100% 50% }
  100%{ background-position: 0% 50% }
}

/* Ensure your main wrapper never becomes a scroller */
main.container{
  flex: 1;
  width: 100%;
  max-width: 1200px;
  margin: 10px auto;
  padding: 0 15px;

  overflow: visible !important;
  height: auto !important;
  max-height: none !important;
}

/* =========================
   Header (GLOBAL)
   ========================= */
:root{
  --header-bg: rgba(44, 62, 80, 0.90);
  --header-shadow: 0 6px 15px rgba(0,0,0,0.5);
  --header-radius: 10px;

  --btn-blue1:#3498db;
  --btn-blue2:#2980b9;
  --btn-red1:#e74c3c;
  --btn-red2:#f05b4f;

  --hamburger-bg: rgba(255,255,255,0.08);
  --hamburger-shadow: 0 4px 10px rgba(0,0,0,0.35);

  --text:#fff;
}

header{
  width: 90%;
  max-width: 1200px;
  margin: 10px auto;
  padding: 10px 15px;

  display:flex;
  justify-content: space-between;
  align-items: center;

  background: var(--header-bg);
  border-radius: var(--header-radius);
  box-shadow: var(--header-shadow);
  backdrop-filter: blur(6px);

  position: relative; /* not sticky */
}

.header-left{
  display:flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.title-buttons{
  display:flex;
  flex-direction: column;
  align-items: flex-start;
}

.page-title{
  font-size: 3.2rem;
  font-weight: 700;
  margin: 0 0 8px;
  line-height: 1.05;
  color: var(--text);
  text-shadow: 2px 2px 8px rgba(0,0,0,0.6);
}

/* Buttons container */
#headbtns{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* Shared button styling */
.logoutbtn,
.homebtn,
.backbtn,
.addsitebtn{
  font-size: 20px;
  font-weight: 700;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  color: #fff;
  box-shadow: 0 4px 10px rgba(0,0,0,0.5);
  transition: transform .2s, box-shadow .2s, opacity .15s;
  padding: 10px 18px;
  text-decoration: none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

/* Logout */
.logoutbtn{
  background: linear-gradient(145deg, var(--btn-red1), var(--btn-red2));
}
.logoutbtn:hover{ transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0,0,0,0.6); }
.logoutbtn:focus-visible{ outline: 3px solid var(--btn-red2); outline-offset: 2px; }

/* Home/Back */
.homebtn,
.backbtn{
  background: linear-gradient(120deg, var(--btn-blue1), var(--btn-blue2));
}
.homebtn:hover,
.backbtn:hover{ transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0,0,0,0.6); }
.homebtn:focus-visible,
.backbtn:focus-visible{ outline: 3px solid #fde68a; outline-offset: 2px; }

/* Add site */
.addsitebtn{
  background: linear-gradient(120deg, #1abc9c, #16a085);
}
.addsitebtn:hover{ transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0,0,0,0.6); }
.addsitebtn:focus-visible{ outline: 3px solid #fde68a; outline-offset: 2px; }

/* Right side */
.header-right{
  display:flex;
  align-items: center;
  gap: 12px;
  position: relative;
}

.header-right img{
  max-height: 150px;
  width: auto;
  height: auto;
  border-radius: 6px;
}

/* Hamburger + menu hidden by default (desktop) */
.hamburger,
.mobile-nav,
.nav-backdrop{
  display: none;
}

/* Backdrop must NEVER block scrolling when hidden */
.nav-backdrop{
  display: none;
  pointer-events: none;
}

.nav-backdrop.show{
  display: block;
  pointer-events: auto;
}

/* hidden must always win */
.nav-backdrop[hidden]{
  display: none !important;
  pointer-events: none !important;
}


.hamburger{
  width: 46px;
  height: 46px;
  border-radius: 12px;
  border: 0;

  background: var(--hamburger-bg);
  box-shadow: var(--hamburger-shadow);

  padding: 10px;
  cursor: pointer;

  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.hamburger .bar{
  display: block;
  width: 26px;
  height: 4px;
  background: #fff;
  border-radius: 999px;
}

/* Dropdown menu base (position can be overridden on mobile) */
.mobile-nav{
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  width: min(320px, 92vw);
  background: var(--header-bg);
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.6);
  padding: 10px;
  z-index: 10020;

  /* IMPORTANT: hidden unless .open */
  display: none;
}

.mobile-nav[hidden]{ display:none !important; }

/* When open: stack items (no blue, not inline) */
.mobile-nav.open{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mobile-nav a{
  display: block;
  width: 100%;
  color: #fff;
  text-decoration: none;
  font-weight: 700;

  padding: 10px 12px;
  border-radius: 10px;

  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
}

.mobile-nav a:hover{
  background: rgba(255,255,255,0.14);
}

.mobile-nav a:focus-visible{
  outline: 3px solid #fde68a;
  outline-offset: 2px;
}

/* ===========================================================
   Footer: force centered on all pages
   =========================================================== */
footer{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0 15px 10px;
  margin: 12px 0 0;
}

footer > *{
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/* ===========================================================
   Mobile <= 480px
   Header layout: Logo -> Title -> (Hamburger left + Buttons right)
   =========================================================== */
@media (max-width: 480px){

  header{
    width: 92%;
    padding: 14px 12px;
    text-align: center;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "logo logo"
      "title title"
      "hamburger buttons";
    align-items: center;
    row-gap: 10px;
    column-gap: 10px;
    position: relative;
    z-index: 10010;
  }

  /* Make inner wrappers not block grid placement */
  .header-left,
  .header-right,
  .title-buttons{
    display: contents;
  }

  /* Logo */
  .header-right img{
    grid-area: logo;
    max-height: 72px;
    width: auto;
    height: auto;
    justify-self: center;
  }

  /* Title */
  .page-title{
    grid-area: title;
    font-size: 2.0rem;
    line-height: 1.1;
    margin: 0;
    justify-self: center;
  }

  /* Hamburger visible on mobile (if present on the page) */
  .hamburger{
    grid-area: hamburger;
    display: inline-flex;
    position: static;
    justify-self: start;
    align-self: center;

    width: 40px;
    height: 40px;
    border-radius: 12px;
    padding: 8px;
  }

  .hamburger .bar{
    width: 22px;
    height: 4px;
  }

  /* Buttons on same row as hamburger, never wrap */
  #headbtns{
    grid-area: buttons;
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    margin: 0;
  }

  #headbtns .logoutbtn,
  #headbtns .homebtn,
  #headbtns .backbtn,
  #headbtns .addsitebtn{
    flex: 1 1 0;
    min-width: 0;
    max-width: 180px;
    font-size: 0.98rem;
    padding: 10px 10px;
    margin: 0;
    white-space: nowrap;
  }

  /* Single button: same width as if there were TWO buttons */
  #headbtns > a:only-child,
  #headbtns > button:only-child{
    flex: 0 0 calc(50% - 5px); /* gap is 10px */
    max-width: 180px;
    min-width: 130px;
    margin-left: auto;
    margin-right: auto;
  }

  /* If #headbtns contains only a form */
  #headbtns > form:only-child{
    margin-left: auto;
    margin-right: auto;
    display: flex;
    justify-content: center;
    width: 100%;
  }
  #headbtns > form:only-child > a:only-child,
  #headbtns > form:only-child > button:only-child{
    flex: 0 0 calc(50% - 5px);
    max-width: 180px;
    min-width: 130px;
    margin: 0;
  }

  /* If NO hamburger exists on that page (e.g. menu.php), use 1-column grid */
  header:not(:has(.hamburger)){
    grid-template-columns: 1fr;
    grid-template-areas:
      "logo"
      "title"
      "buttons";
    column-gap: 0;
  }

  header:not(:has(.hamburger)) #headbtns{
    justify-content: center;
  }

  /* Mobile menu: sit BELOW the header (so hamburger stays clickable) */
  .mobile-nav.open{
  display: flex;                 /* keep your stacked layout */
  position: absolute;            /* IMPORTANT: anchor to header, not fixed */
  top: calc(100% + 10px);        /* drop below header */
  left: 50%;
  transform: translateX(-50%);
  width: min(320px, 92vw);
  z-index: 10020;
  }

/* Keep header + hamburger above any overlays */
header{ z-index: 10030; }
.hamburger{ position: relative; z-index: 10040; }

.nav-backdrop.show{
  z-index: 10015; /* below header (10030) and menu (10020 is fine) */
}


  /* Backdrop (if you use it) */
  .nav-backdrop{ display: none; }
  .nav-backdrop.show{
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.35);
    z-index: 10015;
  }

  footer{
    font-size: 12px;
    margin-top: 0;
    padding-bottom: 10px;
    transform: translateY(12px);
  }

}  

/* ===========================================================
   iOS scroll fix (Workhours is long, iOS can “stall” when html is scroller)
   Keep ONE scroller, but switch to body on iOS only.
   =========================================================== */
@supports (-webkit-touch-callout: none) {

  html{
    height: 100%;
    overflow-y: hidden !important;   /* stop html being the scroller on iOS */
  }

  body{
    height: 100%;
    overflow-y: auto !important;     /* body becomes the scroller on iOS */
    -webkit-overflow-scrolling: touch;
  }
}

.nav-backdrop[hidden]{
  display: none !important;
  pointer-events: none !important;
}