/*----------------------------------------------------------------------------------------------------------------------*/

@font-face {
    font-family: 'Regrets-Ornaments';
    src: url('../fonts/Regrets-Ornaments/Regrets-Ornaments.woff2') format('woff2');
    font-display: block;  /* Text will be hidden until the font is fully loaded */	
}
@font-face {
    font-family: 'Mondwest';
    src: url('../fonts/Mondwest/Mondwest-Bold.woff2') format('woff2');
    font-weight: 400; /* Regular */
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Mondwest';
    src: url('../fonts/Mondwest/Mondwest-Bold.woff2') format('woff2');
    font-weight: 700; /* Regular */
    font-style: normal;
    font-display: block;
}
@font-face {
    font-family: 'EditorialNew';
    src: url('../fonts/Editorial/PPEditorialNew-Medium.woff2') format('woff2');
    /*src: url('../../web_blog_me/fonts/test/PPEditorialNew-Regular.otf') format('opentype');*/
    font-weight: 400; /* Regular */
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'EditorialNew';
    src: url('../fonts/Editorial/PPEditorialNew-Italic.woff2') format('woff2');
    font-weight: 400; /* Regular Italic */
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'EditorialNew';
    src: url('../fonts/Editorial/PPEditorialNew-Bold.woff2') format('woff2');
    font-weight: 700; /* Bold */
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'EditorialNew';
    src: url('../fonts/Editorial/PPEditorialNew-BoldItalic.woff2') format('woff2');
    font-weight: 700; /* Bold Italic */
    font-style: italic;
    font-display: swap;
}

/*----------------------------------------------------------------------------------------------------------------------*/


:root{
    --bg-color:#C6C6BE; /* #C4C4C4 Background color (for both light and dark modes) */
    --font-color:#0B294D; /* Text color */

    --link-color:#7A2C92; /* Link color */
    --link-hover-color:#663062; /* Link hover color */
    --link-decoration-color:#663062; /* Link decoration color */
    --accent-color:#0B294D; /* Accent color (for highlights, etc.) */
    
    --input-bg:#C6C6BE; /* Input background color */
    --button-bg:#D1D1C1; /* Button background color */
    --button-fg:#0B294D; /* Button text color */
    --button-border-color: #0B294D; /* Button border color */
    --button-hover-bg: #9B4D96; /* Button hover background */
    --button-hover-fg: #FFFFFF; /* Button hover text color */
    
    --font-weight:400; /* Default font weight */
    /*--font-size: 18px; /* Variable font-size */

    --separator-color:#0B294D; /* Separator or border color */
    --anti-yellow:var(--bg-color); /* Anti-yellow color (to prevent yellowish tint) */
}
html{
    box-sizing:border-box;
}
*,*:before,*:after{
    box-sizing:inherit; /* Global box-sizing*/
    margin: 0;
    padding: 0;
}
*::selection {
	background-color:#0B294D; /* Custom selection style */
	color:#FFFFFF;
}
/* webKit-specific rendering */
*::-webkit-selection {
    background-color: #0B294D;
    color: #FFFFFF;
}


body{
    font-family: 'EditorialNew', Helvetica, sans-serif;
    font-weight: var(--font-weight);
    /*font-size: var(--font-size);*/
    color: var(--font-color);
    background-color: var(--bg-color);
    width: 90%;  /* Ensures content takes up 90% of the available space 80*/
    max-width: 600px;  /* Controls maximum width, good for larger screens 750*/
    margin: 0 auto;  /* Centers the content horizontally */
}
hr{
    border: 0; 
    border-top: 1.35px dashed var(--font-color);
}


