/* =====================================================
   ARCANAEUM MASTER STYLESHEET
   ORGANIZATION PASS ONLY
   No selectors, properties, or values have been changed.
===================================================== */

/* =====================================================
   01. FOUNDATION & GLOBAL VARIABLES
===================================================== */


:root{
    --bg:#070b12;
    --panel:rgba(18,24,38,.88);
    --border:rgba(190,210,255,.28);
    --accent:#cbb9ff;
    --accent2:#9ca7ff;
    --text:#e6dcc6;
}


/* =====================================================
   02. GLOBAL RESET & BASE ELEMENTS
===================================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:'EB Garamond', serif;
    background:#070b12;
    color:var(--text);
}



/* =====================================================
   03. UTILITY BAR
===================================================== */

.utility-bar{
    background:rgba(5,8,18,.85);
    border-bottom:1px solid rgba(190,210,255,.12);
    text-align:center;
    padding:8px 20px;
    font-size:.95rem;
}

.utility-bar a{
    color:#cfd7ff;
    text-decoration:none;
    margin:0 12px;
}

.utility-bar a:hover{
    color:white;
}



/* =====================================================
   04. HEADER & BRANDING
===================================================== */

.header-brand{
    max-width:1200px;
    margin:0 auto;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.brand-left{
    display:flex;
    align-items:center;
    gap:20px;
}

.brand-left img{
    width:88px;
    height:88px;
    object-fit:contain;
    filter:drop-shadow(0 0 12px rgba(120,200,255,.45));
}

.header-text{
    text-align:left;
}

.header-links{
    display:flex;
    gap:24px;
    font-size:.95rem;
    align-self:flex-start;
    margin-top:4px;
}

.header-links a{
    color:#cfd7ff;
    text-decoration:none;
}

.header-links a:hover{
    color:white;
}

header{
    background:rgba(8,12,22,.65);
    backdrop-filter:blur(12px);
    border-bottom:1px solid var(--border);
    padding:14px 28px;
}

header h1{
    font-family:'Cinzel', serif;
    font-size:2.3rem;
    letter-spacing:4px;
    color:#d9cfff;
}

header p{
    margin-top:10px;
    color:#cfd5e6;
}


/* =====================================================
   05. PRIMARY NAVIGATION
===================================================== */

nav{
    font-family:'Cinzel', serif;
    letter-spacing:.5px;

    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:12px;
    padding:8px;
    background:rgba(5,8,18,.75);
}

nav a{
    text-decoration:none;
    color:white;
    padding:6px 14px;
    transition:all .3s ease;
    border:none;
    border-right:1px solid rgba(190,210,255,.12);
}

nav a:hover{
    color:var(--accent);
    text-shadow: 
        0 0 4px rgba(180,220,255,.8),
        0 0 8px rgba(160,210,255,.6),
        0 0 16px rgba(140,190,255,.4);

    box-shadow:
        0 0 8px rgba(140,190,255,.25);

    border-color:rgba(180,220,255,.5);
}


/* =====================================================
   06. HERO & SEARCH EXPERIENCE
===================================================== */

.hero{
    width:90%;
    max-width:1200px;
    margin:60px auto;
    padding:30px;
    background:var(--panel);
    backdrop-filter:blur(12px);
    border:1px solid var(--border);
    border-radius:20px;
    text-align:center;

    box-shadow:
        0 0 30px rgba(156,167,255,.08);
}

.hero h2{
    font-family:'Cinzel', serif;
    font-size:3rem;
    color:var(--accent);
    margin-bottom:15px;
}

.hero p{
    max-width:700px;
    margin:auto;
    line-height:1.8;
}

.search-container{
    margin-top:35px;
}

.search-main{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}

.search-main input{
    flex:1;
    min-width:300px;
    padding:18px;
    border-radius:12px;
    border:none;
    font-size:1rem;
}

.search-main button{
    padding:18px 30px;
    border:none;
    border-radius:12px;
    background:linear-gradient(135deg,#9ca7ff,#d8c8ff);
    font-weight:bold;
    cursor:pointer;
}

.search-main button:hover{
    padding:18px 30px;
    border:black;
    border-radius:12px;
    background:linear-gradient(135deg,#828bcb,#d8c8ff);
    font-weight:bold;
    cursor:pointer;
}

.advanced-search{
    margin-top:25px;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
    gap:15px;
}

.advanced-search select{
    padding:12px;
    border-radius:10px;
}

.filters{
    width:100%;
    max-width:1000px;
    margin:30px auto 0 auto;
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    justify-content:center;
    padding-bottom:0px;
}

.filter-btn{
    background:var(--panel);
    border:1px solid var(--border);
    padding:12px 18px;
    border-radius:50px;
}

.filter-btn:hover{
    color:#ffffff;
    text-shadow: 
        0 0 4px rgba(180,220,255,.8),
        0 0 8px rgba(160,210,255,.6),
        0 0 16px rgba(140,190,255,.4);

    box-shadow:
        0 0 8px rgba(140,190,255,.25);

    border-color:rgba(180,220,255,.5);
    cursor: pointer
}


/* =====================================================
   07. SHARED LAYOUT COMPONENTS
===================================================== */

.section{
    width:90%;
    max-width:1200px;
    margin:45px auto;
}

.section h2{
    font-family:'Cinzel', serif;
    color:var(--accent);
    margin-bottom:20px;
}

.grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:25px;
}


/* =====================================================
   08. CARD SYSTEM
===================================================== */

.card{
    background:var(--panel);
    border:1px solid var(--border);
    padding:25px;
    border-radius:16px;
    box-shadow:0 4px 18px rgba(0,0,0,.18);
}

.card h3{
    color:var(--accent);
    margin-bottom:15px;
}

.card p{
    line-height:1.6;
    margin-bottom:15px;
}

.card a{
    color:#cfd7ff;
    text-decoration:none;
}


/* =====================================================
   09. FEATURED COLLECTION
===================================================== */

.featured-book{
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:20px;
    padding:60px 70px;
}

.featured-book h3{
    font-size:2.5rem;
    color:var(--accent);
    margin-bottom:15px;
}

.featured-book p{
    line-height:1.8;
    margin-bottom:20px;
}


.hero-banner{
    background:
        linear-gradient(
            rgba(5,8,18,.35),
            rgba(5,8,18,.45),
            rgba(5,8,18,.90)
        ),
        url('arcanaeumimage.jpg');

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;

    min-height:430px;

    display:flex;
    justify-content:center;
    align-items:center;

    padding:40px 20px;
}

.content-area{
    background:#070b12;
    
    padding-top:40px;
}


.browse-heading{
    text-align:center;
    font-family:'Cinzel', serif;
    color:var(--accent);
    margin-bottom:25px;
    letter-spacing:2px;
}

.section-divider{
    width:100%;
    border-top:1px solid rgba(190,210,255,.15);
    margin:25px auto 45px auto;
}




.featured-book{
    position:relative;
    overflow:hidden;
}

.featured-book:before{
    content:'';
    position:absolute;
    inset:0;
    background:
        linear-gradient(rgba(8,12,22,.62),rgba(8,12,22,.82)),
        url('dragonb.jpeg');
    background-size:cover;
    background-position:center;
    opacity:.48;
    pointer-events:none;
}

.featured-book > *{
    position:relative;
    z-index:1;
}


.card{
    position:relative;
    overflow:hidden;
    transition:.25s ease;
}

.card:hover{
    transform:translateY(-6px) scale(1.015);
    box-shadow:0 12px 30px rgba(0,0,0,.35);
}

.card:before{
    content:'';
    position:absolute;
    inset:0;
    background:
        linear-gradient(rgba(8,12,22,.82),rgba(8,12,22,.92)),
        url('arcanaeumimage.jpg');
    background-size:cover;
    background-position:center;
    opacity:.18;
    pointer-events:none;
}

.card > *{
    position:relative;
    z-index:1;
}


.footer-links{
    margin-bottom:14px;
}

.footer-links a{
    color:#cfd7ff;
    text-decoration:none;
    margin:0 12px;
}

.footer-links a:hover{
    color:white;
}



/* =====================================================
   10. BROWSE COLLECTION CARDS
===================================================== */

.browse-card{
    padding:0 !important;
    overflow:hidden;
}

.browse-card{
    transition:
        transform .25s ease,
        box-shadow .25s ease;
    will-change:transform;
}


.browse-card{
    cursor:pointer;
}


.browse-card img{
    width:100%;
    height:220px;
    object-fit:cover;
    display:block;
}

.browse-card-content{
    padding:22px;
}

.browse-card h3{
    margin-bottom:12px;
}

.browse-link{
    display:inline-block;
    margin-top:10px;
    color:#cfd7ff;
    text-decoration:none;
}


/* Browse card rhythm */
.browse-card.books-card{margin-top:0;}
.browse-card.authors-card{margin-top:40px;}
.browse-card.subjects-card{margin-top:40px;}
.browse-card.collections-card{margin-top:0;}

/* Unique image overlays */
.browse-card.books-card:before{
    background:linear-gradient(rgba(120,90,40,.18),rgba(30,20,10,.45));
    opacity:1;
}

.browse-card.authors-card:before{
    background:linear-gradient(rgba(60,110,170,.18),rgba(10,20,35,.45));
    opacity:1;
}

.browse-card.subjects-card:before{
    background:linear-gradient(rgba(120,70,170,.18),rgba(25,10,35,.45));
    opacity:1;
}

.browse-card.collections-card:before{
    background:linear-gradient(rgba(170,140,70,.16),rgba(30,25,10,.40));
    opacity:1;
}

.browse-card img{
    position:relative;
    z-index:0;
}

.browse-card-content{
    position:relative;
    z-index:2;
}


/* =====================================================
   11. FOOTER
===================================================== */

footer{
    text-align:center;
    padding:30px;
    margin-top:80px;
    background:#03060c;
    border-top:1px solid var(--border);
}


/* =====================================================
   14. RESPONSIVE / MOBILE RULES
===================================================== */

@media(max-width:768px){

.hero{
    padding:25px;
}

header h1{
    font-size:2rem;
}

}


.archive-stats{
max-width:1200px;
margin:0 auto 20px auto;
display:grid;
grid-template-columns:repeat(4,1fr);
background:rgba(10,14,24,.85);
border:1px solid rgba(190,210,255,.18);
}
.archive-stats div{padding:18px;text-align:center;}
.archive-stats strong{display:block;font-size:1.4rem;color:var(--accent);}
.archive-stats span{display:block;color:#cfd5e6;}

.search-count{
margin-top:18px;
color:#cfd5e6;
font-size:.95rem;
letter-spacing:.5px;
}

.hero{
border:1px solid rgba(210,220,255,.35);
box-shadow:0 0 40px rgba(180,210,255,.08);
}

.featured-book{
box-shadow:0 0 25px rgba(156,167,255,.12);
}

.featured-book:before{
    content:'';
    position:absolute;
    inset:0;
    background:
        linear-gradient(rgba(8,12,22,.62),rgba(8,12,22,.82)),
        url('dragonb.jpeg');
    background-size:cover;
    background-position:center;
    opacity:.48;
    pointer-events:none;
}

.featured-content{
display:flex;
min-height:260px;
align-items:center;
max-width:100%;
}

.featured-label{
font-size:.8rem;
letter-spacing:2px;
margin-bottom:12px;
color:#cfd5e6;
}

.featured-meta{
display:flex;
gap:18px;
margin:15px 0;
font-size:.9rem;
color:#d8dff7;
}

.card-label{
font-size:.75rem;
letter-spacing:2px;
text-transform:uppercase;
color:#cfd5e6;
margin-bottom:8px;
}


/* Accessibility & UX Improvements */

/* =====================================================
   12. ACCESSIBILITY & INTERACTION STATES
===================================================== */

a:focus,
button:focus,
input:focus,
select:focus{
    outline:2px solid #d8c8ff;
    outline-offset:2px;
}

.search-main input::placeholder{
    color:#6f7585;
}

.search-main button{
    min-width:180px;
}

.nav-active{
    color:var(--accent) !important;
    text-shadow:0 0 6px rgba(180,220,255,.7);
    border-bottom:2px solid rgba(180,220,255,.6);
}

.skip-link{
    position:absolute;
    left:-9999px;
}
.skip-link:focus{
    left:20px;
    top:20px;
    z-index:9999;
    background:#070b12;
    color:white;
    padding:10px 14px;
    border:1px solid var(--border);
}

@media(max-width:768px){
    .featured-book{
        padding:30px;
    }
}

@media (prefers-reduced-motion: reduce){
    *{
        transition:none !important;
    }
}


/* Scroll Reveal Animations */

/* =====================================================
   13. ANIMATIONS & REVEAL EFFECTS
===================================================== */

.reveal{
    opacity:0;
    transform:translateY(40px);
    transition:opacity .8s ease, transform .8s ease;
}

.reveal.visible{
    opacity:1;
    transform:translateY(0);
}

.books-card{transition-delay:.05s;}
.authors-card{transition-delay:.12s;}
.subjects-card{transition-delay:.19s;}
.collections-card{transition-delay:.26s;}


/* Suggestion 1 & 2 - Featured Collection whole-card interaction */
.featured-book{
    cursor:pointer;
    transition:transform .25s ease, box-shadow .25s ease;
}

.featured-book:hover{
    transform:translateY(-6px) scale(1.015);
    box-shadow:0 12px 30px rgba(0,0,0,.35);
}

/* Suggestion 5 - Expanded footer layout */
.footer-grid{
    max-width:1000px;
    margin:0 auto 24px auto;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
    text-align:left;
}
.footer-grid h4{
    margin-bottom:10px;
    color:#cbb9ff;
    font-family:'Cinzel', serif;
}
.footer-grid a{
    display:block;
    color:#cfd7ff;
    text-decoration:none;
    margin:6px 0;
}

/* Suggestion 6 - Advanced search collapse */
.advanced-search{
    display:none;
}
.advanced-search.open{
    display:grid;
}
.advanced-toggle{
    margin-top:15px;
    cursor:pointer;
    color:#cfd7ff;
}

/* Suggestion 9 - Consistent card heights */


.search-controls-wrapper{
    position:relative;
}

.advanced-search{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    z-index:50;
    display:none;
    margin-top:10px;
    background:rgba(8,12,22,.96);
    border:1px solid rgba(190,210,255,.18);
    border-radius:12px;
    padding:15px;
}

.advanced-search.open{
    display:grid;
}



.featured-book.reveal{
    transition:
        opacity 1.2s ease,
        transform 1.2s ease;
}


/* Mobile UX improvements */
@media (max-width:768px){
    nav{display:none;}
    .header-links{display:none;}

    .search-main{
        position:relative;
        display:block;
    }

    .search-main select{
        display:none;
    }

    .search-main input{
        width:100%;
        min-width:0;
        padding:18px 70px 18px 18px;
    }

    .search-main button{
        position:absolute;
        right:6px;
        top:6px;
        bottom:6px;
        min-width:auto;
        padding:0 18px;
        border-radius:10px;
    }

    .hero h2{font-size:2rem;}
}


/* Mobile UX vNext */
@media (max-width:768px){

    /* Search button becomes compact icon */
    .search-main button{
        background:rgba(20,28,44,.95) !important;
        border:1px solid rgba(190,210,255,.28) !important;
        color:#d8dff7 !important;
        min-width:52px !important;
        width:52px;
        padding:0 !important;
        font-size:0 !important;
    }

    .search-main button::before{
        content:'🔍';
        font-size:18px;
    }

    /* Nudge Advanced Search slightly lower */
    .advanced-toggle{
        position:relative;
        top:2px;
    }

    /* Floating return-to-search button */
    .search-fab{
        position:fixed;
        right:18px;
        bottom:18px;
        width:56px;
        height:56px;
        border-radius:50%;
        background:rgba(20,28,44,.95);
        border:1px solid rgba(190,210,255,.28);
        color:#d8dff7;
        display:flex;
        align-items:center;
        justify-content:center;
        text-decoration:none;
        z-index:9999;
        box-shadow:0 6px 18px rgba(0,0,0,.35);
    }
}

@media (min-width:769px){
    .search-fab{display:none;}
}


/* Mobile hamburger menu */
@media (max-width:768px){
  .mobile-menu-toggle{
      position:fixed;
      right:16px;
      top:12px;
      width:auto;
      height:42px;
      padding:0 12px;
      border-radius:10px;
      border:1px solid rgba(190,210,255,.18);
      background:rgba(8,12,22,.75);
      color:#d8dff7;
      display:flex;
      align-items:center;
      justify-content:center;
      z-index:20;
      cursor:pointer;
  }

  .header-brand{position:relative;}
  .mobile-menu-row{
      margin-top:8px;
      display:flex;
      justify-content:flex-start;
  }

  nav.mobile-open{
      display:flex !important;
      flex-direction:column;
      gap:0;
      padding:12px;
      background:rgba(5,8,18,.96);
  }

  nav.mobile-open a{
      border-right:none;
      padding:12px;
  }
}

@media (min-width:769px){
  .mobile-menu-toggle{display:none;}
}

.browse-card:hover{
    transform:translateY(-3px) scale(1.01) !important;
}

select,
input,
button,
textarea {
    font-family: 'EB Garamond', serif;
    font-size: 1rem;
}

select {
    font-size: 0.95rem;
}

/* =====================================================
   CARD HOVER GLOW EFFECT
===================================================== */

.card:hover {
    border-color: rgba(210,220,255,.45) !important;
    box-shadow: 
        0 0 12px rgba(180,220,255,.18),
        0 0 24px rgba(180,220,255,.08),
        0 4px 18px rgba(0,0,0,.25) !important;
}

.featured-book:hover {
    border-color: rgba(210,220,255,.45) !important;
    box-shadow: 
        0 0 12px rgba(180,220,255,.18),
        0 0 24px rgba(180,220,255,.08),
        0 4px 18px rgba(0,0,0,.25) !important;
    transform: translateY(-6px) scale(1.015) !important;
}

/* =====================================================
   SEARCH BUTTON STYLING (ADD HERE)
===================================================== */
.search-main button,
.search-bar button {
    background: linear-gradient(135deg, var(--accent), #d8c8ff) !important;
    border: 1px solid rgba(203,185,255,.4) !important;
    color: #070b12 !important;
    box-shadow: 0 4px 12px rgba(203,185,255,.2);
    transition: all .3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.search-main button:hover,
.search-bar button:hover {
    box-shadow: 
        0 0 15px rgba(203,185,255,.35),
        0 0 30px rgba(156,167,255,.2),
        0 6px 20px rgba(0,0,0,.3);
    transform: translateY(-2px);
}

/* =====================================================
   15. FUTURE PAGE NAMESPACES
   Reserved for:
   .search-page
   .book-page
   .author-page
   .collection-page
   .subject-page
===================================================== */