/*
Theme Name: Glandore
Description: Custom _s-aligned theme (refactored CSS v2.0)
Author: Julian & Ariadne
Version: 2.0
*/

/* -------------------------------------------------- */
/* RESET & GLOBAL BOX MODEL                           */
/* -------------------------------------------------- */

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

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
}

/* -------------------------------------------------- */
/* FIRA SANS — LOCAL FONT FACE                        */
/* -------------------------------------------------- */

@font-face {
    font-family: "Fira Sans";
    font-style: normal;
    font-weight: 300;
    src: url("/wp-content/themes/glandore/assets/fonts/FiraSans-Light.woff2") format("woff2");
}

@font-face {
    font-family: "Fira Sans";
    font-style: normal;
    font-weight: 400;
    src: url("/wp-content/themes/glandore/assets/fonts/FiraSans-Regular.woff2") format("woff2");
}

@font-face {
    font-family: "Fira Sans";
    font-style: normal;
    font-weight: 600;
    src: url("/wp-content/themes/glandore/assets/fonts/FiraSans-SemiBold.woff2") format("woff2");
}

@font-face {
    font-family: "Fira Sans";
    font-style: normal;
    font-weight: 700;
    src: url("/wp-content/themes/glandore/assets/fonts/FiraSans-Bold.woff2") format("woff2");
}


/* -------------------------------------------------- */
/* CSS VARIABLES                                      */
/* -------------------------------------------------- */

:root {
    /* Layout */
    --header-height: 80px;
    --footer-height: 80px;   /* changeable at will */
    --page-height: 100dvh;     /* viewport height */
	--header-offset-x: 200px;

    /* Optional: central content max width */
    --layout-max-width: 1500px;
    --layout-padding-x: 24px;
    --layout-padding-x-wide: 40px;
	
	--landing-panel-max-width: 800px;
    --landing-panel-padding-top: 2rem;
    --landing-panel-padding-sides: 2rem;
    --landing-panel-padding-bottom: 1rem;

    --hopper-spacing-top: 1rem;

    /* Colours */
    --color-bg: #05060a;
    --color-surface: #0d0f16;
    --color-surface-alt: #101321;
    --color-text: #05060a;
    --color-text-muted: #a5adc4;
    --color-border-subtle: rgba(255, 255, 255, 0.08);

    --tychevia-blue: #0066cc;
    --tychevia-blue-soft: rgba(0, 102, 204, 0.12);
    --tychevia-blue-soft-strong: rgba(0, 102, 204, 0.24);
    --tychevia-gold: #f2c94c;
    --tychevia-red: #ff6b6b;
	--tychevia-white: #ffffff;	

    /* Typography */
    --font-body: "Fira Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
                 system-ui, sans-serif;
    --font-mono: "Fira Code", ui-monospace, SFMono-Regular, Menlo, Monaco,
                 Consolas, "Liberation Mono", "Courier New", monospace;

	/* Type scale */
	--fs-xs: 0.78rem;
	--fs-sm: 0.9rem;
	--fs-md: 1rem;
	--fs-lg: 1.2rem;
	--fs-xl: 1.6rem;
	--fs-xxl: 2.2rem;
	--fs-display: clamp(2.4rem, 3vw + 1.6rem, 3.2rem);

	/* Spacing */
	--space-2: 0.25rem;
	--space-4: 0.5rem;
	--space-6: 0.75rem;
	--space-8: 1rem;
	--space-12: 1.5rem;
	--space-16: 2rem;
	--space-24: 3rem;
	--space-32: 4rem; }

/* -------------------------------------------------- */
/* PAGE STRUCTURE                                     */
/* -------------------------------------------------- */

html, body {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

#page {
    display: flex;
    flex-direction: column;
    min-height: 95dvh;
}

.site-main {
    flex: 1;
}

/* Main content grows, footer sticks to bottom */
.site-main,
main {
    flex: 1 0 auto;
}

.glandore-footer,
.site-footer {
    flex-shrink: 0;
}

/* REMOVE WordPress admin-bar push-down when logged in */
html {
    margin-top: 0 !important;
}
#wpadminbar {
    position: fixed !important;
}

/* FIX: restore room for the admin bar, stops scrolling */
body.admin-bar {
    padding-top: 32px !important;
}

/* -------------------------------------------------- */
/* TYPOGRAPHY                                         */
/* -------------------------------------------------- */

body,
button,
input,
select,
textarea {
    font-family: var(--font-body);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 600;
    color: #ffffff;
    margin-top: 0;
    margin-bottom: var(--space-8);
    line-height: 1.2;
}

h1 {
    font-size: var(--fs-display);
}

