/* Made by me, commented by Copilot for my sanity*/

@import url("fonts.css"); /* import font library */
@import url("./decoration/brutalism.css");  /* Load decoration style */
/* @import url("menu.css"); loaded in index.html */ /* Load the menu styling from a separate file */

/* Set limits for how wide the entire webpage can be */
#index-html {
    max-width: 1024px; /* The page will never stretch wider than 1024px */
    min-width: 700px;  /* The page will never shrink smaller than 700px */
    margin: auto; /* center the site */
 /*   -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale; */
}

/* Style the whole page background and scrolling behavior */
#index-body {
    background-color: var(--decoration-general-background); /* Use theme background color */
    overflow: auto; /* Allow scrolling if content is too tall */
}

/* Style for the main logo at the top */
#main-logo {
    display: block; /* Make the logo behave like a block element (takes full width) */
}

/* Container that holds the main content and the sidebar */
#content-area { 
    display: flex; /* Place children next to each other horizontally */
    flex: 1; /* Allow this container to grow to fill available space */
    width: 100%; /* Make it span the full width of the page */
    height: calc(100vh - 305px); /* Set height based on screen height minus 360px */
}

/* Main content area where dynamic content appears */
#dynamic-content {
    flex: 1; /* Take up all remaining space before sidebar */
    margin-right: 0%; /* No right margin */
    margin-left: 3px; /* Small left margin for spacing */
    vertical-align: top; /* Align content to the top */
    height: 100%; /* Fill the full height of the parent container */
    overflow-wrap: break-word; /* Break long words so they don’t overflow */
    word-wrap: break-word; /* Older version of the same rule for compatibility */

    background-color: var(--decoration-dynamic-content-background-color); /* Background color from theme */
    border-radius: var(--decoration-window-border-radius); /* Rounded corners */
    border: var(--decoration-window-border); /* Border style from theme */
    box-shadow: var(--decoration-window-shadow); /* Drop shadow for depth */
    box-sizing: var(--decoration-window-box); /* Controls if padding and border are part of window size */

}

/* commentary in article list */
[name="index-commentary"] {
    font-family: var(--decoration-dynamic-content-font); 
    color: rgb(114, 114, 111);
    font-size: 11pt;
}

/* link to article in article list */
[name="article-link"] {
    font-family: var(--decoration-dynamic-content-font);
    color: var(--decoration-article-link-color);
    text-decoration: var(--decoration-general-link-font-decoration);
    margin-bottom: 5px;

}

/* if article in main content want's to inherit formatig from decoration */
[name="dynamic-content"] {
    font-family: var(--decoration-dynamic-content-font);
}

/* main home page article */
#landing-page {  
    font-family: var(--decoration-dynamic-content-font);
}

/* Sidebar area on the right side */
#side-bar {
    margin-left: 0%; /* No left margin */
    margin-right: 5px; /* Space between sidebar and page edge */
    height: 100%; /* Fill full height of parent container */
    vertical-align: top; /* Align content to the top */
    width: 300px; /* Fixed width for the sidebar */

    background-color: var(--decoration-side-content-background-color); /* background prevents blink */
    box-shadow: var(--decoration-window-shadow); /* Drop shadow */
    box-sizing: var(--decoration-window-box); /* Controls if padding and border are part of window size */
    border-radius: var(--decoration-window-border-radius); /* Rounded corners */
    border: var(--decoration-window-border); /* Border style from theme */
}

/* content inside side bar */
#side-content {
    font-family: var(--decoration-side-content-font); /* lucida */
    font-size: var(--decoration-side-content-font-size);
}

[name="side-content-link"] {
    text-decoration: var(--decoration-general-link-font-decoration); /* defines underline and other nonsense */
    color: var(--decoration-side-content-link-color); /* since hover and visited styles are not defined it will always have this color*/
}

/* Footer bar at the bottom of the page */
#bottom-footer {
    margin-top: 10px;
    margin-left: 3px; /* Small left margin for spacing */
    height: 80px; /* Fixed height of the footer */
    width: 99.2%; /* Slightly less than full width to avoid overflow issues */

    border-radius: var(--decoration-window-border-radius); /* Rounded corners */
    border: var(--decoration-window-border); /* Border style from theme */
    box-shadow: var(--decoration-window-shadow); /* Drop shadow */
    box-sizing: var(--decoration-window-box); /* Controls if padding and border are part of window size */

    background-color: var(--decoration-footer-bakground-color); /* Footer background, putting it also here to eliminate blink from loading html in iframe */
}

#bottom-footer-content {
    background-color: var(--decoration-footer-bakground-color); /* Footer background */
    font-family: var(--decoration-footer-font); /* font for buttons and the 2 failsafes */
    font-weight: var(--decoration-footer-font-weight); /* weight of font normal, bold etc*/
    font-size: var(--decoration-footer-font-size);
    text-decoration: var(--decoration-footer-font-decoration); /* decorate underline */
}

/* style for links */
[name="general-link"] {
    text-decoration: var(--decoration-general-link-font-decoration); /* defines underline and other nonsense */
    color: var(--decoration-general-link-color); /* since hover and visited styles are not defined it will always have this color*/
}

[name="image-gallery"] {
    display: grid; /* Puts image thumbnail into grid */
    /* pattern in grid that autofits images until they are 200 pix wide, auto-fit means let browser decide how many can fit inside such a
    row and be at max wide depending on remaining space 1fr (fr meaning one extra space left)
    repeats repeats it
    */
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); 
    grid-auto-rows: 150px; /* fixed row height */
    margin-right: 1%;
    gap: 8px; /* gap between them in a row */
    grid-gap: 8px; /* old syntax */
}

/* image in image element gallery row should always fill given space */
[name="image-gallery-element"] {
    border: var(--decoration-image-gallery-thumbnail-border);
    border-radius: var(--decoration-image-gallery-thumbnail-border-radius);
    box-shadow: var(--decoration-image-gallery-thumbnail-shadow);
    width: 100%; /* width and heigh for them to fill space given them in a row*/
    height: 100%;   
}

[name="image-gallery-element-input"]  {
    display: none; /* hide checkbox for selector */
}

[name="image-gallery-element-input"]:checked + img {
    position: absolute; /* ignore grid and go to front, image is paired to input */
    left: 0px; /* start from left most side of document */

    /* fixes shadow being bellow scrollable iframe area */
    /*top: 40px;*/
    /*bottom: 1%;*/
   
    /* spacing correction for window and stupid behaviour of css */
    width: 98%; 
    /*height: 96%; */
    margin-left: 1%; 

    box-shadow: var(--decoration-image-gallery-view-shadow);
    /*border: 2px solid #d9945a;*/ /* this is inherited */
    
    z-index: 2147483647;  /* make it high priority so that if there is video under it it cannot be controled by clicking trough it */
    /*pointer-events: auto; */
}

[name="video-content"] {
    width: 99%;
    height: 400px;
    margin-top: 2%;
    margin-bottom: 5px;
    background-color: var(--color-pallete-main-background);
    border: var(--decoration-image-gallery-thumbnail-border);
    border-radius: var(--decoration-image-gallery-thumbnail-border-radius);
    box-shadow: var(--decoration-image-gallery-thumbnail-shadow);
}