/* colors */
:root {
    --color-white: #f3f3f3;
    --color-cream: #ebebeb;
    --color-light-gray: #c9c9c9;
    --color-black: #333333;
    --color-blue: #007acc;
    --color-dark-blue: #005f99;

    --color-turquoise: #8ef6e4;
    --color-purpleish: #9896f1;
    --color-purple: #d59bf6;
    --color-pink: #edb1f1;

    --color-dark-purple: #6A4B6A;

    --color-coral: #EF626C;

    --color-light-green: #a6a26a;
    --color-dark-green: #403e2a;
    --color-coral: #a67153;
    --color-light-coral: #d9a796;
    --color-navy: #515D5D;

}

html[theme="none"] {
    --font-size-base: clamp(16px, 1vw, 18px);
    --font-size-large: 1.25rem;
    --line-height-base: 1.6;
    --line-height-heading: 1;
    --border-radius: 0.25rem;
    --border-thickness: 2px;
    --border-style: solid;
    --borders: var(--border-thickness) var(--border-style) var(--color-text);
    --link-padding: 0;
}

/* Test theme */
html[theme="green"] {
    --color-white: #f2f2f2;
    --color-background: var(--color-light-green);
    --color-background-secondary: var(--color-dark-green);
    --color-background-tertiary: var(--color-light-coral);
    --color-text: var(--color-black);
    --color-primary: var(--color-dark-green);
    --color-secondary: var(--color-coral);
    --color-link: var(--color-text);
    --color-link-hover: var(--color-secondary);
    --color-link-visited: var(--color-primary);
    --color-link-background: var(--color-background-tertiary);
    --ghost-accent-color: var(--color-secondary, var(--color-coral));
    
    --border-radius: 0.25rem;
    --border-thickness: 2px;
    --border-style: solid;
    --borders: var(--border-thickness) var(--border-style) var(--color-text);

    --font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --font-family-code: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
    --font-size-base: clamp(16px, 1vw, 18px);
    --font-size-large: 1.25rem;
    --line-height-base: 1.6;
    --line-height-heading: 1;
    --link-padding: 0.25rem;

    --shadow-sm: 0 1px 3px var(--color-secondary);
    --shadow-md: 0 6px 18px var(--color-secondary);
}

html[theme="green"] [section-theme="dark"] {
    --color-background: var(--color-dark-green);
    --color-background-secondary: var(--color-coral);
    --color-background-tertiary: var(--color-light-coral);
    --color-text: var(--color-white);
    --color-primary: var(--color-coral);
    --color-secondary: var(--color-light-coral);
    --color-link: var(--color-text);
    --color-link-hover: var(--color-primary);
    --color-link-visited: var(--color-link);
    --color-link-background: var(--color-background-tertiary);
    --color-button-background: var(--color-background-tertiary);
    --color-button-background-hover: var(--color-coral);
    --color-button-text: var(--color-black);
    --color-button-text-hover: var(--color-white);

    --border-radius: 0.25rem;
    --border-thickness: 2px;
    --border-style: solid;
    --borders: var(--border-thickness) var(--border-style) var(--color-text);

    --font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --font-family-code: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
    color: var(--color-text);
}

html[theme="green"] [section-theme="light"],
html[theme="green"] .kg-card {
    --color-background: var(--color-light-coral);
    --color-background-secondary: var(--color-coral);
    --color-background-tertiary: var(--color-light-green);
    --color-text: var(--color-black);
    --color-primary: var(--color-coral);
    --color-secondary: var(--color-white);
    --color-link: var(--color-text);
    --color-link-hover: var(--color-secondary);
    --color-link-visited: var(--color-primary);
    --color-link-background: var(--color-background-tertiary);
    --color-button-background: var(--color-background-tertiary);
    --color-button-background-hover: var(--color-coral);
    --color-button-text: var(--color-black);
    --color-button-text-hover: var(--color-white);

    --border-radius: 0.25rem;
    --border-thickness: 2px;
    --border-style: solid;
    --borders: var(--border-thickness) var(--border-style) var(--color-text);

    --font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --font-family-code: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
    color: var(--color-text);
    background-color: var(--color-background);
}