h2 {
    font-size: var(--fs-xxl);
}

h3 {
    font-size: var(--fs-xl);
}

h4 {
    font-size: var(--fs-lg);
}

p {
    margin-top: 0;
    margin-bottom: var(--space-8);
    color: var(--color-text);
}

p:last-child {
    margin-bottom: 0;
}

strong {
    font-weight: 600;
}

em {
    font-style: italic;
}

/* Links */
a {
    color: var(--tychevia-blue);
    text-decoration: none;
    transition: color 0.18s ease, opacity 0.18s ease, text-shadow 0.2s ease;
}

a:hover,
a:focus-visible {
    color: #4da3ff;
    text-shadow: 0 0 6px rgba(77, 163, 255, 0.4);
}

a:focus-visible {
    outline: 2px solid var(--tychevia-gold);
    outline-offset: 3px;
}

/* Lists */
ul,
ol {
    padding-left: 1.3rem;
    margin-top: 0;
    margin-bottom: var(--space-8);
}

/* Code */
code,
kbd,
pre,
samp {
    font-family: var(--font-mono);
    font-size: 0.9em;
}

/* -------------------------------------------------- */
/* UNIVERSAL PAGE CONTENT TYPOGRAPHY                  */
/* -------------------------------------------------- */

.page-content {
    font-family: var(--font-body);
    color: var(--color-text);
    max-width: 760px;        /* beautiful reading width */
    line-height: 1.55;
}

.page-content h1 {
    font-size: var(--fs-display);
    font-weight: 600;
    color: var(--tychevia-blue);
    margin-top: var(--space-32);        /* good spacing above */
    margin-bottom: var(--space-32);     /* good spacing below */
}

.page-content > h1:first-child {
    margin-top: 0;  /* remove the big gap if the page starts with h1 */
}

.page-content h2 {
    font-size: var(--fs-xxl);
    margin-top: var(--space-24);
    margin-bottom: var(--space-8);
	color: var(--tychevia-blue);
	margin-top: var(--space-18);           /* less gap above */
    margin-bottom: var(--space-8);         /* tighter below */
}

.page-content h3 {
    font-size: var(--fs-xl);
    margin-top: var(--space-24);
    margin-bottom: var(--space-8);
	color: var(--tychevia-blue);
	margin-top: var(--space-18);           /* less gap above */
    margin-bottom: var(--space-6);         /* tighter below */
}

.page-content h4 {
    font-size: var(--fs-lg);
    margin-top: var(--space-24);
    margin-bottom: var(--space-8);
	margin-left: 0 !important;
    padding-left: 0 !important;
	color: var(--tychevia-blue);
	margin-top: var(--space-18);           /* less gap above */
    margin-bottom: var(--space-6);         /* tighter below */
}

	/* Paragraphs */
	.page-content p {
    margin-top: 0;
    margin-bottom: var(--space-6);         /* tighter paragraph spacing */
}

/* Lists */
.page-content ul,
.page-content ol {
    margin-top: 0;
    margin-bottom: var(--space-8);         /* less white space after list */
    padding-left: 1.4rem;
}

.page-content li {
    margin-bottom: var(--space-4);         /* small gap between bullets */
}

.page-content p {
    margin-bottom: var(--space-12);
}

/* ----------------------------------------
   Privacy panel refinement
   ---------------------------------------- */

.page-content--privacy {
    padding-top: var(--space-4);
    padding-bottom: var(--space-4);
}

.page-content--privacy p {
    margin-bottom: var(--space-3);
}

.page-content--privacy h3,
.page-content--privacy h4 {
    color: #000;
}

.page-content--privacy h3 {
    margin-bottom: var(--space-4);
}

.page-content--privacy h4 {
    margin-top: var(--space-4);
    margin-bottom: var(--space-2);
}


/* -------------------------------------------------- */
/* DOMAIN CONTENT (Shared across all domain pages)    */
/* -------------------------------------------------- */

.domain-content {
    display: block; /* keeps structure predictable */
}

/* Structured lists used across domain pages */
.layer-list {
    margin: var(--space-12) 0 var(--space-24);
    padding-left: var(--space-20);
    list-style-type: disc;
}

.layer-list li {
    margin-bottom: var(--space-8);
    line-height: 1.55;
}

.layer-list li strong {
    color: var(--tychevia-blue);
}

/* -------------------------------------------------- */
/* ACCESSIBILITY                                      */
/* -------------------------------------------------- */

.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.screen-reader-text:focus {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    clip: auto;
    padding: var(--space-4) var(--space-8);
    background: #000;
    color: #fff;
    z-index: 999;
}

