/* === Full-bleed header + global gap fix (safe) === */
html, body { margin:0 !important; padding:0 !important; height:100%; }
* { box-sizing: border-box; }
html { overflow-x: hidden; }           /* prevents 1–2px horizontal creep */

/* Make the page use full height so footer can sit at the bottom */
body { min-height: 100vh; display:flex; flex-direction:column; }

/* Your main page wrapper grows; footer can push to bottom */
.page-wrap, .site-wrap, main { flex: 1 0 auto; width: 100%; }

/* Header spans the full viewport width */
header, .site-header, #site-header {
  width: 100%;
  margin: 0 !important;
  border: 0;
  left: 0; right: 0;
}

/* Keep header content centered but full-bleed background */
.site-header .inner,
header .inner,
header .container,
.site-header .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}

/* Header styling */
header {
    background: #fff; /* White background */
    color: #333;      /* Dark text color for visibility on white */
    padding: 10px 15px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    position: relative;
    z-index: 1000;
}

/* Container for logo and hamburger */
.header-top {
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;
}

/* Logo styling */
header h1 {
    margin: 0;
    font-size: 24px;
    color: #333; /* Dark color for logo text */
}

/* Hamburger icon styling */
.hamburger {
    font-size: 24px;
    cursor: pointer;
    color: #333; /* Dark color for visibility on white background */
    user-select: none;
}