/* colour themes */
:root {
    --uchu-orange-8: oklch(58.28% 0.128 52.2);
    --uchu-red-7: oklch(49.95% 0.195 18.34);
    --uchu-red-3: oklch(69.86% 0.162 7.82);

    --uchu-orange-4: oklch(78.75% 0.14163582809066333 54.32911089172009);

    --uchu-blue-3: oklch(70.94% 0.136 258.06);
    --uchu-blue-8: oklch(43.48% 0.17 260.2);

    --uchu-yellow-1: oklch(97.05% 0.039 91.2);
    --uchu-yin-9: oklch(25.11% 0.006 258.36);

    --bg: light-dark(var(--uchu-yellow-1), var(--uchu-yin-9));
    --text: light-dark(var(--uchu-yin-9), var(--uchu-yellow-1));

    --accent: light-dark(var(--uchu-red-7), var(--uchu-orange-4));
    --accent2: light-dark(var(--uchu-blue-8), var(--uchu-blue-3));
}

/* dark mode */
@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;
    }
}

      /* Light Mode */
[data-theme="light"] {
    color-scheme: light;
}

[data-theme="dark"] {
    color-scheme: dark;
}

[data-theme='dark'] .centered-img,
[data-theme='dark'] .col-img
 {
    -webkit-filter: invert(100%);
    filter: invert(1) hue-rotate(11deg);
}

#toggleBtn {
    background: var(--bg);
    border: 0px;
    width: 25px;
}

/* #toggleBtn svg {
    fill: var(--text);
} */

#toggleBtn:hover {
    cursor: crosshair;
}
/* end dark mode */

/* main body styling */
html {
    overflow-x: hidden;
}

body {
    font-family: ui-rounded, 'Hiragino Maru Gothic ProN', Quicksand, Comfortaa, Manjari, Calibri, source-sans-pro, sans-serif;
    font-weight: normal;
    font-optical-sizing: auto;
    font-size: large;
    font-style: normal;
    font-variation-settings: "width" 100;
    line-height: 1.5;
    color: var(--text); /* text and background color */
    background-color: var(--bg);
    max-width: 80%; /* width */
    margin-left: auto;
    margin-right: auto;
    text-rendering: optimizeSpeed;
}

p {
    text-align: justify;
}

/* link styling */
a {
    color: var(--accent2);
}

a:hover {
    text-decoration-thickness: 0.1em;
}

.twocol {
    align-items: center;
    align-content: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

/* page title and nav class */
.header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    text-align: center;
    /* justify-content: space-between; This separates the h1 and nav */
    justify-content: space-around;
    margin-bottom: 10px;
    margin-top: 0px;
    gap: 0 2em;
}

.header a {
    color: var(--text);
    text-decoration: none;
}

.header a:hover {
    text-decoration: underline;
    text-decoration-thickness: 0.1em;
    text-decoration-color: var(--accent);
}

nav ul {
    font-weight: 500;
    font-size: larger;
    list-style-type: none; /* Removes bullet points from the list */
    padding: 0;            /* Removes padding */
    margin-top: 0;
}

nav ul li {
    display: inline;       /* Displays list items inline */
    margin-right: 10px;    /* Space between links */
}

.header ul a {
    color: var(--accent);
    text-decoration: none;
}

.header ul a:hover {
    text-decoration: underline;
    text-decoration-thickness: 0.1em;
    text-decoration-color: var(--text);
}

/* main content */
main {
    margin: 0 auto;
    max-width: 60ch;
}

h2, h3 {
    color: var(--text);
    text-decoration: underline;
    text-decoration-color: var(--accent);
}

h2 {
    text-align: center;
}

hr {
    border: none;
    height: 1px;
    background-color: var(--accent);  /* Modern Browsers */
    color: var(--accent);
}

/* images (like those on the process page - not headshot and not bacp logo */
.centered-img {
    display:block;
    margin-left:auto;
    margin-right:auto;
}

.portrait {
    float:left;
    margin-right: 10px;
    border-radius: 5%;
}

.portrait-right {
    float: right;
    margin-left: 10px;
    border-radius: 5%
}

.twocol > div img {
    height: auto; /* Maintains the aspect ratio of the image */
    display: block; /* Treat the image as a block element to apply centering */
    margin: auto;
}

.logo {
    display: block; /* or inline-block, depending on your specific needs */
}

.footer-text {
    display: none; /* Hide text by default */
}

.header-anchor {
    color: var(--text);
    text-decoration-color: var(--accent);
}

ul {
    line-height: 1.8;
}

/* for small screens */
@media (max-width: 600px) {

    .portrait, .portrait-right {
        max-width: 80vw;
        height: auto;
        padding-bottom: 5px;
        display: block;  /* Makes the element a block box */
        margin: auto;    /* Centers the block element horizontally */
        float: none;     /* Remove float for medium-sized screens */
    }

    .centered-img {
        width: 80vw;
        height: auto;
        margin: auto;
    }
}

/* for smaller screens */
@media screen and (max-width: 300px) {

    .col-img, .centered-img, .portrait, .portrait-right, .logo {
        display: none;
    }
    .footer-text {
        display: block;
    }
}

/* nonsense for hanging plant off of hr */
.fancy-hr {
    position: relative;
}

.fancy-hr hr {
    width:100vw;
    border: var(--accent);
    border-top: 1px solid var(--accent);
    margin: 0 calc((100vw - 100%) / -2);
}

/* the SVG “hanging” off the left‑hand side */
.fancy-hr #hanging {
    position: absolute;
    right: clamp(
        -75px, calc(-75px + (1000px - 100vw) *0.05), -40px
    );
    top: 100%;
    transform: translateY(calc(-0.045 * clamp(100px, 25vw, 250px)));
    height: 25vw;
    min-height: 100px;
    max-height: 250px;
    max-width: 80px;
    /* z-index: -1; */
}

path {
    fill: var(--text);
}

#hanging path {
    animation-name: pulseColour;
    animation-duration: 2s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
    animation-play-state: paused;
}

#hanging:hover,
#hanging:active {
    cursor: url("/assets/wateringCan.svg") 16 16, auto;
}

[data-theme='dark'] #hanging:hover,
[data-theme='dark'] #hanging:active {
    cursor: url("/assets/wateringCanDark.svg") 16 16, auto;
}

#hanging:hover path, #hanging:active path {
    animation-play-state: running;
}

@keyframes pulseColour {
    to { fill: oklch(52.77% 0.138 145.41); }
}