/* -------------------------------------------------- */
/* HEADER — VERTICAL CENTRE, LEFT SHIFT, RED LINES    */
/* -------------------------------------------------- */

/* -------------------------------------------------- */
/* HEADER — CANONICAL LAYOUT                          */
/* -------------------------------------------------- */

.glandore-header {
    height: var(--header-height);
    background: white;

    display: flex;
    align-items: center;

    position: sticky;
    top: 0;
    z-index: 9999;
}

/* -------------------------------------------------- */
/* CONSTRAINED CONTENT STRIP (LOGO + NAV)             */
/* -------------------------------------------------- */

.header-inner {
    height: 100%;
    max-width: 1100px;

    margin-left: var(--header-offset-x);
    padding-right: 24px;

    display: flex;
    align-items: center;
    gap: 50px;
}

/* -------------------------------------------------- */
/* LOGO                                               */
/* -------------------------------------------------- */

.glandore-logo img {
    height: calc(var(--header-height) - 20px);
    width: auto;
    display: block;
}

/* -------------------------------------------------- */
/* PRIMARY NAVIGATION                                 */
/* -------------------------------------------------- */

.glandore-nav {
    height: 100%;
    display: flex;
    align-items: center;
}

.glandore-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    height: 100%;

    display: flex;
    align-items: center;
    gap: 40px;
}

.glandore-menu a {
    height: 100%;
    display: flex;
    align-items: center;

    font-size: 15px;
    font-weight: 600;
    color: var(--tychevia-blue);
    text-decoration: none;
}

/* -------------------------------------------------- */
/* AUTH LINKS (VIEWPORT-ANCHORED, FAR RIGHT)           */
/* -------------------------------------------------- */

.header-auth {
    margin-left: auto;
    padding-right: 200px; /* was 24px */

    display: flex;
    align-items: center;

    font-size: 0.9rem;
    white-space: nowrap;
}

.header-auth a {
    text-decoration: none;
}

.header-auth .auth-sep {
    margin: 0 0.4rem;
    opacity: 0.5;
}

.header-auth {
    position: absolute;
    right: 48px;          /* adjust to taste */
    top: 50%;
    transform: translateY(-50%);

    display: flex;
    align-items: center;

    font-size: 0.9rem;
    white-space: nowrap;
}

/* -------------------------------------------------- */
/* MOBILE TOGGLE (UNCHANGED BEHAVIOUR)                */
/* -------------------------------------------------- */

.menu-toggle {
    display: none; /* assuming existing mobile handling */
}

/* -------------------------------------------------- */
/* LANDING PAGE — SAFELY SCOPED TO FRONT PAGE ONLY    */
/* -------------------------------------------------- */

/* Background image container */
body.home .landing-background,
body.front-page .landing-background {
    height: calc(var(--page-height) - var(--header-height) - var(--footer-height));
    width: 100%;

    background-image: url('https://staging.glandore.com/wp-content/uploads/2019/12/IMG_1535_3.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: scroll; /* mobile-safe */

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

    overflow: hidden;
    position: relative;
    margin-top: 0;
}

/* Dark overlay (currently transparent) */
body.home .landing-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0);
    z-index: 1;
}

/* Wrapper for the landing intro block */
body.home .landing-content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: var(--layout-max-width);
    padding-inline: 20px;

    /* ONLY apply these offsets on the front page */
    margin-top: -100px;   /* move UP */
    margin-left: -960px;  /* move LEFT */
}

/* Glass panel container */
body.home .landing-content .landing-intro-content {
    max-width: var(--landing-panel-max-width);
    margin-left: auto;
    margin-right: auto;

    border-radius: 16px;
    border: 2px solid rgba(255,255,255,0.5);

    background: rgba(0,0,0,0);
    backdrop-filter: blur(12px);

    padding:
        var(--landing-panel-padding-top)
        var(--landing-panel-padding-sides)
        var(--landing-panel-padding-bottom);

    position: relative;
    z-index: 3;
}

body.home .landing-intro-content p:last-child {
    margin-top: var(--hopper-spacing-top);
    margin-bottom: 0;
}


/* -------------------------------------------------- */
/* INTRO BLOCK                                        */
/* -------------------------------------------------- */

.intro-body {
    margin-bottom: 1.2rem;   /* adjust to taste */
	color: var(--tychevia-white);
}

.intro-body p,
.intro-body a,
.intro-body strong {
    color: var(--tychevia-white);
}

.intro-quote--shaw {
    margin-bottom: 1.8rem;
}

/* ONLY affect intro quote on landing page */
body.home .intro-quote p {
    font-size: var(--fs-lg);
    color: #000;
}