/* Styling <a> global tag */
a{
    display: inline-block; /* Make the link behave like a block element */
    color: var(--link-color); /* Link color */
    text-decoration-color: var(--link-decoration-color);
    border: 1.5px solid transparent; /* Transparent border by default */
    border-radius: 5px; /* Rounded corners */
    transition: all 0.3s ease; /* Smooth transition */
    box-sizing: border-box; /* Ensures padding/border don't affect layout */
}
a:hover{
    color: var(--link-color); /* Change the link color on hover */
    border-color: var(--link-color); /* Add a border */
    /*box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); /* Optional: subtle shadow on hover */
    box-shadow: 0 0 1.5px var(--accent-color);
    text-decoration: none; /* Ensure no underline on hover */
    outline: none; /* Remove outline */
    /*padding: 0.1em 0.2em;*/
}
a:focus {
    border: 1.5px solid var(--accent-color); /* Keep border thickness the same */
    box-shadow: 0 0 1.5px var(--accent-color), 0 0 0 0.5px var(--accent-color); /* Add a shadow to emphasize focus */
    outline: none; /* Remove outline */
}
a.tooltip_link {
    position: relative;
    color: var(--link-color);
}
a.tooltip_link::after {
    content: attr(data-title); /* Use the custom data attribute */
    position: absolute; /* Position the tooltip absolutely relative to the link */
    bottom: 120%; /* Position the tooltip 120% above the link (distance from the bottom of the link) */
    left: 50%; /* Center the tooltip horizontally relative to the link */
    transform: translateX(-50%); /* Shift tooltip left by 50% of its own width to ensure it's centered */
    /* bottom: 1%, left: 50%, transform: translateX(140%) -- for the header a */
    padding: 8px;
    background-color: #4A4A4A;
    color: white;
    font-family: 'EditorialNew', monospace;
    font-size: 0.8em; /* rem */
    border-radius: 10px;
    opacity: 0; /* Initially hide the tooltip (invisible and with no opacity) */
    visibility: hidden;
    pointer-events: none; /* Prevent interaction with the tooltip before it appears (i.e., no clicks) */
    transition: opacity 0.2s, visibility 0.2s;
    white-space: nowrap; /* Prevent the tooltip from wrapping the text, keep it on a single line */
}
a.tooltip_link:hover::after {
    opacity: 1;
    visibility: visible;
}


/* Styling <a>, <span>, and <img> in the header*/
header{
    margin:1em 0;
}
header a {
    border-color: transparent;
}
header a:hover{
    border-color: transparent;
    box-shadow: none;
}
header a span{
    font-family: 'Regrets-Ornaments'; 
    font-weight: normal;
}
header a img {
    width: 0.72em; /* 2.15rem */
    height: auto; 
    vertical-align: middle;
}


/* Styling <a> in the footer*/
footer{
    border-top:1.5px solid var(--separator-color);
    padding-top:1em;
    margin:1em 0 2em;
    line-height:1.5;
    opacity: 0.9;
    text-align:center;
}
footer a{
    padding:0 .5em;
    white-space:nowrap;
}
.tagline{
    font-size: 0.9em; /* 0.9 "rem" */
}


/* Styling global headers h1,h2,h3,h4 and <p> */
p{
    /*text-align: justify;*/
}
h1{
    margin:0;
    padding:0;
    font-size:3em; /* "rem" */
}
h1 a{
    text-decoration:none;
    color:inherit;
}
h1 a:hover{
    color: var(--link-color);
}
h1.mondwest{
    font-family: 'Mondwest';
}
h2{
    font-family: 'Mondwest','EditorialNew',sans-serif;
    margin:0;
    margin-top:1.25em;
    margin-bottom:.25em;
    font-size: 2em; /* 1.75 "rem" */
}
h3{
    font-size:1.5em; /* 1.25 "rem" */
    margin:0;
    padding:.25em 0;
}
h4{
    font-size:1.25em; /* 1.15 "rem" */
    margin:.25em 0;
    font-weight:400;
    font-style:italic;
}


/* Styling the TOC - table_of_content container */
.toc_container {
    background-color:#D1D1C1; /* #E0E0E0 */
    border: 1.5px solid var(--accent-color);
    border-radius: 8px; 
    padding: 0.5em;
    /*box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);*/
    margin-bottom: 1em;
    font-size: 0.95em;
}
details summary {
    padding: 0px;
    background-color: #D1D1C1;
    cursor: pointer;
    border-radius: 5px;
}
.toc_container ul{
    line-height:1.3;
    margin:1em 0;
    font-size: 1em;
    padding-left: 2em;
}
.toc_container ul ul{
    line-height:1.3;
    margin:0;
    font-size: 1em;
    padding-left: 2em;
}
.toc_container a{
    text-decoration: none;
}


/* Styling the Edition List on homepage and full archive-page */
ul{
    margin:0;
}
ul.edition_list{
    padding:0;
    line-height:1.3;
    margin-bottom:.5em;
}
li.edition{
    list-style:none;
    padding:.5em 0;
    /*text-align: justify;*/
}
li.edition+li.edition{
    border-top:1.35px dashed var(--font-color); /* applies border only between adjacent .edition list items */
}
li.edition span.edition_date a{
    text-decoration: none;
}
ul.abt_me{
    padding-left:1em;
    line-height:1.3;
    text-align: justify;
}
ul.abt_me li{
    padding:.25em 0;
}
ul.abt_me li a{
    font-family: 'Mondwest','EditorialNew',monospace;
}


