/* ═══════════════════════════════════════════════════════════════
   style.css  —  Aurum Black & Gold Theme
   ═══════════════════════════════════════════════════════════════ */

/* ── Google Fonts ─────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Raleway:wght@300;400;500;600&display=swap');

/* ── CSS Custom Properties ────────────────────────────────────── */
:root {
    /* Core palette */
	--ral1001		: #CCB083;
	--veldgroen		: #84A126;
	--eredonkerblauw: #02216E;
	--erelichtblauw	: #0600FF;
	--donkerrood	: #FF7D36;
    --gold-bright : #FFD700;
    --gold-mid    : #C9A84C;
    --gold-deep   : #8B6914;
    --gold-subtle : rgba(201,168,76,.15);
    --black       : #0A0A0A;
    --black-card  : #111111;
    --black-lift  : #1A1A1A;
    --white       : #FFFFFF;
    --white-muted : rgba(255,255,255,.72);

    /* Semantic */
    --header-bg     : var(--ral1001);
    --header-fg     : var(--black);
    --body-bg       : var(--veldgroen);
    --body-fg       : var(--eredonkerblauw);
    --heading-color : var(--erelichtblauw);
    --card-bg       : var(--black-card);
    --card-border   : var(--gold-deep);
	--hyperlink		: var(--donkerrood);

    /* Dimensions */
    --header-h  : 56px;
    --radius    : 4px;
    --gap       : 1.25rem;

    /* Typography */
    --font-display : 'Verdana',  Georgia, serif;
	--font-body	   : system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --oldfont-body    : 'Raleway', sans-serif;

    /* Transitions */
    --ease : cubic-bezier(.4,0,.2,1);
}

/* ── Reset & Base ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
    font-family    : var(--font-body);
	font-size: clamp(12px, calc(0.909rem + 0.455vw), 18px);  
    line-height    : 1.65;
    background     : var(--body-bg);
    color          : var(--body-fg);
    padding-top    : var(--header-h);     /* offset for fixed header */
    min-height     : 100vh;
}

body.menu-open { overflow: hidden; }

.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
    }
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

.rechts {
	float: right !important;
}
.links {
	float: left !important;
}
.hiddenDiv {
	display: none !important;
}
.showDiv {
	display: block !important;
}
#TopButton {
    display: none;
    position: fixed;
    bottom: 10px;
    right: 10px;
    z-index: 99;
    border: none;
    outline: none;
    background-color: var(--veldgroen);
    color: white;
    cursor: pointer;
    padding: 10px;
    border-radius: 10px;
    font-size: 10px;
}

a { color: inherit; text-decoration: none;  }
a:hover { color:  var(--hyperlink);}
img { display: block; max-width: 100%; height: auto; }
ul, ol { list-style: none; }
/* ══════════════════════════════════════════════════════════════
   HEADER
   ══════════════════════════════════════════════════════════════ */
.site-header {
    position   : fixed;
    inset-block-start : 0;
    inset-inline: 0;
    z-index    : 900;
    height     : var(--header-h);
    background : var(--header-bg);
    box-shadow : 0 2px 12px rgba(0,0,0,.55);
}

/* Decorative bottom border */
.site-header::after {
    content    : '';
    position   : absolute;
    bottom     : 0; left: 0; right: 0;
    height     : 2px;
    background : linear-gradient(90deg, transparent, var(--header-bg), transparent);
}

.header-inner {
    display         : flex;
    align-items     : center;
    justify-content : space-between;
    height          : 100%;
    padding         : 0 0;
    max-width       : 100%;
    margin          : auto;
}

/* ── Brand ────────────────────────────────────────────────────── */
.header-brand {
    display     : flex;
    align-items : center;
    gap         : .55rem;
    color       : var(--header-fg);
    flex-shrink : 0;
}

.header-logo {
    width      : 67px;
    height     : 67px;
    object-fit : contain;
    flex-shrink: 0;
}

.header-sitename {
    font-family  : var(--font-display);
    font-weight  : 700;
	font-size: clamp(8px, calc(0.6rem + 0.6vw), 18px);  
    white-space  : nowrap;

    /* Hide text on very small screens, keep logo */
    overflow     : hidden;
    text-overflow: ellipsis;
}

