/* ===========================
   GLOBAL RESET
   =========================== */

body {
    margin: 0; /* remove any default margin that creates white strips */
}

/* ===========================
   HEADER LAYOUT & BACKGROUND
   =========================== */

/* Full-width, sticky, gradient header with glass effect */
.container-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    /* FULL-BLEED TRICK: make header span the entire viewport width */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);

    /* spacing inside header (adjust if you want tighter/looser) */
    padding: 0 16px;

    /* gradient + translucent glass effect */
    background: linear-gradient(
        to right,
        rgba(0, 0, 0, 0.90),
        rgba(30, 30, 30, 0.90)
    ) !important;
    backdrop-filter: blur(2px) !important;
    -webkit-backdrop-filter: blur(2px) !important;

    position: sticky;
    top: 0;
    z-index: 20;

    transition: background 0.3s ease, backdrop-filter 0.3s ease;
}

/* ===========================
   LOGO BLOCK
   =========================== */

.site-branding {
    display: flex;
    align-items: center;
    margin: 0 !important;
}

/* Logo image – NO extra left gap so menu can go fully right */
.site-branding img {
    margin-left: 0 !important;
    margin-top: 4px !important;   /* tweak vertical alignment if needed */
    max-height: 48px;
    height: auto;
}

/* ===========================
   MENU LAYOUT & COLORS
   =========================== */

/* Menu container – pushed to the extreme right */
.container-header .mod-menu {
    display: flex !important;
    align-items: center !important;
    height: 100%;
    background: transparent !important;

    margin-left: auto !important;  /* pushes menu as far right as possible */
    margin-right: 0 !important;    /* no extra gap from viewport edge */
    padding: 0 !important;
}

/* Make menu items horizontal, centered, spaced */
.container-header .mod-menu ul {
    display: flex !important;
    align-items: center;
    gap: 20px;                     /* spacing between menu items */
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Menu link base style (no extra vertical padding) */
.container-header .mod-menu a {
    display: flex;
    align-items: center;
    padding-top: 0 !important;
    padding-bottom: 0 !important;

    color: #ffffff !important;     /* normal: white */
    font-weight: 400;
    text-decoration: none;
}

/* Hover color: gold */
.container-header .mod-menu a:hover {
    color: #d4af37 !important;     /* hover: gold */
}

/* Active / current page item: gold + bold */
.container-header .mod-menu .current a,
.container-header .mod-menu li.active > a,
.container-header .mod-menu li.current > a {
    color: #d4af37 !important;     /* active: gold */
    font-weight: 700 !important;   /* active: bold */
}