/* Styling article: summary (title), and article body (text) */
article div.edition_summary{
    font-weight:var(--font-weight);
    font-style:italic;
    padding-bottom:1em;
    margin-bottom:1em;
    border-bottom:1.35px dashed var(--font-color);
    /*text-align: justify;*/
}
article p, article ul, article ol{
    line-height:1.3;
    margin:1em 0;
    /*text-align: justify;*/
}
article ul ul, article ol ol, article ul ol, article ol ul{
    line-height:1.3;
    margin:0.25em 0;
}
article p+p{
    margin-top:1em;
}
article p.footnotes{
    font-size: 1em;
}
article ul.footnotes, article ol.footnotes{
    font-size: 1em;
    padding-left: 2em;
}
article+section{
    margin-top:1em;
    padding-top:1em;
    border-top:1.35px dashed var(--font-color);
}
/* Styling Tables within article */
article table{
    background-color: #D1D1C1;
    border-collapse: collapse;
    border-color:var(--accent-color);
    border-style:solid;
    font-family: 'Mondwest','EditorialNew',monospace;
    font-size:0.9em;
    border-width: 2px;
}
article .tg  {
    border-collapse:collapse;
    border-spacing:0;
}
article .tg td{
    border-color:var(--accent-color);
    border-style:dashed;
    border-width:1px;
    overflow:hidden;
    word-break:normal;
    padding: 0.25em;
    line-height: 1.15;
}
article .tg th{
    border-color:var(--accent-color);
    border-style:solid;
    border-width:2px;
    overflow:hidden;
    word-break:normal;
}
article .tg .tg_content{
    border-color:inherit;
    text-align:left;
    vertical-align:middle;
}
article .tg .tg_title{
    border-color:inherit;
    font-weight:bold;
    text-align:center;
    vertical-align:top;
    padding: 0.25em;
}
/* Styling table and figure headings */
article .fig_headings{
    font-size:0.9em;
    text-align: center;
    text-decoration:underline;
    text-decoration-color:var(--link-decoration-color);
    margin: 0.5em 0;
    display: block;
}
article strong{
    text-decoration:underline;
    text-decoration-color:var(--link-decoration-color);
}
/* Styling super-scripts for references */
article sup{
    font-family: 'Mondwest','EditorialNew',monospace;
}
article sup a{
    text-decoration: none;
}
/* Styling blockquote for Summaries and for Citation */
article blockquote {
    font-style: italic;
    /*padding-left: 0.5em;
    border-left: 5px solid var(--accent-color);*/
    background-color: #D1D1C1;
    border: 1.5px dashed var(--accent-color);
    padding: 0.5em 0.5em;
    border-left: 5px solid var(--accent-color);
    text-align: justify;
    margin: 2em 0;
    /*margin: 20px 0;*/
}
/* Styling mathematical formulas/equation inside <img> tag! svg files */
.math_eq{
    display:block;
    background-color: #D1D1C1;
    border-radius: 8px; /* Rounded corners */
    padding: 0.5em 0.5em;
    margin-left: auto;
    margin-right: auto;
    /* width:; 10pt ! */
    height: auto;
    max-width: 100%; /* Fix out of bounds horizontal svg with larger viewbox */
}


/* Styling navigation buttons @articles/editions */
div.edition_nav_button{
    display:flex;
    flex-wrap:wrap;
}
div.edition_nav_button > div{
    width:50%;
    display:inline-block;
    padding-right:.25em;
}
div.edition_nav_button > div+div{
    padding-left:.25em;
    padding-right:0;
}


/* Styling button (--atm Read Full Archive) */
.full_width{
    display:block;
    width:100%;
}
.full_width:hover {
    text-decoration: none;
}
.button{
    font-weight: var(--font-weight);
    /*font-size: var(--font-size);*/
    background:var(--button-bg);
    color:var(--button-fg);
    border:0;
    border: 2px solid var(--button-border-color);
    border-radius:5px;
    outline:0;
    padding:.75em 1em;
    cursor:pointer;
    text-decoration:none;
    text-align:center;
    -webkit-appearance:none;
}
.button:hover{
    background: var(--button-hover-bg); /* Change background on hover */
    color: var(--button-hover-fg); /* Change text color on hover */
    border-color: var(--link-decoration-color); /* Change the border color */
    /*box-shadow: 0 0 0 2px var(--accent-color); /* Add shadow effect to simulate outline, but no layout shift */
    box-shadow: 0 0 1.5px var(--accent-color), 0 0 0 0.5px var(--link-decoration-color);
}
.button:focus{
    /*outline: 2px solid var(--accent-color); /* Show outline for focus effect */
    /*outline-offset: 2px; /* Space between button and outline */
    border: 2px solid var(--accent-color);
}


@media(max-width:450px){
    h1{
        font-size:2em;
    }
}
@media(min-width: 768px) {
    body {
        width: 90%;  /* Ensures content takes up 90% of the available space 80*/
        max-width: 725px;  /* Controls maximum width, good for larger screens 725*/
    }
}