/* ── Controls (quick links + hamburger) ────────────────────────── */
.header-controls {
    display     : flex;
    align-items : center;
    gap         : .35rem;
}

.header-quicklink {
    display         : flex;
    align-items     : center;
    justify-content : center;
    width           : 38px;
    height          : 38px;
    border-radius   : 50%;
    color           : var(--header-fg);
    transition      : background .2s var(--ease), transform .15s var(--ease);
}
.header-quicklink:hover,
.header-quicklink:focus-visible {
    background : rgba(0,0,0,.14);
    transform  : scale(1.1);
    outline    : none;
}

/* ── Hamburger ────────────────────────────────────────────────── */
.hamburger {
    display         : flex;
    flex-direction  : column;
    justify-content : center;
    align-items     : center;
    gap             : 5px;
    width           : 38px;
    height          : 38px;
    background      : none;
    border          : none;
    cursor          : pointer;
    border-radius   : var(--radius);
    padding         : 6px;
    transition      : background .2s var(--ease);
}
.hamburger:hover,
.hamburger:focus-visible { background: rgba(0,0,0,.14); outline: none; }

.ham-bar {
    display        : block;
    width          : 22px;
    height         : 2px;
    background     : var(--header-fg);
    border-radius  : 2px;
    transform-origin: center;
    transition     : transform .3s var(--ease), opacity .2s, width .3s var(--ease);
}

/* Open state — X shape */
.hamburger.is-open .ham-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.is-open .ham-bar:nth-child(2) { opacity: 0; width: 0; }
.hamburger.is-open .ham-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Navigation Drawer ─────────────────────────────────────────── */
.nav-drawer {
    position   : fixed;
    top        : var(--header-h);
    right      : 0;
    bottom     : 0;
    width      : min(320px, 82vw);
    background : var(--black-lift);
    border-left: 1px solid var(--gold-deep);
    z-index    : 850;
    overflow-y : auto;
    transform  : translateX(100%);
    transition : transform .35s var(--ease);
    padding    : 1.5rem 0;
}
.nav-drawer.is-open { transform: translateX(0); }

.nav-list { padding: 0; }

.nav-item { border-bottom: 1px solid rgba(201,168,76,.12); }

.nav-link {
    display      : block;
    padding      : .85rem 1.5rem;
    font-family  : var(--font-display);
    font-size    : .85rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color        : var(--white-muted);
    transition   : color .2s var(--ease), padding-left .2s var(--ease), background .2s;
}
.nav-link:hover,
.nav-link:focus-visible {
    color        : var(--gold-bright);
    padding-left : 2rem;
    background   : var(--gold-subtle);
    outline      : none;
}
.nav-link--active {
    color        : var(--gold-bright);
    border-left  : 3px solid var(--gold-bright);
}

/* ── Overlay ──────────────────────────────────────────────────── */
.nav-overlay {
    position   : fixed;
    inset      : 0;
    background : rgba(0,0,0,.6);
    z-index    : 800;
    opacity    : 0;
    pointer-events: none;
    transition : opacity .3s var(--ease);
}
.nav-overlay.is-visible { opacity: 1; pointer-events: all; }

/* ══════════════════════════════════════════════════════════════
   MAIN CONTENT WRAPPER
   ══════════════════════════════════════════════════════════════ */
.site-main {
    max-width : 1400px;
    margin    : 0 auto;
    padding   : 2rem 1rem 3rem;
}
.contentblock {
  max-width: 480px;
  min-width: 270px;
  width: 100%;
  border-radius: 3%;
  margin-bottom: 20px;
  overflow: auto;
  text-align: center;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
  border: 1px solid #252525;
  background-color: rgba(242, 242, 242, 0.8);
  border-radius: 3px;
  @include box-shadow(0 0 200px rgba(white, .5), 0 1px 2px rgba(black, .3)): ;
}
.box-title {
  font-size: 19px;
  font-weight: bold;
}
.smalldisplay {
	display: none;
}
.largedisplay {
	display: inline;
}

@media (max-width: 768px) {
.smalldisplay {
	display: inline;
}
.largedisplay {
	display: none;
}
}