/* ═══════════════════════════════════════════════════════











   TCM Shared UI — Slide Menu Styles











   Used by: Meridian Atlas, Five Elements, Herb Atlas











═══════════════════════════════════════════════════════ */























.tcm-menu-overlay {











    position: fixed; inset: 0;











    background: rgba(20, 14, 8, 0.65);











    z-index: 1200; opacity: 0; pointer-events: none;











    transition: opacity 0.35s;











}











.tcm-menu-overlay.open { opacity: 1; pointer-events: all; }























.tcm-menu-panel {











    position: fixed; top: 0; right: -320px;











    width: 300px; height: 100vh;











    background: #1a1208;











    border-left: 3px solid #b8860b;











    z-index: 1201;











    transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);











    overflow-y: auto;











    /* Reset any theme list styles */











    list-style: none !important;











}











.tcm-menu-panel.open { right: 0; }























.tcm-menu-head {











    padding: 1.2rem 1.6rem;











    background: #261a08;











    display: flex;











    justify-content: space-between;











    align-items: center;











    border-bottom: 1px solid rgba(184, 134, 11, 0.3);











}











.tcm-menu-head-title {











    font-size: 0.9rem;











    color: #f4f1e8;











    letter-spacing: 0.08em;











    font-weight: 600;











}











.tcm-menu-x {











    cursor: pointer;











    color: rgba(244, 241, 232, 0.45);











    font-size: 1.1rem;











    transition: color 0.2s;











    line-height: 1;











}











