/**************
    GLOBAL CSS STYLESHEET
    ***************/


/***************
----VARIABLES---
****************/

:root {
    /***
    COLOR PALLATE
    ***/
    --primary: #191919;
    --primary-transparent: rgba( 25, 25, 25, 0.8);
    --secondary-grad: linear-gradient(45deg, #ffd45f, #b4870b);
    --accent-grad: linear-gradient(-45deg, #bb80ed, #8928db, #bb80ed);
    --accent: #a22abc;
    --secondary: #f0c44a;
    --bevel-shadow: -1px -1px 1px rgba(252, 234, 122, 0.685),
                    1px 1px 1px rgba(100, 69, 14, 0.6);
    --type-color: #fff;
    --form-field-color: #313030a3;
    --background-image: url("../images/Dark-Fantasy-Background-Corruption.webp");
    
    /***
    FONTS
    ***/
    --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    --sans-serif: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
    
    /***
    Formating
    **/
    --max-screen-width: 960px;
    --std-column-width: 90vw;
    --accent-border-size: 3px solid;
    --gaps: 20px;
    
    /***
    Font Sizes
    ***/
    --std-cpy-font-size: 1.25rem;
    --std-cpy-line-height-mult: 1.4;
    --std-drop-cap-size: calc(var(--std-cpy-font-size)*2.6);
    --std-drop-cap-line-height: calc(var(--std-cpy-line-height-mult)*.7);
    --subhead-font-size: calc(var(--std-cpy-font-size)*1.35);
    --heading-line-height-mult: 1.16;
    --std-h1-font-size: calc(var(--std-cpy-font-size)*2.4);
    --std-h2-font-size: calc(var(--std-cpy-font-size)*2.1);    
    --std-h3-font-size: calc(var(--std-cpy-font-size)*1.8);   
    --std-h4-font-size: calc(var(--std-cpy-font-size)*1.05);
}

.center{
    text-align: center !important;
    justify-content: center !important;
}
.two-column{
    display: flex;
    justify-content: center;
}
.two-column .col{
    flex: 1;
    min-width: 40%;
    margin: 10px;
}
@media screen and (max-width: 720px){
    .two-column .col{
        width: 100%;
        margin: 0;
        padding: 10px;
    }
    .two-column{
        display: block;
    }
}
/* The Modal (background) */
.modal {
    display: none; 
    position: fixed; 
    z-index: 99999; /* Higher than everything else */
    left: 0;
    top: 0;
    width: 100vw; /* Full viewport width */
    height: 100vh; /* Full viewport height */
    overflow: auto; 
    background-color: var(--primary-transparent);
    align-items: center; /* Vertical center */
    justify-content: center; /* Horizontal center */
}

/* The Image inside the modal */
.modal-content {
    margin: auto;
    display: block;
    max-width: 90%;
    max-height: 80%;
}

/* Close Button */
.close {
    position: absolute;
    top: 20px;
    right: 35px;
    color: white;
    font-size: 60px;
    font-weight: bold;
    cursor: pointer;
}
/*****************
 -----Header------
 *****************/

header {
    background: var(--primary);
    color: var(--type-color);
    padding: var(--gaps);
    text-align: right;
    width: 100%;
    font-family: var(--serif);
    border-bottom: var(--accent-border-size);
    border-image-source: var(--accent-grad);
    border-image-slice: 1;
    position: sticky;
    top: 0;
    z-index: 2000;
}
header nav{
    display: grid;
    grid-template-columns: 1fr 4fr;
    grid-template-areas: "logo nav";
    align-items: center;
    max-width: var(--max-screen-width);
    padding: 10px;
    margin: 0 auto;
    font-size: var(--std-cpy-font-size);
}
header nav ul{
    grid-area: nav;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

header nav ul li {
    display: inline-block;
    margin-left: 20px;
    font-weight: 700;
    font-family: var(--serif);
}

header nav ul li a.current {
    color: var(--accent);
}

header nav ul li a:hover {
    text-decoration: underline;
}

#logo{
    min-width: 200px;
}
/******************
DOMAIN CARDS
******************/
#ThirteenDomains {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    padding: 20px;
}

.domain-card {
    flex: 1 1 150px; /* Grow, shrink, start at 150px */
    max-width: 150px;

    height: 200px;   /* Adjust height based on your design */
    perspective: 1000px;
    cursor: pointer;
}

.card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    background: var(--primary); /* Dark fantasy background */
    border: 1px solid var(--type-color);
    border-radius: 3px;
}
#ThirteenDomains p{
    color: var(--type-color)
}
/* Hover Effects */
.domain-card:hover .card-inner {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.5);
    border-color: var(--secondary); /* Gold highlight on hover */
}