/* All non-landing pages use standard readable text */
:not(body.home) .intro-quote p {
    color: var(--color-text);
}

.intro-quote--hopper {
    margin-bottom: 0.2rem;
}

body.home .intro-quote--shaw p,
body.home .intro-quote--hopper p {
    color: #000 !important;
}

.intro-quote cite {
    display: block;
    margin-top: var(--space-4);
    font-size: var(--fs-sm);
    color: var(--tychevia-blue);
}

/* The intro body container has a typo in class name (intro.body).
   We guard for both the broken and the corrected form. */

.intro-body p + p,
[class="intro.body"] p + p {
    margin-top: var(--space-4);
}

/* -------------------------------------------------- */
/* SINGLE-COLUMN PAGE LAYOUT                          */
/* -------------------------------------------------- */

.page-single {
    padding-left: calc(var(--header-offset-x));
    padding-right: var(--layout-padding-x);
    max-width: none; /* use full grid alignment not centre block */
}

/* -------------------------------------------------- */
/* SPLIT LAYOUT (Two-column pages only)               */
/* -------------------------------------------------- */

.split-layout {
    max-width: var(--layout-max-width);
    margin-left: var(--header-offset-x);
    padding-top: var(--space-24);
    padding-bottom: var(--space-32);
}

.split-layout .page-split {
    display: grid;
    grid-template-columns: 800px 600px;
    gap: 20px;

	align-items: flex-start;
    position: relative;
}

.split-layout .page-split::before {
    content: "";
    position: absolute;
    left: 800px; /* boundary of left column */
    top: 0;
    height: calc(var(--page-height) - var(--header-height) - var(--footer-height) - 40px);
    width: 5px;
    background: var(--tychevia-blue-soft);
    z-index: 1;
}

.split-layout .page-split-left {
    position: relative;
    height: calc(var(--page-height) - var(--header-height) - var(--footer-height) - 60px);
    overflow-y: auto;
    padding-right: var(--space-6); /* space before scrollbar */
}

.split-layout .page-split-right .artefact-link {
    margin-top: 0;
}

.split-layout .page-split-right {
    position: sticky;
    top: 40px;
    height: fit-content;
    padding-left: 40px;
    padding-top: 20px;   /* ← this is the missing piece */
}

.split-layout .page-split-right h3 {
    color: var(--tychevia-blue);
}

.split-layout .page-split-right h4 {
	margin-top: 0.75rem;   /* nudges title down */
    margin-bottom: 0.25rem;  /* matches CAS spacing to list */
    color: var(--tychevia-blue);
}

.split-layout .page-split-right ul {
    margin-top: 0;
}

.split-layout .artefact-link {
    margin-top: var(--space-24);
    margin-bottom: var(--space-24);
}

.split-layout .artefact-link a {
    color: var(--tychevia-blue);
    text-decoration: none;
    font-weight: 500;
}

.split-layout .artefact-link a:hover {
    text-decoration: underline;
}

.split-layout .artefact-link ul {
    margin: 0;
    padding-left: 1.1rem;
}

.split-layout .artefact-link li + li {
    margin-top: var(--space-4);
}

/* Custom scrollbar only for left column in split layout */
.split-layout .page-split-left::-webkit-scrollbar {
    width: 10px;
}

.split-layout .page-split-left::-webkit-scrollbar-thumb {
    background: var(--color-border-subtle);
    border-radius: 6px;
}

.split-layout .page-split-left::-webkit-scrollbar-track {
    background: transparent;
}

.artefact-empty {
    margin-top: 0.5rem;
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
}

/* Artefact group headings */
.split-layout .artefact-link h5 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--tychblue);
    margin-top: 1.25rem;
    margin-bottom: 0.5rem;
}

/* Artefact list spacing */
.split-layout .artefact-link ul li {
    margin-bottom: 0.75rem;
}

/* Artefact group headings */
.split-layout .page-split-right h5 {
	font-size: 1rem;
	font-weight: 600;
	color: var(--tychblue);
	margin-top: 1.25rem;
	margin-bottom: 0.5rem;
	}

/* --------------------------------------------------
   LH pane: remove gap above "Download the full paper"
   -------------------------------------------------- */

/* Reduce the bottom margin of the paragraph immediately before the download line */
.page-split-left .page-content p {
    margin: 0 0 0.5rem 0 !important;
}

/* Ensure the download line itself has no top margin added by global rhythm rules */
.page-split-left .page-content p.artefact-download,
.page-split-left .page-content .artefact-download {
    margin-top: 0 !important;
}

/* Keep the meta-note from sticking too close */
.page-split-left .page-content p.artefact-meta-note {
    margin-top: 0.5rem !important;
}

