/* ============================================================
   TEO MEMBER NAVIGATION
   Brand + navigation in one tactile bar
   ============================================================ */

.teos-main-nav{
    position:relative;

    display:flex;
    align-items:center;

    width:100%;

    min-height:68px;

    padding:
        8px
        max(
            24px,
            calc((100vw - 1500px) / 2 + 24px)
        );

    box-sizing:border-box;

    background:
        repeating-linear-gradient(
            0deg,
            rgba(111,91,63,.018) 0,
            rgba(111,91,63,.018) 1px,
            transparent 1px,
            transparent 6px
        ),
        #fffaf0;

    border-bottom:
        1px solid
        rgba(18,62,78,.14);

    box-shadow:
        0 4px 12px
        rgba(49,49,40,.06);
}


/* ------------------------------------------------------------
   BRAND
   ------------------------------------------------------------ */

.teos-nav-brand{
    display:flex;
    align-items:center;

    flex:0 0 auto;

    gap:10px;

    margin-right:28px;

    padding-right:28px;

    border-right:
        1px solid
        rgba(18,62,78,.12);

    color:#123e4e;

    text-decoration:none;
}


.teos-nav-brand:hover{
    color:#123e4e;
    text-decoration:none;
}


.teos-nav-brand-mark{
    display:block;

    width:31px;
    height:31px;

    flex:0 0 31px;

    filter:
        drop-shadow(
            0 2px 2px
            rgba(0,0,0,.08)
        );
}


.teos-nav-brand-copy{
    display:flex;
    flex-direction:column;

    min-width:0;

    line-height:1;
}


.teos-nav-brand-name{
    color:#123e4e;

    font-size:18px;
    font-weight:800;

    line-height:1.08;

    letter-spacing:-.25px;

    white-space:nowrap;
}


.teos-nav-brand-tagline{
    margin-top:4px;

    color:#7a817d;

    font-size:9.5px;
    font-weight:500;

    line-height:1;

    letter-spacing:.15px;

    white-space:nowrap;
}


/* ------------------------------------------------------------
   LINKS
   ------------------------------------------------------------ */

.teos-nav-links{
    display:flex;
    align-items:center;
    flex-wrap:wrap;

    gap:2px;

    min-width:0;
}


.teos-nav-item{
    position:relative;

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

    min-height:38px;

    padding:
        8px
        14px;

    border:
        1px solid
        transparent;

    border-radius:5px;

    color:#123e4e;

    background:transparent;

    text-decoration:none;

    font-size:13px;
    font-weight:650;

    transition:
        color .15s ease,
        background .15s ease,
        border-color .15s ease;
}


.teos-nav-item:hover{
    color:#155f5a;

    background:
        rgba(21,95,90,.06);

    border-color:
        rgba(21,95,90,.10);

    text-decoration:none;
}


/* Active page */

.teos-nav-active,
.teos-nav-active:hover{
    color:#123e4e;

    background:#f3e9d4;

    border-color:
        rgba(18,62,78,.13);

    box-shadow:
        inset 0 -3px 0
        #C85642;
}


/* ------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------ */

@media (max-width: 900px){

    .teos-main-nav{
        align-items:flex-start;

        flex-wrap:wrap;

        padding:
            10px
            18px;
    }

    .teos-nav-brand{
        width:100%;

        margin:
            0
            0
            7px;

        padding:
            0
            0
            9px;

        border-right:0;

        border-bottom:
            1px solid
            rgba(18,62,78,.10);
    }

    .teos-nav-links{
        width:100%;

        overflow-x:auto;

        flex-wrap:nowrap;

        padding-bottom:2px;
    }

    .teos-nav-item{
        flex:0 0 auto;
    }

}

/*
 * Legacy LFMTE pages still output their original menu.
 * Hide it only when a logged-in TEO member is using the page.
 */
.teo-member .lfm_menu_bar {
    display: none !important;
}



/* ============================================================
   TEO LEGACY-PAGE NAV COMPLETION
   Dropdowns, second row and messages
   ============================================================ */

.teos-main-nav,
.teos-main-nav * {
    box-sizing: border-box;
}


/* Main navigation area beside the TEO brand */

.teos-nav-area {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
}