.tcm-menu-x:hover { color: #f4f1e8; }























.tcm-menu-grp {











    padding: 0.9rem 1.6rem 0;











}











.tcm-menu-grp-label {











    font-size: 0.55rem;











    letter-spacing: 0.4em;











    text-transform: uppercase;











    color: #b8860b;











    opacity: 0.7;











    display: block;











    margin-bottom: 0.4rem;











}











.tcm-menu-list {











    list-style: none !important;











    padding: 0 !important;











    margin: 0 0 0.8rem 0 !important;











}











.tcm-menu-list li {











    border-bottom: 1px solid rgba(255, 255, 255, 0.05);











    list-style: none !important;











    padding: 0 !important;











    margin: 0 !important;











}











.tcm-menu-list li::before { display: none !important; }











.tcm-menu-list a {











    display: block;











    padding: 0.55rem 0;











    color: rgba(244, 241, 232, 0.65);











    text-decoration: none !important;











    font-size: 0.88rem;











    transition: all 0.2s;











}











.tcm-menu-list a:hover {











    color: #b8860b;











    padding-left: 0.5rem;











}























/* ── Submenu items ─────────────────────────────────────── */











.tcm-menu-has-sub { list-style: none; }























.tcm-menu-parent {











    display: flex;











    align-items: center;











    justify-content: space-between;











    gap: 8px;











}























.tcm-menu-parent a {











    flex: 1;











}























.tcm-menu-toggle {











    display: none;











}























.tcm-menu-has-sub {











    border-bottom: none !important;











}























.tcm-menu-sub {











    list-style: none !important;











    margin: 0 0 6px 0 !important;











    padding: 0 !important;











    display: block !important;











}























.tcm-menu-sub li {











    border-bottom: 1px solid rgba(255,255,255,0.03) !important;











    padding: 0 !important;











    margin: 0 !important;











    list-style: none !important;











}























.tcm-menu-sub li a {











    display: block !important;











    padding: 6px 12px 6px 18px !important;











    font-size: 12px !important;











    color: rgba(245,237,224,0.55) !important;











    border-left: 2px solid rgba(184,134,11,0.25) !important;











    margin-left: 10px !important;











    transition: color 0.15s, border-color 0.15s;











    line-height: 1.4 !important;











    text-decoration: none !important;











}























.tcm-menu-sub li a:hover {











    color: #b8860b !important;











    border-left-color: #b8860b !important;











    padding-left: 18px !important;











}



/* ── Coming Soon badge ── */



.tcm-coming-badge {



    display: inline-block;



    font-size: 9px;



    font-weight: 700;



    letter-spacing: .06em;



    text-transform: uppercase;



    background: rgba(184,134,11,0.25);



    color: #b8860b;



    padding: 1px 5px;



    border-radius: 3px;



    margin-left: 6px;



    vertical-align: middle;



}







/* ── Submenu ── */



.tcm-menu-has-sub > .tcm-menu-sub {



    display: block !important;



    list-style: none !important;



    margin: 0 0 6px 0 !important;



    padding: 0 !important;



}



.tcm-menu-has-sub > .tcm-menu-sub li {



    list-style: none !important;



    padding: 0 !important;



    margin: 0 !important;



    border-bottom: 1px solid rgba(255,255,255,0.03) !important;



}



.tcm-menu-has-sub > .tcm-menu-sub li a {



    display: block !important;



    padding: 5px 12px 5px 16px !important;



    margin-left: 8px !important;



    font-size: 12px !important;



    color: rgba(245,237,224,0.55) !important;



    border-left: 2px solid rgba(184,134,11,0.3) !important;



    text-decoration: none !important;



    line-height: 1.5 !important;



}



.tcm-menu-has-sub > .tcm-menu-sub li a:hover {



    color: #b8860b !important;



    border-left-color: #b8860b !important;



}







/* ═══════════════════════════════════════════════════════

   TCM Page Header — shared across all TCM Atlas plugins

   Usage: TCM_Shared_UI::render_page_header( $title, $subtitle, $icon )

   Or shortcode: [tcm_page_header title="..." subtitle="..." icon="☯"]

═══════════════════════════════════════════════════════ */



.tcm-page-header {

    background: linear-gradient(135deg, #1a1208 0%, #261a08 60%, #1a1208 100%);

    border-bottom: 2px solid #b8860b;

    padding: 0;

    width: 100%;

    position: relative;

    z-index: 100;

}



.tcm-page-header-inner {

    max-width: 1100px;

    margin: 0 auto;

    padding: 16px 24px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 16px;

}



/* Brand / site link (top-left) */

.tcm-page-header-brand {

    flex-shrink: 0;

}



.tcm-page-header-home {

    text-decoration: none !important;

    display: flex;

    flex-direction: column;

    gap: 1px;

}



.tcm-page-header-site {

    font-size: 0.62rem;

    letter-spacing: 0.22em;

    text-transform: uppercase;

    color: rgba(184, 134, 11, 0.75);

    font-weight: 600;

    white-space: nowrap;

    display: block;

}



.tcm-page-header-home:hover .tcm-page-header-site {

    color: #b8860b;

}



/* Centre: icon + title + subtitle */

.tcm-page-header-title-wrap {

    display: flex;

    align-items: center;

    gap: 14px;

    flex: 1;

    justify-content: center;

    text-align: center;

}



.tcm-page-header-icon {

    font-size: 2rem;

    line-height: 1;

    opacity: 0.85;

    color: #b8860b;

    flex-shrink: 0;

}



.tcm-page-header-title {

    font-size: 1.45rem !important;

    font-weight: 400 !important;

    color: #f4f1e8 !important;

    margin: 0 !important;

    padding: 0 !important;

    line-height: 1.2 !important;

    letter-spacing: 0.03em;

    font-family: Georgia, 'Times New Roman', serif !important;

    border: none !important;

}



.tcm-page-header-subtitle {

    font-size: 0.78rem !important;

    color: rgba(244, 241, 232, 0.5) !important;

    margin: 3px 0 0 0 !important;

    padding: 0 !important;

    font-style: italic;

    letter-spacing: 0.06em;

    line-height: 1.3 !important;

}



/* Hamburger button (right) */

.tcm-page-header-hamburger {

    flex-shrink: 0;

    background: none;

    border: 1px solid rgba(184, 134, 11, 0.35);

    border-radius: 4px;

    cursor: pointer;

    padding: 8px 10px;

    display: flex;

    flex-direction: column;

    gap: 5px;

    transition: border-color 0.2s, background 0.2s;

}



.tcm-page-header-hamburger:hover {

    border-color: #b8860b;

    background: rgba(184, 134, 11, 0.08);

}



.tcm-page-header-hamburger span {

    display: block;

    width: 20px;

    height: 2px;

    background: #b8860b;

    border-radius: 2px;

    transition: background 0.2s;

}



/* Responsive */

@media (max-width: 600px) {

    .tcm-page-header-inner {

        padding: 12px 16px;

        gap: 10px;

    }

    .tcm-page-header-title {

        font-size: 1.1rem !important;

    }

    .tcm-page-header-icon {

        font-size: 1.5rem;

    }

    .tcm-page-header-site {

        font-size: 0.55rem;

    }

}



/* ═══════════════════════════════════════════════════════

   TCM Page Header — matches Five Elements Explorer style

   Used via: [tcm_page_header title="..." subtitle="..." icon="☯"]

   Or:       TCM_Shared_UI::render_page_header(...)

═══════════════════════════════════════════════════════ */



.tcm-ph {

    height: 70px;

    flex-shrink: 0;

    background: linear-gradient(135deg, #1e1510 0%, #2c1f14 100%);

    border-bottom: 2px solid #b8860b;

    box-shadow: 0 3px 14px rgba(0,0,0,.35);

    position: relative;

    z-index: 50;

    width: 100%;

}



.tcm-ph-inner {

    height: 100%;

    padding: 0 28px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 16px;

    max-width: 1200px;

    margin: 0 auto;

}



.tcm-ph-left {

    display: flex;

    align-items: center;

    gap: 14px;

}



.tcm-ph-icon {

    font-size: 1.7rem;

    color: rgba(184,134,11,.55);

    line-height: 1;

    letter-spacing: .1em;

    flex-shrink: 0;

}



.tcm-ph-title {

    font-size: 22px;

    font-weight: 700;

    color: #fff;

    line-height: 1.1;

    font-family: Georgia, serif;

}



.tcm-ph-sub {

    font-size: 10px;

    letter-spacing: .25em;

    text-transform: uppercase;

    color: rgba(255,255,255,.38);

    margin-top: 2px;

}



.tcm-ph-right {

    display: flex;

    align-items: center;

    gap: 12px;

    flex-shrink: 0;

}



.tcm-ph-pills {

    display: flex;

    gap: 3px;

    background: rgba(0,0,0,.28);

    border-radius: 7px;

    padding: 4px;

}



.tcm-ph-pill {

    background: rgba(255,255,255,.06);

    border: 1px solid rgba(255,255,255,.08);

    border-radius: 5px;

    padding: 6px 14px;

    font-size: 12px;

    color: rgba(255,255,255,.45);

    cursor: pointer;

    white-space: nowrap;

    text-decoration: none !important;

    letter-spacing: 0.02em;

    transition: background .18s, color .18s, border-color .18s;

}



.tcm-ph-pill:hover {

    background: rgba(255,255,255,.13);

    color: rgba(255,255,255,.9);

    border-color: rgba(255,255,255,.18);

}



.tcm-ph-pill.active {

    background: #b8860b;

    color: #fff !important;

    font-weight: 700;

    box-shadow: 0 2px 10px rgba(0,0,0,.45);

    letter-spacing: 0.03em;

    border-color: #b8860b;

}



.tcm-ph-hamburger {

    width: 32px;

    height: 32px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    gap: 5px;

    cursor: pointer;

    padding: 4px;

    border: 1px solid rgba(184,134,11,.35);

    border-radius: 3px;

    transition: border-color .3s;

    flex-shrink: 0;

}



.tcm-ph-hamburger:hover { border-color: #b8860b; }



.tcm-ph-hamburger span {

    display: block;

    height: 1px;

    background: #fff;

    transition: all .3s;

    transform-origin: center;

}



.tcm-ph-hamburger span:nth-child(2) {

    width: 70%;

    margin-left: auto;

}



@media (max-width: 600px) {

    .tcm-ph { height: auto; min-height: 60px; }

    .tcm-ph-inner { padding: 10px 16px; flex-wrap: wrap; }

    .tcm-ph-title { font-size: 16px; }

    .tcm-ph-pills { display: none; }

}