/* Default Theme */
html[theme="default"] {
    --color-background: var(--color-white);
    --color-background-secondary: var(--color-cream);
    --color-background-tertiary: var(--color-light-gray);
    --color-text: var(--color-black);
    --color-primary: var(--color-blue);
    --color-secondary: var(--color-dark-blue);
    --color-link: var(--color-primary);
    --color-link-hover: var(--color-dark-blue);
    --color-link-visited: var(--color-primary);
    --ghost-accent-color: var(--color-primary, var(--color-blue));
    
    --border-radius: 0.5rem;
    --border-thickness: 1px;
    --border-style: solid;
    --borders: var(--border-thickness) var(--border-style) var(--color-text);

    --font-family: ui-rounded, 'Hiragino Maru Gothic ProN', Quicksand, Comfortaa, Manjari, 'Arial Rounded MT', 'Arial Rounded MT Bold', Calibri, source-sans-pro, sans-serif;
    --font-family-heading: Optima, Candara, 'Noto Sans', source-sans-pro, sans-serif;
    --font-size-base: clamp(16px, 1vw, 18px);
    --font-size-large: 1.25rem;
    --line-height-base: 1.6;
    --line-height-heading: 1;
}

/* Global Styles */
:root {

    --section-padding: clamp(1rem, 2vw, 2rem);
    --gutter-spacing: clamp(1rem, 2vw, 2rem);
    --flow-gap: clamp(0.5rem, 2vw, 1.25rem);

    --tablet-breakpoint: 768px;
    --desktop-breakpoint: 1024px;

    font-size: var(--font-size-base);
    color: var(--color-text);
    line-height: var(--line-height-base);
    font-family: var(--font-family);
    background-color: var(--color-background);
}

/* Layout */
body {
    min-height: 100vh;         /* or use 100svh on mobile where appropriate */
    display: flex;
    flex-direction: column;
}