/*
 * Links can wrap naturally into the tidy two-row layout
 * used by the normal TEO member header.
 */

.teos-nav-links {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px;

    flex: 1 1 auto;
    min-width: 0;
}


/* ------------------------------------------------------------
   DROPDOWNS
   ------------------------------------------------------------ */

.teos-nav-dropdown {
    position: relative;
    display: inline-block;
    flex: 0 0 auto;
}


.teos-nav-dropdown > summary {
    list-style: none;
    cursor: pointer;
}


.teos-nav-dropdown > summary::-webkit-details-marker {
    display: none;
}


.teos-nav-arrow {
    display: inline-block;
    margin-left: 4px;

    font-size: 9px;
    line-height: 1;

    opacity: .68;
}


.teos-nav-dropdown-menu {
    position: absolute;

    top: calc(100% + 5px);
    left: 0;

    z-index: 10020;

    display: none;

    min-width: 185px;

    padding: 7px;

    border:
        1px solid
        rgba(18,62,78,.15);

    border-radius: 7px;

    background:
        repeating-linear-gradient(
            0deg,
            rgba(111,91,63,.018) 0,
            rgba(111,91,63,.018) 1px,
            transparent 1px,
            transparent 6px
        ),
        #fffaf0;

    box-shadow:
        0 10px 24px
        rgba(40,43,36,.16);
}


.teos-nav-dropdown[open]
.teos-nav-dropdown-menu {
    display: flex;
    flex-direction: column;
}


.teos-nav-dropdown-item {
    display: block;

    width: 100%;

    padding:
        9px
        11px;

    border-radius: 5px;

    color: #123e4e !important;

    background: transparent;

    font-size: 12.5px;
    font-weight: 650;

    line-height: 1.25;

    text-decoration: none !important;

    white-space: nowrap;
}


.teos-nav-dropdown-item:hover {
    color: #155f5a !important;

    background:
        rgba(21,95,90,.07);

    text-decoration: none !important;
}


.teos-nav-dropdown-item-active {
    background: #f3e9d4;

    box-shadow:
        inset 3px 0 0
        #C85642;
}


.teos-nav-dropdown-active > summary {
    background: #f3e9d4;

    border-color:
        rgba(18,62,78,.13);

    box-shadow:
        inset 0 -3px 0
        #C85642;
}


/* ------------------------------------------------------------
   MESSAGE ENVELOPE
   ------------------------------------------------------------ */

.teos-nav-messages {
    position: relative;

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

    flex: 0 0 auto;

    width: 42px;
    height: 42px;

    margin-left: 5px;

    border:
        1px solid
        rgba(18,62,78,.14);

    border-radius: 7px;

    background: #f5ead5;

    color: #123e4e !important;

    text-decoration: none !important;
}


.teos-nav-messages:hover {
    background: #eddec1;
    color: #155f5a !important;
}


.teos-nav-envelope {
    font-size: 20px;
    line-height: 1;
}


.teos-nav-message-count {
    position: absolute;

    top: -6px;
    right: -6px;

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

    min-width: 19px;
    height: 19px;

    padding: 0 5px;

    border:
        2px solid
        #fffaf0;

    border-radius: 999px;

    background: #C85642;

    color: #ffffff;

    font-size: 10px;
    font-weight: 800;

    line-height: 1;
}


/* ------------------------------------------------------------
   LEGACY BOOTSTRAP RESET
   Stop the old theme rules altering our new TEO nav.
   ------------------------------------------------------------ */

.teos-main-nav a {
    text-decoration: none;
}


.teos-main-nav details {
    margin: 0;
}


.teos-main-nav summary {
    margin: 0;
}


.teos-main-nav ul,
.teos-main-nav li {
    margin: 0;
    padding: 0;
}


/* Keep dropdowns above legacy page content */

.teos-main-nav {
    z-index: 10000;
}


/* ------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------ */

@media (max-width: 1100px) {

    .teos-main-nav {
        align-items: flex-start;
    }

    .teos-nav-brand {
        margin-right: 18px;
        padding-right: 18px;
    }

    .teos-nav-area {
        align-items: flex-start;
    }

}