/* Positioning the states */
.state {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: end;
    transition: opacity 0.3s ease;
    padding: 15px;
    text-align: center;
}

.state img {
    width: 80%;
    grid-area: img;
    height: auto;
    margin-bottom: 15px;
}
.state p{
    grid-area: cont;
}
/* Hide the 'Open' text by default */
.state.open {
    opacity: 0;
}

/* Swap visibility on hover */
.domain-card:hover .state.closed {
    opacity: 0;
}

.domain-card:hover .state.open {
    opacity: 1;
}

/* Typography */
.ancient-text { font-style: italic; color: #888; }
.translated-text { font-weight: bold; color: #fff; text-transform: uppercase; letter-spacing: 1px; }
/*******************
----Mobile Menu-----
 *******************/

@media screen and (max-width: 720px) {
    #menu-toggle {
        display: flex; /* Show hamburger */
        flex-direction: column;
        position:absolute;
        right:var(--gaps);
    }
    nav button{
        z-index: 1500;
        width:30px;

    }
    .nav-seperator {
        display: none; /* Hide the "||" on mobile */
    }

    #header-nav {
        position: fixed;
        right: 0;
        top: 0;
        height: 100vh;
        width: 70%; /* Sidebar width */
        background: var(--primary);
        flex-direction: column; /* Stack links vertically */
        align-items: center;
        justify-content: flex-start;
        padding: var(--gaps) 0;
        
        /* The Slide Logic */
        transform: translateX(100%); /* Start off-screen to the right */
        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 1000;
        box-shadow: -5px 0 15px rgba(0,0,0,0.5);
    }

    /* When the menu is active, slide it in */
    #header-nav.nav-active {
        transform: translateX(0%);
    }

    #header-nav li {
        margin: var(--gaps) 0;
        font-size: var(--std-h3-font-size);
    }
    header nav button div.bar{
        background: var(--type-color);
        width: 30px;
        height: 3px;
        margin: 5px 0;
        display:block;
    }
    /* Ensure the bars have a smooth transition */
    header nav button div.bar {
        transition: all 0.3s ease-in-out;
    }

    /* 1. Rotate the top bar */
    .toggle-animation .bar:nth-child(1) {
        transform: translateY(13px) rotate(45deg);
    }

    /* 2. Fade out the middle bar */
    .toggle-animation .bar:nth-child(2) {
        opacity: 0;
        transform: translateX(-20px); /* Optional: slides it out of view */
    }

    /* 3. Rotate the bottom bar */
    .toggle-animation .bar:nth-child(3) {
        transform: translateY(-13px) rotate(-45deg);
    }
    
}

/*******************
---Book Highlight---
********************/

#book-highlight{
    max-width: 700px;
    margin: var(--gaps) auto;
    width: var(--std-column-width);
}
#book-highlight .text-block ul li{
    display:inline;
    font-size: var(--std-cpy-font-size);
    line-height: var(--std-cpy-line-height-mult);
}
#book-highlight .text-block ul{
    text-align: left;
}
.book-cover{
    max-width: 300px;
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto var(--gaps);
}
.book-links{
    display:grid;
    grid-template-columns: 1fr .25fr 1fr;
    grid-template-areas: "amazon space goodreads";
    width: 100%;
    margin: 0 auto;
}
.button:hover{
    background: var(--accent-grad);
}
.amazon-button{
    grid-area: amazon;
}
.goodreads-button{
    grid-area: goodreads;
}
@media screen and (max-width: 600px){
    .book-links{
        grid-template-columns: 1fr;
        grid-template-areas: 
            "amazon"
            "goodreads";
        margin: calc(var(--gaps)*0.5) auto;
    }
    .button{
        margin: calc(var(--gaps)*0.5) auto!important;
        width: 100%;
    }
}