main {
    flex: 1 1 auto;
    min-block-size: 0;
    overflow: auto;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

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

.kg-width-wide {
    max-width: 100%;
}

.section-regular,
.section-medium,
.section-wide {
    --max-inline-size: none;
    --section-padding-block: var(--section-padding);
    --section-padding-inline: var(--gutter-spacing, 1rem);
    --section-margin: 0;
    background-color: var(--color-background);
    container-type: inline-size;
    container-name: section;
}

.section-content {
    --max-inline-size: none;
    --section-padding-inline: var(--gutter-spacing, 1rem);
    --section-margin-inline: var(--gutter-spacing, 1rem);
    --section-margin: 0;
    padding-block: var(--section-padding-block);
    background-color: var(--color-background);
    container-type: inline-size;
    container-name: section;
}

.kg-card {
    --max-inline-size: calc(100% - (2 * var(--gutter-spacing)));
}

@media screen and (min-width: 45rem) {
    .section-regular,
    .section-content,
    .kg-width-regular {
        --section-padding-inline: 0;
        --section-margin-inline: auto;
        --max-inline-size: calc(45rem - (2 * var(--gutter-spacing)));
        --section-margin: 0 auto;
    }
    .kg-card {
        --max-inline-size: calc(45rem - (2 * var(--gutter-spacing)));
    }
}
@media screen and (min-width: 60rem) {
    .section-medium,
    .kg-width-medium {
        --section-padding-inline: 0;
        --section-margin-inline: auto;
        --max-inline-size: calc(60rem - (2 * var(--gutter-spacing)));
        --section-margin: 0 auto;
    }
}
@media screen and (min-width: 80rem) {
    .section-wide,
    .kg-width-wide {
        --section-padding-inline: 0;
        --section-margin-inline: auto;
        --max-inline-size: calc(80rem - (2 * var(--gutter-spacing)));
        --section-margin: 0 auto;
    }
}

@media screen and (max-width: 45rem) {
    .section-content > *:not(.kg-card) {
        margin-inline: var(--section-padding-inline);
    }
}

.kg-width-full {
    --max-inline-size: none;
    --section-padding-inline: 0;
    --section-margin-inline: 0;
}

.section-regular > .container,
.section-medium > .container,
.section-wide > .container {
    padding-block: var(--section-padding-block);
    padding-inline: var(--section-padding-inline);
    max-inline-size: var(--max-inline-size);
    margin-inline: var(--section-margin);
}
.section-content.size-regular > *:not(.kg-card),
.kg-card {
    padding-block: var(--section-padding-block);
    margin-inline: var(--section-margin-inline);
    max-inline-size: var(--max-inline-size);
    /* margin-block: var(--section-margin); */
}


@media screen and (min-width: 45rem) {
    .section-regular > .container,
    .section-content.size-regular > *:not(.kg-card) {
        margin-inline: auto;
    }
}

@media screen and (min-width: 60rem) {
    .section-medium > .container,
    .section-content.size-medium > *:not(.kg-card) {
        margin-inline: auto;
    }
    
}

@media screen and (min-width: 80rem) {
    .section-wide > .container,
    .section-content.size-wide > *:not(.kg-card) {
        margin-inline: auto;
    }
}

svg.icon,
svg.lucide {
    width: 1.5rem;
    height: 1.5rem;
    fill: transparent;
    background-color: unset;
}

button,
a.button,
.kg-cta-button  {
    font-size: var(--font-size-base);
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: var(--border-radius);
    border: var(--borders);
    border-color: var(--color-button-background, var(--color-background-tertiary));
    background-color: var(--color-button-background, var(--color-background-tertiary));
    color: var(--color-button-text, var(--color-black));
    text-decoration: none;
    display: inline-flex;   
}

button:hover,
a.button:hover,
button:focus,
a.button:focus {
    border-color: var(--color-button-background-hover, var(--color-secondary));
    background-color: var(--color-button-background-hover, var(--color-secondary));
    color: var(--color-white);
}

button:has(svg) {
    border: none;
    background: transparent;
    color: var(--color-text);
}
button:has(svg):hover,
button:has(svg):focus {
    border: none;
    background: transparent;
    color: var(--color-button-background, var(--color-background-tertiary));
}

/* Typography */
body {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
    font-family: var(--font-family-heading, var(--font-family));
    line-height: var(--line-height-heading);
}

h1, .h1 {
    font-size: 3.815rem;
}
h2, .h2 {
    font-size: 3.052rem;
}
h3, .h3 {
    font-size: 2.441rem;
}
h4, .h4 {
    font-size: 1.953rem;
}
h5, .h5 {
    font-size: 1.563rem;
}
h6, .h6 {
    font-size: 1.25rem;
}
p {
    font-size: 1rem;
}
small, .small {
    font-size: 0.875rem;
}
.really-small {
    font-size: 0.64rem;
}

::selection { 
  background: var(--color-primary);
  color: var(--color-white);
}
::-moz-selection {
  background: var(--color-primary);
  color: var(--color-white);
}

code {
    font-family: var(--font-family-code);
    background-color: var(--color-background-tertiary);
    border-radius: 0;
    padding-inline: 0.25rem;
}

a {
    text-decoration: none;
}
a:visited {
    color: var(--color-link-visited);
}
a:not([class]) {
    display: inline-block;
    background-color: var(--color-link-background);
    color: var(--color-link);
    text-decoration: underline;
    padding-inline: var(--link-padding);
}
a:hover, a:focus {
    transition: all 0.15s ease-in-out;
    border-color: var(--color-link-hover);
}

a:not([class]):hover,
a:not([class]):focus {
    transition: all 0.15s ease-in-out;
    color: var(--color-link-hover);
    /* text-decoration: none; */
    border-color: var(--color-link-hover);
    transform: scale(1.025);
}

figure {
    inline-size: 100%;
}

img {
    inline-size: 100%;
    block-size: 100%;
    border-radius: var(--border-radius);
    border: var(--borders);
}

.text-center {
    text-align: center;
}

blockquote {
    border-left: 4px solid var(--color-secondary);
    padding-inline: 1rem;
    margin-block: 1rem;
    color: var(--color-text);
    font-style: italic;
}
blockquote cite {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: var(--color-secondary);
}


/* Components */

/* card */
.card {
    container-type: inline-size;
    container-name: card;
    background-color: var(--color-background);
    border-radius: var(--border-radius);
    margin-bottom: 1.5rem;
    border: var(--borders);
}

.card-link {
    display: flex;
    padding: 1rem;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    gap: var(--flow-gap);
}
.card-link:hover,
.card-link:focus {
    box-shadow: var(--shadow-md);
}

.card-wrapper {
    inline-size: 100%;
}

.card-wrapper .card-title {
    text-align: center;
}

@container card (min-width: 30rem) {
    .card-link {
        flex-direction: row;
    }
    .card figure {
        max-inline-size: 35%;
    }
    .card-wrapper .card-title {
        text-align: left;
    }
}

.post-content > * {
    margin-block: var(--flow-gap);
}

.post-content > h1, .post-content > h2, .post-content > h3, .post-content > h4, .post-content > h5, .post-content > h6 {
    margin-block-start: var(--section-padding);
}


/* profile */

.profile {
    /* background-color: var(--color-background-secondary); */
    container-type: inline-size;
    container-name: profile;
}

.profile .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    justify-content: center;
    gap: calc(var(--flow-gap) * 2);
}