@media (max-width: 900px) {

    .teos-nav-area {
        width: 100%;
        flex-basis: 100%;
    }

    .teos-nav-links {
        width: 100%;
    }

    .teos-nav-dropdown-menu {
        left: 0;
    }

}




/* ============================================================
   LEGACY PAGE DROPDOWN HARDENING
   Applies to Tapestry, Affiliates and My TEO
   ============================================================ */

.teos-main-nav .teos-nav-dropdown {
    position: relative !important;
    display: inline-block !important;
    vertical-align: middle;
}


.teos-main-nav .teos-nav-dropdown > summary {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    list-style: none !important;

    cursor: pointer;
}


.teos-main-nav .teos-nav-dropdown > summary::-webkit-details-marker {
    display: none !important;
}


.teos-main-nav .teos-nav-dropdown-menu {
    position: absolute !important;

    top: calc(100% + 5px) !important;
    left: 0 !important;

    z-index: 20000 !important;

    display: none !important;

    min-width: 190px !important;

    padding: 7px !important;

    margin: 0 !important;

    border:
        1px solid
        rgba(18,62,78,.15) !important;

    border-radius: 7px !important;

    background:
        repeating-linear-gradient(
            0deg,
            rgba(111,91,63,.018) 0,
            rgba(111,91,63,.018) 1px,
            transparent 1px,
            transparent 6px
        ),
        #fffaf0 !important;

    box-shadow:
        0 10px 24px
        rgba(40,43,36,.16) !important;
}


.teos-main-nav
.teos-nav-dropdown[open]
> .teos-nav-dropdown-menu {
    display: flex !important;
    flex-direction: column !important;
}


.teos-main-nav
.teos-nav-dropdown-item {
    display: block !important;

    width: 100% !important;

    padding:
        9px
        11px !important;

    margin: 0 !important;

    border: 0 !important;
    border-radius: 5px !important;

    background: transparent !important;

    color: #123e4e !important;

    font-size: 12.5px !important;
    font-weight: 650 !important;

    line-height: 1.3 !important;

    text-align: left !important;
    text-decoration: none !important;

    white-space: nowrap !important;
}


.teos-main-nav
.teos-nav-dropdown-item:hover {
    background:
        rgba(21,95,90,.07) !important;

    color: #155f5a !important;

    text-decoration: none !important;
}


.teos-main-nav
.teos-nav-dropdown-item-active {
    background: #f3e9d4 !important;

    box-shadow:
        inset 3px 0 0
        #C85642 !important;
}


.teos-main-nav
.teos-nav-dropdown-logout {
    margin-top: 5px !important;

    border-top:
        1px solid
        rgba(18,62,78,.10) !important;

    color: #9a4838 !important;
}


.teos-main-nav
.teos-nav-dropdown-logout:hover {
    background:
        rgba(200,86,66,.07) !important;

    color: #C85642 !important;
}




/* ============================================================
   PRIVATE MESSAGES SPACING
   ============================================================ */

.teo-page-pmessages .container,
.teo-page-pmessages .container-fluid {
    margin-top: 24px;
}




/* ============================================================
   TEO PRIVATE MESSAGES
   ============================================================ */

.teo-pm-page {
    width: 100%;
    max-width: 760px;

    margin:
        30px
        auto
        55px;

    padding:
        26px
        28px
        32px;

    box-sizing: border-box;

    border:
        1px solid
        rgba(18,62,78,.13);

    border-radius: 12px;

    background:
        repeating-linear-gradient(
            0deg,
            rgba(111,91,63,.016) 0,
            rgba(111,91,63,.016) 1px,
            transparent 1px,
            transparent 6px
        ),
        #fffaf0;

    box-shadow:
        0 8px 22px
        rgba(52,47,38,.07);
}


/*
 * Old message pages still use fixed-width tables.
 * Keep them centred inside the new TEO panel.
 */

.teo-pm-page > table,
.teo-pm-page center > table {
    margin-left: auto;
    margin-right: auto;
}


/* Folder controls */

.teo-pm-tabs {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;

    gap: 8px;

    margin:
        4px
        0
        22px;
}


