/* main.css
-----------
This is where we put styles that are shared by all (or most) pages.
*/

/* COLOURS */
:root {
    color-scheme: light dark;
    --text-primary: light-dark(#4C566A, #c1c1c1);
    --text-secondary: light-dark(#ffffff, #E0E0E0);
    --text-light: light-dark(#757575, #808080);
    --accent-primary: light-dark(#548687, #C25B4C);
    --accent-hover: light-dark(#3D6B6C, #A8493D);
    --accent-dark: light-dark(#2b4d49, #8B3A3A);
    --accent-bright: light-dark(#35bbbe, #eb906a);
    --background-primary: light-dark(#e9e9e9, #282828);
    --background-secondary: light-dark(#ffffff, #141414);
    --background-shadow: light-dark(#00000040, #00000060);
    --low-opacity-darken-10: light-dark(#00000010, #FFFFFF10);
    --low-opacity-darken-20: light-dark(#00000020, #FFFFFF20);
    --color-error: light-dark(red, red);
    scrollbar-color: light-dark(#8b8b8b, #9f9f9f) light-dark(#fcfcfc, #333333);
}
:root[data-theme="light"] { 
    --text-primary: #4C566A;
    --text-secondary: #ffffff;
    --text-light: #757575;
    --accent-primary: #548687;
    --accent-hover: #3D6B6C;
    --accent-dark: #2b4d49;
    --accent-bright: #35bbbe;
    --background-primary: #e9e9e9;
    --background-secondary: #ffffff;
    --background-shadow: #00000040;
    --low-opacity-darken-10: #00000010;
    --low-opacity-darken-20: #00000020;
    --color-error: red;
    scrollbar-color: #8b8b8b #fcfcfc;
}
:root[data-theme="dark"] {
    --text-primary: #c1c1c1;
    --text-secondary: #E0E0E0;
    --text-light: #808080;
    --accent-primary: #C25B4C;
    --accent-hover: #A8493D;
    --accent-dark: #8B3A3A;
    --accent-bright: #eb906a;
    --background-primary: #282828; 
    --background-secondary: #141414;
    --background-shadow: #00000060;
    --low-opacity-darken-10: #FFFFFF10;
    --low-opacity-darken-20: #FFFFFF20;
    --color-error: red;
    scrollbar-color: #9f9f9f #333333;
}

/* SPECIAL */
.hidden {
    display:none !important;
}

/* TEXT STUFF */
body{
    font-family: 'Roboto', Arial, Helvetica, sans-serif;
    color: var(--text-primary);
}

h1, h2, h3, h4, h5, h6, span.logo-text {
    font-weight: bold;
    font-family: 'Cambria', Georgia, Times, 'Times New Roman', serif;
}

span.logo-text {
    font-style: italic;
}

h1{font-size: 2em;}
h2{font-size: 1.5em;}
h3{font-size: 1.17em;}
h4{font-size: 1em;}
h5{font-size: 0.83em;}
h6{font-size: 0.67em;}

p{
    font-size: 1em;
    margin: 1em 0;
    line-height: 1.4;
    hyphens: auto;
}

i { font-style: italic; }

/* LINKS (OUR DEFAULT) */
a {
    color: var(--accent-primary);
}
a:hover {
    color: var(--accent-bright);
}

/* GENERAL PAGE LAYOUT STUFF */
body {
    background-color: var(--background-primary);
    display: grid;
    grid-template-columns: auto 1fr auto;
}
body > header {
    grid-column-start: 1;
}
main {
    grid-column-start: 2;
    min-height: 100vh;
    box-sizing: border-box;
    padding: 2em;
}

.panel {
    background-color: var(--background-secondary);
    padding: 1.5em;
    border-radius: 0.75em;
    box-shadow: 0 0.25em 0.5em 0.2em var(--background-shadow);
}

.page-header {
    margin-bottom: 1.5rem;
}

.breadcrumbs a {
    font-style: italic;
    text-decoration:none;
}
.breadcrumbs a:hover {
    text-decoration:underline;
}

/* POSTING INFO COMPONENT */
.posting-info {
    font-style: italic;
}

/* SEARCH BAR */
.search-bar {
    background: var(--background-secondary);
    border: thin solid var(--background-shadow);
    border-radius: 4em;
    height:fit-content;

    display: grid;
    grid-template-columns: 1fr auto;
    align-items:center;
}
@media(prefers-color-scheme: dark) {
    .search-bar {
        border-color: var(--low-opacity-darken-20);
    }
}
.search-bar:has(input:focus) {
    border-color: var(--text-primary);
}
.search-bar .button-icon-only {
    border-radius: 1em;
}
.search-bar .icon-inline {
    fill: var(--text-light);
}

input[type="search"] {
    color: var(--text-primary);
    background-color: inherit;
    margin-left: 1em;
    padding: 0.4em 0.4em 0.4em 0;
    outline: none;
    border: none;
}
/* Disable webkit/blink browsers search cancel button */
input[type="search"]::-webkit-search-cancel-button {
    appearance: none;
}

/* REUSABLE ICON CLASSES */
/* icons the size of text */
.icon-inline {
    fill: var(--text-primary);
    width: 1em;
    height: 1em;
}

/* icon-only buttons */
.button-group-icon-only {
    font-size:0; /*necessary for removing browser-caused gap between buttons */
}
.button-icon-only {
    background: none;
    margin: 0;
    padding: 0.4rem;
    border: none;
    border-radius: 0.5em;

    display: inline-block;

    /* below properties fix weird button sizing issues */
    box-sizing: content-box;
    height: 1rem;
    font-size: 1rem;
}
.button-icon-only:hover {
    background-color: var(--low-opacity-darken-10);
    cursor: pointer;
}
.button-icon-only.togglable-post-button-active .icon-inline{
    fill: var(--accent-primary);
}
.button-icon-only:hover .icon-inline{
    fill: var(--accent-bright);
}