.profile figure {
    max-inline-size: calc(45rem - (2 * var(--gutter-spacing)));
    inline-size: 100%;
    margin: 0 auto;
}

.profile .profile-bio {
    text-align: left;
}

.profile .profile-description {
    padding-block: var(--section-padding);
}

@container profile (min-width: 60rem) {
    .profile .container {
        flex-direction: row;
        text-align: left;
        align-items: center;
    }
    .profile > .container > * {
        flex: 1;
    }
    .profile .profile-bio {
        text-align: left;
    }
}

/* Header and Navigation */

.site-header {
    --mobile-height: 64px;
    --desktop-height: 120px;
    position: relative; /* for absolute-positioned mobile menu */

}

.site-header a:not([class]) {
    background-color: transparent;
    text-decoration: none;
    transform: none;
}

.site-title {
    line-height: 1;
    text-decoration: none;
}

/* Desktop / Mobile header switches */
.mobile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--flow-gap);
    width: 100%;
    height: var(--mobile-height);
}

.desktop-header {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: var(--flow-gap);
    width: 100%;
}

/* Burger button */
.burger-buttons {
    background: transparent;
    border: 0;
    padding: 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    color: var(--color-text);
}

.desktop-buttons {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: var(--flow-gap);
}

/* Mobile hamburger menu (hidden by default) */
.hamburger-menu {
    display: none;
    position: absolute;
    inset-inline: 0;
    top: calc(var(--mobile-height) + (2 * var(--section-padding)));
    background: var(--color-background);
    padding-inline: var(--gutter-spacing);
    padding-block: var(--section-padding);
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    z-index: 20;
}

.hamburger-menu > * {
    display: flex;
    flex-direction: column;
    gap: var(--flow-gap);
    justify-content: center;
}

/* When open, show menu */
.mobile-header.is-open .hamburger-menu {
    display: block;
}

nav ul {
    list-style: none;
}

nav li {
    font-size: var(--font-size-large);
}

/* Desktop navigation visible on wide screens */
@media screen and (min-width: 45rem) {
    .mobile-header { display: none; }
    .desktop-header { display: flex; }
    .hamburger-menu { display: none !important; }

    .desktop-nav {
        display: flex;
        gap: 1rem;
    }

    .desktop-nav ul { display: flex; gap: 1rem; list-style: none; margin: 0; padding: 0; }
}

/* small-screen tweaks */
@media screen and (max-width: 40rem) {
    .site-title { font-size: 1.5rem; }
}

.kg-card {
    /* border-radius: var(--border-radius); */
    padding: 1rem;
    --media-height: 90vh;
}

@media screen and (min-width: 45rem) {
    .kg-card {
        --media-height: 75vh;
    }
    
}

figure.kg-card.kg-image-card,
figure.kg-card.kg-video-card,
div.kg-card.kg-file-card,
div.kg-card.kg-button-card {
    background-color: transparent;
    padding: 0;
    max-block-size: var(--media-height);
}

figure.kg-card.kg-video-card {
    border: var(--borders);
    border-radius: var(--border-radius);
}

.kg-card.kg-video-card video {
    max-block-size: calc(var(--media-height) - (2 * var(--border-thickness)));
    width: auto;
    position: relative;
    height: 100%;
    margin-inline: auto;
}

.kg-card.kg-video-card .kg-video-container {
    height: 100%;
    padding: 0 !important;
}

.kg-card.kg-file-card a.kg-file-card-container {
    --ghost-accent-color: var(--color-text, var(--color-coral));
    background-color: var(--color-background);
}

.kg-card.kg-callout-card {
    background-color: var(--color-background-secondary);
    border: var(--borders);
    border-radius: var(--border-radius);
    color: var(--color-text);
}