.teo-pm-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 36px;

    padding:
        8px
        15px;

    border:
        1px solid
        rgba(18,62,78,.15);

    border-radius: 7px;

    background: #f3ead7;

    color: #123e4e !important;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 13px;
    font-weight: 700;

    line-height: 1;

    text-decoration: none !important;

    box-shadow:
        0 2px 4px
        rgba(50,45,36,.05);
}


.teo-pm-tab:hover {
    background: #e9dcc2;

    color: #155f5a !important;

    text-decoration: none !important;
}


.teo-pm-tab-active {
    background: #155f5a;

    border-color: #155f5a;

    color: #fffaf0 !important;

    cursor: default;

    box-shadow:
        inset 0 -3px 0
        rgba(0,0,0,.12);
}


.teo-pm-compose {
    background: #c99227;

    border-color: #b88420;

    color: #092f49 !important;
}


.teo-pm-compose:hover {
    background: #d8a638;

    color: #092f49 !important;
}


/* Message-table action buttons */

.teo-pm-action {
    display: inline-block;

    padding:
        6px
        9px;

    border:
        1px solid
        rgba(21,95,90,.18);

    border-radius: 5px;

    background: #edf2e9;

    color: #155f5a !important;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 11px;
    font-weight: 700;

    line-height: 1.15;

    text-decoration: none !important;

    white-space: nowrap;
}


.teo-pm-action:hover {
    background: #dfe9dc;

    color: #0d514c !important;

    text-decoration: none !important;
}


.teo-pm-delete {
    border-color:
        rgba(200,86,66,.20);

    background: #f7e8df;

    color: #a34233 !important;
}


.teo-pm-delete:hover {
    background: #efd5ca;

    color: #8e3529 !important;
}


/* Read / Compose page return button */

.teo-pm-return {
    margin:
        12px
        0
        22px;

    text-align: center;
}


/* Existing form buttons inside message reader/editor */

.teo-pm-page input[type="submit"] {
    padding:
        8px
        14px;

    border:
        1px solid
        rgba(18,62,78,.16);

    border-radius: 6px;

    background: #155f5a;

    color: #fffaf0;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 12px;
    font-weight: 700;

    cursor: pointer;
}


.teo-pm-page input[type="submit"]:hover {
    background: #104d49;
}


/* Message headings */

.teo-pm-page h3 {
    margin-top: 0;

    color: #123e4e;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 27px;
}


/* Responsive legacy tables */

@media (max-width: 650px) {

    .teo-pm-page {
        width: calc(100% - 24px);

        margin-top: 20px;

        padding:
            20px
            12px;
    }

    .teo-pm-page table {
        max-width: 100%;
    }

}




/* ============================================================
   LEGACY PRIVATE MESSAGE PAGE FIX
   No PHP changes required
   ============================================================ */


/* ------------------------------------------------------------
   SPACE BELOW TEO NAV
   pmessages.php starts with an old centered content wrapper.
   ------------------------------------------------------------ */

body.teo-member
.teos-main-nav
+ div[align="center"] {
    margin-top: 30px !important;
}


/* ------------------------------------------------------------
   MESSAGE FOLDER BUTTON ROW
   Targets only the old Inbox / Sent / Trash / Compose row.
   ------------------------------------------------------------ */

body.teo-member
p:has(> font > a[href="pcompose.php"]) {
    margin:
        18px
        0
        22px !important;

    text-align: center !important;
}


body.teo-member
p:has(> font > a[href="pcompose.php"])
> font {
    display: flex !important;

    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;

    gap: 8px !important;

    font-family:
        Arial,
        Helvetica,
        sans-serif !important;

    font-size: 0 !important;
}


/*
 * Hide the old | separators.
 * The links/buttons themselves restore their own font size.
 */

body.teo-member
p:has(> font > a[href="pcompose.php"])
> font {
    color: transparent !important;
}


/* Normal folder buttons */

body.teo-member
p:has(> font > a[href="pcompose.php"])
a {
    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    min-height: 36px !important;

    padding:
        8px
        15px !important;

    border:
        1px solid
        rgba(18,62,78,.16) !important;

    border-radius: 7px !important;

    background: #f3ead7 !important;

    color: #123e4e !important;

    font-family:
        Arial,
        Helvetica,
        sans-serif !important;

    font-size: 13px !important;
    font-weight: 700 !important;

    line-height: 1 !important;

    text-decoration: none !important;

    box-shadow:
        0 2px 4px
        rgba(50,45,36,.05) !important;
}