/******************
---Main content----
******************/
main {
    background-image: var(--background-image);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    min-height: 80vh;
    padding: var(--gaps);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: top;
    color: var(--type-color);
    text-align: center;
    width: 100%;
}
@media screen and (max-width: 720px){      
    main {
         background-image: url(../images/Dark-Fantasy-Background-Corruption-mobile.webp);
         background-repeat: repeat-y;
         background-attachment: scroll;
         background-position: top; 
         background-size: auto;
    }
}
main p {
    text-align: left;
    margin-bottom: calc(var(--gaps)*0.5);
    font-size: var(--std-cpy-font-size);
    line-height: var(--std-cpy-line-height-mult);
}
main h1{
    font-size: var(--std-h1-font-size);
    line-height: var(--heading-line-height-mult);
    font-family: var(--serif);
    font-weight: 700;
    background: var(--secondary-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-variant: small-caps;
    text-shadow: var(--bevel-shadow);       
    text-align: center;
    margin: calc(var(--gaps)*1.5);
}
.subtitle{
    font-size: var(--subhead-font-size);
    color:var(--type-color);
    text-shadow: none;
    font-variant: small-caps;
    line-height: var(--heading-line-height-mult);
    text-transform: lowercase;
    display:block;
}
main h2{
    font-size: var(--std-h2-font-size);
    font-weight: 700;
    text-shadow: var(--bevel-shadow);
    background-image: var(--secondary-grad);
    background-clip: text;
    color:transparent;
    text-align: left;
    text-transform: uppercase;
}
main h4{
    text-align: left;
    font-weight: 700;
    font-size: var(--std-h4-font-size);
    font-variant: small-caps;
    line-height: var(--heading-line-height-mult);
}
main h3{
    text-align: left;
    font-weight: 400;
    font-size: var(--std-h3-font-size);
    font-variant: normal;
    line-height: var(--heading-line-height-mult);
}
main .top-of-container{
    margin-top:0;
}
main .bottom-of-container{
    margin-bottom:0;
}
.drop-cap::first-letter {
    font-size: var(--std-drop-cap-size);
    float: left;
    line-height: var(--std-drop-cap-line-height);
    padding-right: 8px;
    padding-top: 0px;
    padding-bottom: 0px;
}
.text-block{
    background-color: var(--primary-transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: var(--gaps);
    font-family: var(--serif);
}
@media (max-width: 768px) {
  .text-block {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}
.button{
    display:block;
    padding: calc(var(--gaps)*0.5) var(--gaps);
    background: var(--secondary-grad);
    color: var(--type-color);
    min-width: 150px;
    text-align: center;
    margin: var(--gaps) 0;
    font-weight: 700;
    text-shadow: var(--primary) 1px 1px 2px;
    text-transform: uppercase;
    font-family: var(--sans-serif);
}
.divider{
    width: 80%;
    margin: var(--gaps) auto;
    max-width: 700px;
}
@media screen and (max-width: 720px){
    .divider{
        width: 95%;
    }
}
main a:hover{
    color: var(--type-color);
    text-shadow: 2px 2px 1px var(--accent);
    text-decoration: underline;
}
main a{
    color: var(--accent);
    font-weight: 700;
    text-shadow: none;
}
main section {
    width: 100%;
    max-width: var(--max-screen-width);
    padding: calc(var(--gaps)*0.5);
    box-sizing: border-box;
}
@media screen and(max-width: 700px){
    main section{
        width: 100%!important;
        padding: 0;
    }
}
.disclosure{
    font-size: calc(var(--std-cpy-font-size)*.8);
    text-align: center;
    font-style: italic;
    padding-top:0;
    margin-top: 0px;
    line-height: calc(var(--std-cpy-line-height-mult)*.8);

}
table{
    width: 100%;
    color: var(--type-color);
}
th, td{
    border: 1px solid var(--type-color);
    padding: 5px;
    font-size: var(--std-cpy-font-size);
}
.gold-star{
    background-clip: text;
    color: var(--secondary);
}
.rating{
    text-align: center;
}
.table-title{
    background-color: var(--type-color);
    color: var(--primary);
    font-weight: 900;
    text-transform: uppercase;
}
.acc-text{
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
#cosmology-model{
    width: 60%;
    max-width: 300px;
    min-width: 150px;
    margin: 0 auto;
}
/*******************
-Dark Fantasy Blurb-
********************/

#dark-fantasy-blurb{
    width: var(--std-column-width);
    max-width: var(--max-screen-width);
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-template-areas: "img blurb";
    padding: calc(var(--gaps)*0.5);
}
#dark-fantasy-blurb img{
    width: auto;
    height: 100%;
    grid-area: img;
    object-fit: cover;
    object-position: left center;
}
#dark-fantasy-blurb .text-block{
    grid-area: blurb;
}
#dark-fantasy-blurb h2, #book-inspiration-ref h3{
    font-size: var(--std-h2-font-size);
    line-height: var(---heading-line-height-mult);
    font-family: var(--serif);
    font-weight: 700;
    background: var(--secondary-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-variant: small-caps;
    text-shadow: var(--bevel-shadow);        
    text-align: left;
}
#book-inspiration-ref h3{
    text-align: center;
}
@media screen and (max-width: 720px){
    #dark-fantasy-blurb{
        grid-template-columns: 1fr;
        width: var(--std-column-width);
        padding:0;
        margin-top: var(--gaps);
        grid-template-areas: "img" "blurb";
    }
    #dark-fantasy-blurb h2{
        font-size: var(--std-h2-font-size);
    }  
}

