/* Color variables */
:root {
    --color-text: #ccc;
    --color-link: #0a6;
    --color-bg-muted: #292929;
    --color-meta: #666;
    --color-border: transparent;

    --font-base: "Oswald Light", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    --font-accent: "Gantz", var(--font-base);

    /* add sizing knobs for alignment behavior */
    --wide-max: 1200px;           /* desired max width for Wide */
    --container-padding-x: 12px;  /* matches .container horizontal padding */
}


/* Fonts */
@font-face {
    font-family: "Gantz";
    src: url("assets/fonts/gantz.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Oswald Light";
    src: url("assets/fonts/Oswald-Light.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Oswald Regular";
    src: url("assets/fonts/Oswald-Regular.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}


/* Basic reset and simple styles to show the theme works */
html {
    box-sizing: border-box;
}

*, *:before, *:after {
    box-sizing: inherit;
}

body {
    margin: 0;
    font-family: var(--font-base);
    line-height: 1.5;
    color: var(--color-text);
    background: var(--color-bg-muted);
    /* remove left padding so the header border aligns to the very left */
    /* padding-left: 12px; */
}

/* Give left space to page content instead of the whole body */
main.main,
#primary.main {
    flex: 1; /* take remaining space without growing */
    padding-left: 0;
    padding-right: 0;
}

/* Header: full-width border, plus 4px margins above/below, keep compact padding */
header.site-header {
    border-bottom: 1px solid var(--color-border);
    margin-top: 0.35rem;
    margin-bottom: 0.35rem;
    padding-left: 0.35rem;
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
}

/* ... existing code ... */
header.site-header.top-bar .container {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

header.site-header.top-bar .page-title-wrap {
    order: 2;
}

/* Move branding (logo) to the right */
header.site-header.top-bar .branding {
    order: 0;
    margin-right: 0rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* Header typography: set the header font here */
header.site-header,
header.site-header .page-title,
header.site-header .branding,
header.site-header .branding .site-name {
    font-family: var(--font-accent); /* change to var(--font-base) if you prefer Oswald */
    font-weight: 400;
    font-size: 3rem;
}

/* Make the logo smaller */
header.site-header.top-bar .branding img.custom-logo {
    max-height: 5vh; /* adjust as needed */
    height: auto;
    width: auto;
    display: block;
}

/* If there is text within .branding (fallback site name), size it */
header.site-header.top-bar .branding .site-name {
    font-size: 0.95rem;
    line-height: 1;
    padding-top: 0.5rem;
}

header.site-header.top-bar .container {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    max-width: 100%;       /* stop centering to 1100px */
    margin-left: 0;        /* remove auto-centering */
    margin-right: 0;
    padding-left: 0;       /* remove inner padding */
    padding-right: 0;
}


/* Compact header without changing logo or font size */
header.site-header {
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
}

header.site-header .page-title {
    margin: 0; /* remove default h1 margins that add height */
    line-height: 1.05; /* tight line-height to reduce vertical space */
}

header.site-header .branding {
    line-height: 1; /* keep logo/text tightly aligned */
}

header.site-header.top-bar .container {
    min-height: 48px; /* ensure consistent compact height around the 36px logo */
}

/* Sticky footer layout */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    min-height: 100vh; /* ensure full viewport height */
    display: flex;
    flex-direction: column;
    position: relative;
}

footer.site-footer {
    flex-shrink: 0; /* prevent footer from shrinking */
    padding-left: 0.35rem;
}

.font-ganz{
    font-family: var(--font-accent);
}

/* Columns block with no gaps */
.no-gap-columns.wp-block-columns {
    gap: 0 !important;              /* removes both column and row gaps */
}
.no-gap-columns.wp-block-columns > .wp-block-column {
    margin: 0 !important;           /* older themes sometimes add margins */
}

/* Optional: remove default margins on common inner blocks */
.no-gap-columns .wp-block-image,
.no-gap-columns .wp-block-group,
.no-gap-columns .wp-block-cover,
.no-gap-columns .wp-block-media-text,
.no-gap-columns .wp-block-heading,
.no-gap-columns p {
    margin: 0;
}

.mt-10 {
    margin-top: 10px;
}

.mt-30 {
    margin-top: 30px;
}

.container-full-width {
    width: 100%;
    max-width: 100%;
}

.container-wide {
    width: 90%;
    max-width: 1200px; /* or whatever wide width you want */
}

/* Layout container: center content and set max width */
.container {
    width: 100%;
    max-width: 1100px; /* matches $content_width; adjust as desired */
    margin-left: auto;
    margin-right: auto;
    padding-left: 12px;
    padding-right: 12px;
}

/* Ensure no horizontal scroll caused by full-width elements */
body { overflow-x: hidden; }

/* Gutenberg alignment support */
/* Full width: stretch to viewport width even when nested in a centered container */
.alignfull {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}


/* Wide width: actually wider than normal content, but not full-bleed */
.alignwide {
    /* allow the block to exceed the parent container by breaking out to the viewport */
    width: min(var(--wide-max), 100vw - (2 * var(--container-padding-x)));
    max-width: none;
    /* center relative to the viewport, while respecting container padding on small screens */
    margin-left: calc(50% - min(calc(var(--wide-max) / 2), 50vw - var(--container-padding-x)));
    margin-right: calc(50% - min(calc(var(--wide-max) / 2), 50vw - var(--container-padding-x)));
}

/* Make common inner elements fill their container for better alignment visuals */
.alignfull img,
.alignwide img,
.wp-block-image img {
    width: 100%;
    height: auto;
}

/* Prevent unintentional margins from breaking alignment */
.alignfull,
.alignwide {
    clear: both;
}

.width-5{
	width:5vw;
}