body.teo-member
p:has(> font > a[href="pcompose.php"])
a:hover {
    background: #e7d9bc !important;

    color: #155f5a !important;

    text-decoration: none !important;
}


/* Compose gets the gold TEO treatment */

body.teo-member
p:has(> font > a[href="pcompose.php"])
a[href="pcompose.php"] {
    background: #c99227 !important;

    border-color: #b88420 !important;

    color: #092f49 !important;
}


body.teo-member
p:has(> font > a[href="pcompose.php"])
a[href="pcompose.php"]:hover {
    background: #d8a638 !important;
}


/* Current folder is output as <b> rather than an <a>. */

body.teo-member
p:has(> font > a[href="pcompose.php"])
b {
    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    min-height: 36px !important;

    padding:
        8px
        15px !important;

    border:
        1px solid
        #155f5a !important;

    border-radius: 7px !important;

    background: #155f5a !important;

    color: #fffaf0 !important;

    font-family:
        Arial,
        Helvetica,
        sans-serif !important;

    font-size: 13px !important;
    font-weight: 700 !important;

    line-height: 1 !important;

    box-shadow:
        inset 0 -3px 0
        rgba(0,0,0,.11) !important;
}


/* ------------------------------------------------------------
   MESSAGE TABLE ACTION LINKS
   Delete / Restore / Empty Trash
   ------------------------------------------------------------ */

body.teo-member
a[href*="pmessages.php?delete="],
body.teo-member
a[href*="pmessages.php?restore="],
body.teo-member
a[href*="pmessages.php?empty=trash"] {
    display: inline-block !important;

    padding:
        6px
        9px !important;

    border:
        1px solid
        rgba(18,62,78,.16) !important;

    border-radius: 5px !important;

    background: #edf2e9 !important;

    color: #155f5a !important;

    font-family:
        Arial,
        Helvetica,
        sans-serif !important;

    font-size: 11px !important;
    font-weight: 700 !important;

    line-height: 1.2 !important;

    text-decoration: none !important;

    white-space: nowrap !important;
}


body.teo-member
a[href*="pmessages.php?delete="],
body.teo-member
a[href*="pmessages.php?empty=trash"] {
    border-color:
        rgba(200,86,66,.22) !important;

    background: #f7e8df !important;

    color: #a34233 !important;
}


/* ------------------------------------------------------------
   ENVELOPE
   Override legacy theme anchor styling completely.
   ------------------------------------------------------------ */

body.teo-member
.teos-main-nav
a.teos-nav-messages {
    position: relative !important;

    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    flex:
        0
        0
        42px !important;

    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;

    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;

    margin:
        0
        0
        0
        5px !important;

    padding: 0 !important;

    border:
        1px solid
        rgba(18,62,78,.14) !important;

    border-radius: 7px !important;

    background: #f5ead5 !important;

    color: #123e4e !important;

    line-height: 1 !important;

    text-decoration: none !important;

    box-shadow: none !important;
}


body.teo-member
.teos-main-nav
a.teos-nav-messages:hover {
    background: #eddec1 !important;

    color: #155f5a !important;
}


body.teo-member
.teos-main-nav
a.teos-nav-messages
.teos-nav-envelope {
    display: block !important;

    margin: 0 !important;
    padding: 0 !important;

    color: inherit !important;

    font-family:
        Arial,
        Helvetica,
        sans-serif !important;

    font-size: 20px !important;
    font-weight: 400 !important;

    line-height: 1 !important;
}


body.teo-member
.teos-main-nav
a.teos-nav-messages
.teos-nav-message-count {
    position: absolute !important;

    top: -6px !important;
    right: -6px !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    min-width: 19px !important;
    height: 19px !important;

    padding:
        0
        5px !important;

    border:
        2px solid
        #fffaf0 !important;

    border-radius: 999px !important;

    background: #C85642 !important;

    color: #ffffff !important;

    font-size: 10px !important;
    font-weight: 800 !important;

    line-height: 1 !important;
}