/* Artefact list should sit below the RHS title */
.artefact-meta .artefact-link {
    position: static;
    margin-top: 0.75rem;
}

.split-layout {
    width: 100%;
}

.page-split-right {
    position: relative;
    z-index: 2;
}

.page-split-right {
    color: #0b4fd6;
}

/* Responsive collapse: Right panel below left */
@media (max-width: 900px) {
    .split-layout .page-split {
        grid-template-columns: 1fr;
    }

    .split-layout .page-split-right {
        position: static;
        margin-top: var(--space-24);
    }
}

/* Artefact list – RHS panel only */
.page-split-right ul.artefact-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Section labels (depth 0) */
.page-split-right ul.artefact-list li.depth-0 {
    margin-top: 1.25rem;
    font-weight: 600;
}

/* Make section labels inert */
.page-split-right ul.artefact-list li.depth-0 a {
    text-decoration: none;
    color: inherit;
}

/* Child items (depth 1) */
.page-split-right ul.artefact-list li.depth-1 {
    padding-left: 1.25rem;
    margin-top: 0.4rem;
}

.page-split-right ul.artefact-list li.depth-2 {
    padding-left: 2.5rem;
    margin-top: 0.35rem;
}

/* PDF bullets – final authority */
.page-split-right ul.artefact-list a[href$=".pdf"]::before {
    content: "❖";
    font-family: "Symbola", "Segoe UI Symbol", "Noto Sans Symbols", sans-serif;
    font-size: 1.05em;
    margin-right: 0.55em;
    vertical-align: middle;
    opacity: 0.85;
}

/* -------------------------------------------------- */
/* FIXED HEIGHT, NO SCROLLING FOOTER                  */
/* -------------------------------------------------- */

.glandore-footer {
    background: #ffffff;
    height: var(--footer-height);
    min-height: var(--footer-height);
    border-top: 1px solid #eee;

    display: flex;
    align-items: center;
}

.footer-inner {
    max-width: var(--layout-max-width);
    padding-left: var(--header-offset-x);

    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;
    gap: 40px;              /* spacing between copyright + menu */
    padding: 0 24px;
	
	margin-left: var(--header-offset-x);   /* ← ADD THIS */
    margin-right: 0;
}

/* Left copyright text */
.footer-left {
    font-size: 0.9rem;
    white-space: nowrap;
}

/* Right side links */
.footer-menu {
	margin-left: -40px;   /* adjust until it “looks right” */
    list-style: none;
    display: flex;
    gap: 24px;
    margin: 0;
    padding: 0;
}

.footer-menu a {
    color: var(--tychevia-blue);
    text-decoration: none;
}
.footer-menu a:hover {
    text-decoration: underline;
}



/* -------------------------------------------------- */
/* RESPONSIVE BREAKPOINTS                             */
/* -------------------------------------------------- */

@media (min-width: 900px) {
    .menu-toggle {
        display: none !important;
    }

    .glandore-nav {
        display: flex !important;
    }

    .glandore-menu {
        flex-direction: row !important;
        gap: 40px !important;
    }
}

/* Medium screens */
@media (max-width: 1024px) {
    .landing-intro {
        padding-inline: var(--layout-padding-x);
        padding-block: var(--space-24);
    }

    .landing-intro-content {
        padding: var(--space-16);
    }
}

/* Small screens (mobile-first adjustments) */
@media (max-width: 768px) {

    .site-header-inner,
    .header-inner {
        padding-inline: var(--layout-padding-x);
        height: auto;
        padding-block: 10px;
        flex-wrap: wrap;
        gap: var(--space-8);
        align-items: flex-start;
    }

    /* Show menu toggle if you later wire it with JS */
    .menu-toggle {
        display: inline-flex;
        margin-left: auto;
    }

    .glandore-nav,
    .main-navigation {
        width: 100%;
        justify-content: flex-start;
        margin-top: var(--space-8);
    }

    .glandore-menu,
    .main-navigation ul {
        flex-direction: column;
        gap: var(--space-4);
    }

    .landing-intro {
        padding-inline: var(--layout-padding-x);
        padding-block: var(--space-16);
    }

    .landing-intro-content {
        border-radius: 14px;
    }

    .footer-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-4);
    }

    .footer-item {
        white-space: normal;
    }
}

/* Tiny screens */
@media (max-width: 480px) {
    :root {
        --layout-padding-x: 16px;
        --layout-padding-x-wide: 18px;
    }

    .landing-intro-content {
        padding: var(--space-12);
    }

    .intro-quote p {
        font-size: 1rem;
    }
}