/*******************
--Book Inspiration--
********************/

#book-inspiration-ref{
    width: var(--std-column-width);
    max-width: var(--max-screen-width);
    padding: calc(var(--gaps)*0.5);
}
.book-covers{
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin: var(--gaps) auto;
    align-items: center;
    justify-items: center;
    justify-content: center;
}
.book-covers a img{
    height: 220px;
    object-fit: cover;
}
.book-covers a img:hover{
    border: 3px solid;
    border-image-source: var(--accent-grad);
    border-image-slice: 1;
}

/*****************
-Newsletter Signup
******************/
.hbspt-form{
    text-align: left;
}
.hbspt-form input{
    background-color: var(--form-field-color);
    color: var(--type-color);
    padding-left: 10px;
    width:100%;
    height: 40px;
    border-bottom: var(--accent-border-size);
    border-image-source: var(--accent-grad);
    border-image-slice: 1;
}
.hbspt-form label, .legal-consent-container .hs-form-booleancheckbox-display>span{
    font-size: var(--std-h4-font-size);
    line-height: var(--heading-line-height-mult);
    margin-top: 10px;
}
.hbspt-form .hs-richtext{
    font-size: var(--std-cpy-font-size);
    line-height: var(--std-cpy-line-height-mult);
    margin-top: calc(var(--gaps)*0.5);
}
.hbspt-form .hs-form-booleancheckbox input{
    height: 15px;
    width: 25px;
    display: inline;
    position: relative;
    top: 5px;
}
.hbspt-form .actions input{
    border: none;
    background: var(--accent-grad);
    margin: var(--gaps) 0;
    color: var(--type-color);
    font-family: var(--sans-serif);
    font-weight: 700;
    text-transform: uppercase;
}

.hbspt-form .actions input:hover{
    border: none;
    background: var(--secondary-grad);
    margin: var(--gaps) 0;
    color: var(--type-color);
    font-family: var(--sans-serif);
    font-weight: 700;
    text-transform: uppercase;
}
#hs-cta-form .hbspt-form ul{
    list-style-type: none;
}
#hs-cta-form{
    width: var(--std-column-width);
    padding: calc(var(--gaps)*0.5);
    max-width: var(--max-screen-width);
}
#hs-cta-form h3{
    color:transparent;
    background: var(--secondary-grad);
    background-clip: text;
    font-size: var(--std-h3-font-size);
    font-weight: 900;
    text-transform: uppercase;
    text-shadow: var(--bevel-shadow);
    text-align: center;
}
#hs-cta-form p{
    color: var(--type-color);
    font-family: var(--serif);
    font-size: var(--std-cpy-font-size);
    text-align: left;
    margin: calc(Var(--gaps)*0.5) auto;

}
#discord-logo{
    
    margin: 0px auto;
}
#hs-cta-form h4{
    text-align: left;
    font-variant: normal;
    font-weight: 700;
}
#hs-cta-form ul{
    list-style-type: disc;
    margin-left: 30px;
}
#hs-cta-form ul li{
    text-align: left;
    font-size: var(--std-cpy-font-size);
    line-height: var(--std-cpy-line-height-mult);
}
#discord-button{
    background-color: #5865f2;
    padding: 20px;
    width: 70%;
    max-width: 250px;
    margin: 30px auto 20px;
    border-radius: 20px;
}


/***************
-----Footer-----
***************/

footer {
    background: var(--primary);
    color: var(--type-color);
    text-align: center;
    padding: var(--gaps);
    width: 100%;
    font-family: var(--sans-serif);
    display: flex;
    flex-direction: column;
    align-items: center;
    border-top: var(--accent-border-size);
    border-image-source: var(--accent-grad);
    border-image-slice: 1;
}

footer #social-links li {
    display: inline-block;
    margin: 0 10px;
    font-weight: 700;
}

footer nav ul {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    margin: var(--gaps) auto;

}

footer nav ul li{
    display: inline-block;
    margin: 0 15px;
    font-weight: 700;
    white-space: nowrap;
    font-family: var(--serif);
}
footer nav ul li a {
    color: var(--type-color);
    text-decoration: none;
}

footer nav ul li a.current {
    text-decoration: underline;
}
footer a#logo{
    max-width: 250px;
    margin-top: var(--gaps);
}