/* =========================
   CODEX HEADER
========================= */

.codex-header {
    padding: 24px;
    background: #0f0f0f;
    color: #fff;
    border-radius: 8px;
    margin-bottom: 20px;
}

.codex-header h1 {
    margin: 0 0 8px 0;
    font-size: 24px;
}

.codex-header p {
    opacity: 0.7;
    margin-bottom: 12px;
}

/* Sections spacing */
.codex-section {
    margin-bottom: 18px;
}

.codex-section strong {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    opacity: 0.9;
}

/* Links layout */
.codex-links {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.codex-links a {
    padding: 5px 10px;
    background: #1f1f1f;
    color: white;
    text-decoration: none;
    border-radius: 4px;
    font-size: 13px;
}

.codex-links a:hover {
    background: #333;
}


/* =========================
   CODEX GRID / CARDS
========================= */

/* Grid spacing */
.wp-block-query {
    gap: 12px;
}

.wp-block-post-template {
    gap: 12px;
}

/* Card base */
.wp-block-post {
    background: #111;
    padding: 10px 12px;
    border-radius: 8px;
    color: white;
    transition: 0.15s ease;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Hover effect */
.wp-block-post:hover {
    transform: translateY(-2px);
    background: #1a1a1a;
}

/* Title */
.wp-block-post-title {
    font-size: 15px;
    line-height: 1.2;
    margin: 0;
}

/* Excerpt */
.wp-block-post-excerpt {
    font-size: 13px;
    line-height: 1.3;
    opacity: 0.85;
    margin: 0;
}

/* Taxonomy labels */
.wp-block-post-terms {
    font-size: 11px;
    opacity: 0.75;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.wp-block-post-terms {
    font-size: 11px;
    opacity: 0.8;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

/* Make each term look like a tag */
.wp-block-post-terms a {
    background: #222;
    padding: 2px 6px;
    border-radius: 3px;
    text-decoration: none;
    color: white;
}
/* Slightly more “database entry” feel */
.wp-block-post {
    position: relative;
    overflow: hidden;
}

/* Subtle glow on hover */
.wp-block-post:hover {
    box-shadow: 0 0 10px rgba(255,255,255,0.05);
}

.wp-block-post:hover {
    transform: translateY(-2px) scale(1.01);
    transition: 0.15s ease;
}
/* =========================
   SCHOOL COLOR THEMES
========================= */

/* =========================
   SCHOOL COLOR TAG SYSTEM
   (works via term links)
========================= */

/* Black Magic */
a[href*="black-magic"] {
    border-left: 3px solid #5b2a86;
    padding-left: 6px;
}
/* Flow Magic */
a[href*="flow-magic"] {
    border-left: 3px solid #65EBDE;
    padding-left: 6px;
}
/* Singularity Magic */
a[href*="singularity-magic"] {
    border-left: 3px solid #9E7B90;
    padding-left: 6px;
}
/* Demonology Magic */
a[href*="demonology-magic"] {
    border-left: 3px solid #520C36;
    padding-left: 6px;
}
/* Blacklight */
a[href*="blacklight-magic"] {
    border-left: 3px solid #9b59b6;
    padding-left: 6px;
}

/* Fire */
a[href*="fire-elemental-magic"] {
    border-left: 3px solid #ff4b2b;
    padding-left: 6px;
}

/* Water */
a[href*="water-elemental-magic"] {
    border-left: 3px solid #3498db;
    padding-left: 6px;
}

/* Earth */
a[href*="earth-elemental-magic"] {
    border-left: 3px solid #7d6608;
    padding-left: 6px;
}

/* Air */
a[href*="elemental-air-magic"] {
    border-left: 3px solid #85c1e9;
    padding-left: 6px;
}

/* Necrotic */
a[href*="necrotic-magic"] {
    border-left: 3px solid #27ae60;
    padding-left: 6px;
}

/* Illumination */
a[href*="illumination_magic"] {
    border-left: 3px solid #f1c40f;
    padding-left: 6px;
}

/* =========================
   PRIMARY SCHOOL GLOW
   (card-level identity)
========================= */

/* Black Magic */
.wp-block-post:has(a[href*="black-magic"]) {
    box-shadow: 0 0 10px rgba(91, 42, 134, 0.25);
    border-left: 3px solid #5b2a86;
}

/* Fire */
.wp-block-post:has(a[href*="fire-elemental-magic"]) {
    box-shadow: 0 0 10px rgba(255, 75, 43, 0.25);
    border-left: 3px solid #ff4b2b;
}

/* Water */
.wp-block-post:has(a[href*="water-elemental-magic"]) {
    box-shadow: 0 0 10px rgba(52, 152, 219, 0.25);
    border-left: 3px solid #3498db;
}

/* Earth */
.wp-block-post:has(a[href*="earth-elemental-magic"]) {
    box-shadow: 0 0 10px rgba(125, 102, 8, 0.25);
    border-left: 3px solid #7d6608;
}

/* Air */
.wp-block-post:has(a[href*="elemental-air-magic"]) {
    box-shadow: 0 0 10px rgba(133, 193, 233, 0.25);
    border-left: 3px solid #85c1e9;
}

/* Necrotic */
.wp-block-post:has(a[href*="necrotic-magic"]) {
    box-shadow: 0 0 10px rgba(39, 174, 96, 0.25);
    border-left: 3px solid #27ae60;
}

/* Illumination */
.wp-block-post:has(a[href*="illumination_magic"]) {
    box-shadow: 0 0 10px rgba(241, 196, 15, 0.25);
    border-left: 3px solid #f1c40f;
}

/* =========================
   CLASS / RARITY SYSTEM
========================= */

a[href*="common"] {
    opacity: 0.8;
}

a[href*="noble"] {
    color: #d4af37;
    font-weight: 600;
}

a[href*="noble"] {
    text-shadow: 0 0 6px rgba(212, 175, 55, 0.4);
}

.wp-block-post {
    transition: all 0.15s ease;
}

/* Slight lift + focus effect */
.wp-block-post:hover {
    transform: translateY(-3px) scale(1.01);
}

/* Dim non-hovered cards slightly (focus system) */
.wp-block-post-template:hover .wp-block-post {
    opacity: 0.85;
}

.wp-block-post-template .wp-block-post:hover {
    opacity: 1;
}

.wp-block-post-title {
    font-size: 14px; /* was ~15px → minus 1px */
}

.wp-block-post-excerpt {
    font-size: 12px; /* was ~13px → minus 1px */
}

.wp-block-post-terms {
    font-size: 10px; /* was ~11px → tighter Codex feel */
}

.wp-block-post-title {
    letter-spacing: 0.2px;
}

.wp-block-post-excerpt {
    letter-spacing: 0.1px;
}

/*hover expansion
 */ 
.wp-block-post {
    position: relative;
    transition: all 0.18s ease;
    overflow: hidden;
}

/* Expand on hover */
.wp-block-post:hover {
    transform: translateY(-4px) scale(1.02);
    z-index: 5;
    box-shadow: 0 10px 25px rgba(0,0,0,0.4);
}

/* Slight blur reduction / focus effect on hovered card */
.wp-block-post-template:hover .wp-block-post {
    opacity: 0.75;
    filter: blur(0.2px);
}

.wp-block-post-template .wp-block-post:hover {
    opacity: 1;
    filter: none;
}

/* Hidden inspection layer (future ACF zone) */
.wp-block-post::after {
    content: "";
    position: absolute;
    bottom: 6px;
    right: 10px;
    font-size: 10px;
    opacity: 0;
    transition: 0.2s ease;
    color: rgba(255,255,255,0.4);
}

/* Show on hover */
.wp-block-post:hover::after {
    opacity: 1;
}
/*style equation slot
*/

.codex-equation,
.wp-block-post p:contains("Equation") {
    font-family: monospace;
    font-size: 11px;
    opacity: 0.85;
    background: #1a1a1a;
    padding: 4px 6px;
    border-radius: 4px;
    margin-top: 4px;
}


/* =========================
   SAFE HOVER SYSTEM (CLEAN)
========================= */
/* ==========================================
   REMOVE SPELL CODEX TITLE LINES
========================================== */


/* Remove text underline */

.entry-title,
.entry-title a,
.page-title,
.page-title a,
.wp-block-post-title,
.wp-block-post-title a{

    text-decoration:none !important;

    border-bottom:none !important;

}


/* Remove theme underline animations */

.entry-title a::after,
.page-title a::after,
.wp-block-post-title a::after{

    display:none !important;

    content:none !important;

}


/* Remove possible box shadow underline */

.entry-title a,
.page-title a,
.wp-block-post-title a{

    box-shadow:none !important;

}


/* Specific custom post type titles */

.spells .entry-title,
.spells .entry-title a,
.single-spells .entry-title,
.single-spells .entry-title a{

    text-decoration:none !important;

    border:none !important;

    box-shadow:none !important;

}

/* =========================
   BASE CARD STATE (FORCE STABILITY)
========================= */

.wp-block-post {
    opacity: 1 !important;
    visibility: visible !important;
    filter: none !important;

    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

/* Hover lift only */
.wp-block-post:hover {
    transform: translateY(-4px) scale(1.01);
    z-index: 5;
    box-shadow: 0 10px 25px rgba(0,0,0,0.4);
}

/* all buttons center*/
.codex-buttons {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}
.codex-buttons {
    text-align: center;
}
.codex-section {
    text-align: center;
}.wp-block-html {
    text-align: center;
}
.codex-search {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 20px;
}

.codex-search input[type="text"] {
    padding: 6px 10px;
    background: #111;
    border: 1px solid #333;
    color: white;
    border-radius: 6px;
    width: 220px;
}

.codex-search button {
    padding: 6px 10px;
    background: #222;
    border: 1px solid #444;
    color: white;
    border-radius: 6px;
    cursor: pointer;
}
.codex-search {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin: 20px auto;
}

.codex-search input[type="search"] {
    width: 260px;
    padding: 8px 12px;
    background: #111;
    color: white;
    border: 1px solid #444;
    border-radius: 6px;
    font-size: 14px;
}

.codex-search button {
    padding: 8px 16px;
    background: #222;
    color: white;
    border: 1px solid #555;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
}

.codex-search button:hover {
    background: #333;
}
/* =========================
   Website Identity
========================= */
/* ==========================================
   MATHSMAGICA HEADER
========================================== */

header,
.site-header,
#masthead{

    background:
        linear-gradient(
            180deg,
            rgba(30,45,85,.96),
            rgba(22,32,60,.94)
        ) !important;

    border-bottom:
        1px solid rgba(216,181,107,.45);

    box-shadow:
        0 8px 25px rgba(0,0,0,.25),
        0 0 18px rgba(216,181,107,.08);

    backdrop-filter: blur(10px);

}


/* Navigation links */

header a,
.site-header a,
.main-navigation a{

    color:#f4e7bf !important;

    font-weight:600;

    letter-spacing:.4px;

    transition:.25s;

}

header a:hover,
.site-header a:hover,
.main-navigation a:hover{

    color:white !important;

    text-shadow:
        0 0 10px rgba(255,220,120,.6);

}


/* Current page */

.current-menu-item > a,
.current_page_item > a{

    color:#ffe9a8 !important;

}
/* ==========================================
   MATHSMAGICA THEME
   By ChatGPT
========================================== */

/* ---------- Colours ---------- */

:root{

    --mm-bg:#0b1020;
    --mm-bg2:#11182d;
    --mm-panel:#17213b;
    --mm-gold:#d8b56b;
    --mm-gold-light:#f6dda2;
    --mm-text:#ececec;
    --mm-text2:#b8bfd3;
    --mm-border:rgba(216,181,107,.25);

}


/* ---------- Body ---------- */

body{

    background:
        radial-gradient(circle at top,
        rgba(35,58,120,.18),
        transparent 45%),

        linear-gradient(
        180deg,
        var(--mm-bg),
        #090d18);

    color:var(--mm-text);

    background-attachment:fixed;

}


/* ---------- Typography ---------- */

body,
p,
li{

    color:var(--mm-text2);

    line-height:1.8;

}


h1,h2,h3,h4,h5{

    color:var(--mm-gold-light);

    letter-spacing:1px;

    text-shadow:

        0 0 8px rgba(255,220,130,.18);

}


strong{

    color:white;

}


/* ---------- Links ---------- */

a{

    color:var(--mm-gold);

    transition:.3s;

}

a:hover{

    color:#fff3ca;

    text-shadow:

        0 0 12px rgba(255,220,120,.45);

}


/* ---------- Cards ---------- */

.wp-block-group,
.wp-block-post,
.uagb-post__inner-wrap{

    background:

        linear-gradient(
        180deg,
        rgba(23,33,59,.92),
        rgba(17,24,45,.92));

    border:

        1px solid var(--mm-border);

    border-radius:14px;

    transition:.35s;

    overflow:hidden;

}


.wp-block-group:hover,
.wp-block-post:hover,
.uagb-post__inner-wrap:hover{

    transform:translateY(-5px);

    border-color:var(--mm-gold);

    box-shadow:

        0 0 20px rgba(216,181,107,.15),

        0 18px 35px rgba(0,0,0,.35);

}


/* ---------- Images ---------- */

img{

    border-radius:10px;

    box-shadow:

        0 15px 35px rgba(0,0,0,.35);

}


/* ---------- Buttons ---------- */

.wp-block-button__link,
button,
input[type=submit]{

    background:

        linear-gradient(
        180deg,
        #7f6530,
        #56411d);

    border:

        1px solid var(--mm-gold);

    color:white;

    border-radius:8px;

    transition:.3s;

}


.wp-block-button__link:hover,
button:hover,
input[type=submit]:hover{

    transform:translateY(-2px);

    box-shadow:

        0 0 20px rgba(255,220,120,.35);

}


/* ---------- Inputs ---------- */

input,
textarea,
select{

    background:#131b30;

    color:white;

    border:

        1px solid rgba(216,181,107,.3);

}


/* ---------- Horizontal Rules ---------- */

hr{

    border:none;

    height:1px;

    background:

        linear-gradient(
        to right,
        transparent,
        var(--mm-gold),
        transparent);

}


/* ---------- Tables ---------- */

table{

    border-collapse:collapse;

}

td,
th{

    border:

        1px solid rgba(216,181,107,.25);

    padding:12px;

}

th{

    background:#1b2643;

}


/* ---------- Scrollbar ---------- */

::-webkit-scrollbar{

    width:12px;

}

::-webkit-scrollbar-track{

    background:#111;

}

::-webkit-scrollbar-thumb{

    background:#68512b;

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--mm-gold);

}


/* ---------- Selection ---------- */

::selection{

    background:rgba(216,181,107,.35);

    color:white;

}


/* ---------- Section Divider ---------- */

section{

    position:relative;

}

section:after{

    content:"";

    position:absolute;

    left:15%;

    right:15%;

    bottom:-1px;

    height:1px;

    background:

        linear-gradient(
        to right,
        transparent,
        rgba(216,181,107,.3),
        transparent);

}


/* ---------- Magic Glow ---------- */

.page-title,
.entry-title{

    text-shadow:

        0 0 12px rgba(255,220,120,.2),

        0 0 25px rgba(255,220,120,.1);

}


/* ---------- Navigation ---------- */

header,
.site-header{

    background:

        rgba(11,16,32,.92);

    backdrop-filter:blur(8px);

    border-bottom:

        1px solid rgba(216,181,107,.2);

}


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

footer,
.site-footer{

    background:#070b14;

    border-top:

        1px solid rgba(216,181,107,.2);

}


/* ---------- Smooth Animation ---------- */

*{

    transition:

        background-color .25s,

        border-color .25s,

        color .25s,

        box-shadow .25s;

}
/* ==========================================
   MATHSMAGICA SUBMENU
========================================== */

/* Dropdown background */

.main-navigation ul ul,
.main-navigation .sub-menu,
.sub-menu{

    background: linear-gradient(
        180deg,
        #182241,
        #121a31
    ) !important;

    border: 1px solid rgba(216,181,107,.35);

    border-radius: 10px;

    box-shadow:
        0 12px 30px rgba(0,0,0,.35),
        0 0 18px rgba(216,181,107,.12);

    overflow: hidden;

}

/* Dropdown items */

.main-navigation ul ul li,
.sub-menu li{

    background: transparent !important;

}

/* Links */

.main-navigation ul ul a,
.sub-menu a{

    color: #f6dda2 !important;

    padding: 12px 18px;

    transition: .25s;

}

/* Hover */

.main-navigation ul ul a:hover,
.sub-menu a:hover{

    background: rgba(216,181,107,.12) !important;

    color: white !important;

    text-shadow: 0 0 8px rgba(255,220,120,.45);

}

/* Separator */

.main-navigation ul ul li + li{

    border-top: 1px solid rgba(216,181,107,.12);

}
/* ==========================================
   MATHSMAGICA MAGIC ANIMATIONS
========================================== */


/* ---------- Smooth scrolling ---------- */

html{

    scroll-behavior:smooth;

}


/* ---------- Enchanted buttons ---------- */

.wp-block-button__link,
button,
input[type=submit]{

    animation: magicPulse 5s infinite;

}


@keyframes magicPulse{

    0%,100%{

        box-shadow:
        0 0 8px rgba(216,181,107,.12);

    }

    50%{

        box-shadow:
        0 0 20px rgba(216,181,107,.35);

    }

}


/* ---------- Floating magical particles ---------- */
/* Small golden particles drifting upward */

body:before{

    content:"";

    position:fixed;

    width:5px;

    height:5px;

    border-radius:50%;

    background:#f6dda2;

    top:90%;

    left:15%;

    opacity:.25;

    pointer-events:none;

    z-index:9999;

    box-shadow:

    120px -250px rgba(216,181,107,.45),
    280px -100px rgba(216,181,107,.35),
    450px -450px rgba(216,181,107,.35),
    650px -200px rgba(216,181,107,.25),
    850px -550px rgba(216,181,107,.35),
    1050px -300px rgba(216,181,107,.25);

    animation:
    magicDust 25s infinite linear;

}


@keyframes magicDust{

    from{

        transform:
        translateY(0);

    }

    to{

        transform:
        translateY(-100vh);

    }

}


/* ---------- Card movement ---------- */

.wp-block-post,
.wp-block-group,
.uagb-post__inner-wrap{

    transition:

    transform .35s ease,

    box-shadow .35s ease;

}


.wp-block-post:hover,
.wp-block-group:hover,
.uagb-post__inner-wrap:hover{

    transform:

    translateY(-6px);

}


/* ---------- Image enchantment ---------- */

img{

    transition:
    transform .45s ease,
    filter .45s ease;

}


img:hover{

    transform:

    scale(1.025);

    filter:

    brightness(1.08);

}


/* ---------- Magical heading glow ---------- */

h1,
h2{

    animation:

    titleGlow 6s infinite alternate;

}


@keyframes titleGlow{

    from{

        text-shadow:

        0 0 6px rgba(246,221,162,.15);

    }


    to{

        text-shadow:

        0 0 18px rgba(246,221,162,.4);

    }

}


/* ---------- Links feel enchanted ---------- */

a{

    transition:

    color .25s ease,

    text-shadow .25s ease;

}


a:hover{

    text-shadow:

    0 0 10px rgba(246,221,162,.45);

}


/* ---------- Subtle magical selection ---------- */

::selection{

    background:

    rgba(216,181,107,.35);

    color:white;

}


/* ---------- Accessibility: reduce motion ---------- */

@media (prefers-reduced-motion: reduce){

    *,
    *::before,
    *::after{

        animation-duration:.01ms !important;

        animation-iteration-count:1 !important;

        transition-duration:.01ms !important;

    }

}
/* ==========================================
   MATHSMAGICA MAIN CONTENT BACKGROUND
========================================== */


/* Main website area */

.site,
.site-content,
.content-area,
#content,
main,
.entry-content,
.page-content{

    background:

        linear-gradient(
            180deg,
            #101a33,
            #0c1428
        ) !important;

    color:#ececec;

}


/* Individual pages/posts */

article,
.hentry{

    background:

        rgba(18,28,52,.75);

    border:

        1px solid rgba(216,181,107,.18);

    border-radius:16px;

    padding:30px;

    box-shadow:

        0 15px 35px rgba(0,0,0,.25);

}


/* Make paragraphs readable */

.entry-content p,
.page-content p,
.entry-content li,
.page-content li{

    color:#d5d9e8;

}


/* Headings inside content */

.entry-content h1,
.entry-content h2,
.entry-content h3,
.page-content h1,
.page-content h2,
.page-content h3{

    color:#f6dda2;

}


/* Remove white backgrounds from common WordPress blocks */

.wp-block-group,
.wp-block-columns,
.wp-block-column{

    background:transparent;

}


/* Give sections a magical divider */

.entry-content > * + *{

    position:relative;

}


/* Keep footer separated */

.site-footer{

    background:#080e1c !important;

}
/* ==========================================
   FIX NAVIGATION DROPDOWN VISIBILITY
========================================== */


/* Keep header above all page content */

header,
.site-header,
#masthead,
.main-navigation{

    position:relative;

    z-index:9999;

}


/* Make dropdown menus appear above everything */

.main-navigation ul ul,
.main-navigation .sub-menu{

    position:absolute;

    z-index:10000 !important;

}


/* Prevent containers from cutting off menus */

.site-header,
header,
#masthead,
.main-navigation,
.main-navigation ul{

    overflow:visible !important;

}


/* Remove accidental clipping from content */

.site-content,
#content,
main{

    position:relative;

    z-index:1;

}
/* ==========================================
   MATHSMAGICA QUOTE BLOCK STYLE
========================================== */


/* Quote block container */

.wp-block-quote,
blockquote{

    background:

        rgba(23,33,59,.75);

    border-left:

        4px solid #d8b56b;

    border-radius:

        12px;

    padding:

        25px 30px;

    color:#e8d8ad !important;

    box-shadow:

        0 10px 25px rgba(0,0,0,.25);

}


/* Quote text */

.wp-block-quote p,
blockquote p{

    color:#e8d8ad !important;

}


/* Quote citation */

.wp-block-quote cite,
blockquote cite{

    color:#b8bfd3 !important;

}


/* Hover effect */

.wp-block-quote:hover,
blockquote:hover{

    border-left-color:#f6dda2;

    box-shadow:

        0 0 20px rgba(216,181,107,.18);

}
/* ==========================================
   MATHSMAGICA CENTER PAGE TITLES
========================================== */


/* Page title area */

.page-header,
.entry-header,
.page-title,
.entry-title{

    text-align:center !important;

}


/* Description / subtitle */

.archive-description,
.page-header p,
.entry-header p{

    text-align:center !important;

    margin-left:auto;

    margin-right:auto;

}


/* Add a little magical spacing */

.entry-title,
.page-title{

    margin-bottom:15px;

}


/* Optional: make titles feel like chapter headings */

.entry-title,
.page-title{

    letter-spacing:2px;

    text-shadow:

        0 0 10px rgba(246,221,162,.25),

        0 0 20px rgba(216,181,107,.15);

}
h1.entry-title,
h1.page-title,
.wp-block-post-title{

    width:100% !important;

    text-align:center !important;

}
/* ==========================================
   MATHSMAGICA TITLE AREA RESET
========================================== */


/* Reset the title wrapper */

.entry-header,
.page-header{

    display:block !important;

    height:auto !important;

    min-height:0 !important;

    padding:0 !important;

    margin-bottom:40px !important;

    text-align:center !important;

}


/* Center title */

.entry-title,
.page-title{

    display:block !important;

    text-align:center !important;

    margin:0 auto 15px !important;

    position:relative !important;

}


/* Move description normally below title */

.archive-description,
.entry-header p,
.page-header p{

    display:block !important;

    position:relative !important;

    top:auto !important;

    left:auto !important;

    transform:none !important;

    margin:15px auto 0 !important;

    max-width:800px;

    text-align:center !important;

}
/* ==========================================
   MATHSMAGICA CENTERED HEADER