/* TTMHN resources — v2 layout overrides.
   Enqueue AFTER ttmhn-resources.css. Scoped entirely under .ttmhn-resources. */

/* ---------- toolbar ---------- */
.ttmhn-resources .ttmhn-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 16px;
}
.ttmhn-resources .ttmhn-search {
    flex: 1;
    height: 42px;
    padding: 0 14px;
    font-size: 14px;
    border: 1px solid #E3DCE5;
    border-radius: 8px;
    background: #fff;
}
.ttmhn-resources .ttmhn-search:focus {
    outline: none;
    border-color: #7F4182;
}
.ttmhn-resources .ttmhn-count {
    font-size: 13px;
    color: #8a7d8b;
    white-space: nowrap;
}

/* ---------- list column becomes the contained grid ---------- */
.ttmhn-resources .ttmhn-list-col {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 0;
    align-items: start;
    /* This card is a flex sibling of the sidebar column. When a search leaves
       only a few results, the sidebar is the taller sibling and flexbox would
       stretch this card to match it; the grid would then stretch its single
       row, and the button cell (align-self:stretch) would balloon to fill it
       while the toggle kept its natural height. Pin the card to its own
       content height so rows stay natural, the button stays centred in the
       real row height, and the two cells' bottom borders line up as one. */
    align-self: start;      /* don't let the flex row stretch this card taller than its content */
    align-content: start;   /* and if it ever is taller, don't stretch the rows into the gap */
    background: #fff;
    border: 1px solid #E3DCE5;
    border-radius: 8px;
    overflow: hidden;
}
.ttmhn-resources .ttmhn-list-col > .et_pb_module {
    margin: 0 !important;
}

/* toggle = column 1 of each pair */
.ttmhn-resources .ttmhn-list-col .et_pb_toggle {
    grid-column: 1;
    background: #fff !important;
    border: 0 !important;
    border-bottom: 1px solid #EDE7EF !important;
    border-radius: 0 !important;
    padding: 13px 4px 13px 16px !important;
}
/* button wrapper = column 2, stretched so its divider lines up */
.ttmhn-resources .ttmhn-list-col .et_pb_button_module_wrapper {
    grid-column: 2;
    align-self: stretch;
    display: flex;
    align-items: center;
    padding: 0 16px;
    border-bottom: 1px solid #EDE7EF;
}
/* last pair: no divider */
.ttmhn-resources .ttmhn-list-col .et_pb_toggle:nth-last-of-type(2) {
    border-bottom: 0 !important;
}
.ttmhn-resources .ttmhn-list-col .et_pb_button_module_wrapper:last-of-type {
    border-bottom: 0;
}

/* ---------- typography (mockup scale) ---------- */
.ttmhn-resources .ttmhn-list-col .et_pb_toggle_title {
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    color: #2B2B2B !important;
}
.ttmhn-resources .ttmhn-list-col .et_pb_toggle_content {
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: #5A4A5B !important;
    padding: 8px 12px 2px 0 !important;
}

/* ---------- smooth open/close (paired with ttmhn-resources.js) ----------
   The height/opacity of the content is driven by the Web Animations API in JS;
   here we only fade the *state* changes so nothing snaps in one frame. */
.ttmhn-resources .ttmhn-list-col .et_pb_toggle,
.ttmhn-resources .ttmhn-list-col .et_pb_button_module_wrapper {
    transition: background-color 150ms ease;
}
.ttmhn-resources .ttmhn-list-col .et_pb_toggle_title {
    transition: color 150ms ease;
}
/* Icon: keep the plus glyph in BOTH states and rotate it 45° into an ×,
   instead of Divi swapping \E050 (plus) for \E04F (minus) on open. */
.ttmhn-resources .ttmhn-list-col .et_pb_toggle_title:before {
    transition: transform 200ms cubic-bezier(0.25, 0.8, 0.25, 1);
    transform: rotate(0deg);
}
.ttmhn-resources .ttmhn-list-col .et_pb_toggle_open > .et_pb_toggle_title:before {
    content: "\E050" !important;
    transform: rotate(45deg);
}

/* ---------- expanded state ---------- */
.ttmhn-resources .ttmhn-list-col .et_pb_toggle_open {
    background: #F8F4F9 !important;
}
.ttmhn-resources .ttmhn-list-col .et_pb_toggle_open .et_pb_toggle_title {
    color: #7F4182 !important;
}
.ttmhn-resources .ttmhn-list-col .et_pb_toggle_open + .et_pb_button_module_wrapper {
    background: #F8F4F9;
}

/* ---------- collapsing state (paired with ttmhn-resources.js) ----------
   During a close, JS keeps the structural et_pb_toggle_open class until the
   height animation finishes (so the content never snaps to the closed state)
   and adds .ttmhn-collapsing. These rules override the open visuals back toward
   the closed look with HIGHER specificity than the open rules above, so the
   tint, title colour, icon and button all fade out *during* the slide (via the
   transitions already declared) rather than snapping at the end. */
.ttmhn-resources .ttmhn-list-col .et_pb_toggle_open.ttmhn-collapsing {
    background: #fff !important;
}
.ttmhn-resources .ttmhn-list-col .et_pb_toggle_open.ttmhn-collapsing .et_pb_toggle_title {
    color: #2B2B2B !important;
}
.ttmhn-resources .ttmhn-list-col .et_pb_toggle_open.ttmhn-collapsing > .et_pb_toggle_title:before {
    transform: rotate(0deg);
}
.ttmhn-resources .ttmhn-list-col .et_pb_toggle_open.ttmhn-collapsing + .et_pb_button_module_wrapper {
    background: #fff;
}
.ttmhn-resources .ttmhn-list-col .et_pb_toggle_open.ttmhn-collapsing + .et_pb_button_module_wrapper .et_pb_button {
    background: transparent !important;
    border-color: #7F4182 !important;
    color: #7F4182 !important;
}

/* ---------- buttons ---------- */
.ttmhn-resources .ttmhn-list-col .et_pb_button {
    font-size: 12px !important;
    letter-spacing: 0.5px !important;
    padding: 7px 14px !important;
    border-radius: 6px !important;
    border: 1px solid #7F4182 !important;
    color: #7F4182 !important;
    background: transparent !important;
    white-space: nowrap;
}
.ttmhn-resources .ttmhn-list-col .et_pb_button:hover {
    background: #F8F4F9 !important;
}
.ttmhn-resources .ttmhn-list-col .et_pb_toggle_open + .et_pb_button_module_wrapper .et_pb_button {
    background: #D09B2C !important;
    border-color: #D09B2C !important;
    color: #fff !important;
}
.ttmhn-resources .ttmhn-list-col .et_pb_toggle_open + .et_pb_button_module_wrapper .et_pb_button:hover {
    background: #B5851F !important;
    border-color: #B5851F !important;
}
/* Kill Divi's hover reflow: no width shift for the slide-in chevron, no glyph.
   Divi 5 emits a per-module reset `body #page-container .et_pb_section
   .et_pb_button_N:hover{padding-left:1em!important;padding-right:1em!important}`
   whose #id selector (specificity 1,3,1) outranks a plain class rule even with
   !important — so the button dropped from 14px to 1em (12px) side padding on
   hover. Prefix with #page-container to reach 1,4,0 and win. */
#page-container .ttmhn-resources .ttmhn-list-col .et_pb_button:hover,
#page-container .ttmhn-resources .ttmhn-list-col .et_pb_button:focus {
    padding: 7px 14px !important;   /* identical to the resting state */
}
.ttmhn-resources .ttmhn-list-col .et_pb_button:hover:after,
.ttmhn-resources .ttmhn-list-col .et_pb_button:after {
    display: none !important;       /* belt-and-braces on the chevron */
    content: none !important;
}

/* ---------- search filter: hide a row's button with its toggle ---------- */
.ttmhn-resources .ttmhn-list-col .et_pb_toggle[hidden],
.ttmhn-resources .ttmhn-list-col .et_pb_toggle.ttmhn-hidden,
.ttmhn-resources .ttmhn-list-col .et_pb_toggle.ttmhn-hidden + .et_pb_button_module_wrapper {
    display: none !important;
}

/* ---------- sidebar column: tighten to mockup ---------- */
.ttmhn-resources .ttmhn-side-col {
    padding-left: 8px;
}

/* ============================================================
   Sidebar rebuilt as NATIVE Divi 5 modules (client-editable).
   The old [ttmhn_resources_sidebar] shortcode is gone; the cards
   are now Group modules, the headings Heading modules, the blurb
   a Text module, the button a Button module, and the menu a Divi
   Menu module bound to the "Resources Sidebar" nav menu.
   These rules re-map that module markup onto the original design:
   the classes ttmhn-card / ttmhn-card-heading / ttmhn-menu /
   ttmhn-help-card / ttmhn-help-link are set on each module in the
   Builder (Advanced > CSS Class), but they now sit on the module
   WRAPPER, so we target the real inner elements here.
   ============================================================ */

/* --- cards: two Group modules stacked in the column --- */
.ttmhn-resources .ttmhn-side-col .et_pb_group.ttmhn-card {
    display: block !important;   /* override et_flex_group so children stack as blocks */
    margin: 0 0 16px !important;
}
.ttmhn-resources .ttmhn-side-col .et_pb_group.ttmhn-card:last-child {
    margin-bottom: 0 !important;
}
/* .ttmhn-card (border/radius/#fff/padding) and .ttmhn-help-card (#F8F4F9)
   base rules from ttmhn-resources.css still apply to the group div. */

/* --- card heading: class is on the module wrapper; style the inner <h2> --- */
.ttmhn-resources .ttmhn-side-col .ttmhn-card-heading .et_pb_module_header {
    margin: 0 0 10px !important;
    padding: 0 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    color: #8A7F8C !important;
    line-height: 1.3 !important;
}

/* --- menu: coerce Divi's header-nav module into a vertical list --- */
.ttmhn-resources .ttmhn-side-col .ttmhn-menu .et_mobile_nav_menu {
    display: none !important;     /* no hamburger — we always show the list */
}
.ttmhn-resources .ttmhn-side-col .ttmhn-menu,
.ttmhn-resources .ttmhn-side-col .ttmhn-menu .et_pb_menu_inner_container,
.ttmhn-resources .ttmhn-side-col .ttmhn-menu .et_pb_menu__wrap,
.ttmhn-resources .ttmhn-side-col .ttmhn-menu .et_pb_menu__menu,
.ttmhn-resources .ttmhn-side-col .ttmhn-menu .et-menu-nav {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    float: none !important;
    position: static !important;
    text-align: left !important;
}
.ttmhn-resources .ttmhn-side-col .ttmhn-menu ul.et-menu {
    display: block !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
}
.ttmhn-resources .ttmhn-side-col .ttmhn-menu ul.et-menu > li {
    display: block !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
.ttmhn-resources .ttmhn-side-col .ttmhn-menu ul.et-menu > li:before,
.ttmhn-resources .ttmhn-side-col .ttmhn-menu ul.et-menu > li:after {
    display: none !important;
    content: none !important;
}
.ttmhn-resources .ttmhn-side-col .ttmhn-menu ul.et-menu > li > a {
    display: block !important;
    padding: 8px 10px !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    color: #5A4A5B !important;
    text-decoration: none !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    border-radius: 6px !important;
    opacity: 1 !important;
    transition: background .12s, color .12s !important;
}
.ttmhn-resources .ttmhn-side-col .ttmhn-menu ul.et-menu > li > a:hover {
    background: #F8F4F9 !important;
    color: #5A4A5B !important;
}
.ttmhn-resources .ttmhn-side-col .ttmhn-menu ul.et-menu > li.current-menu-item > a,
.ttmhn-resources .ttmhn-side-col .ttmhn-menu ul.et-menu > li.current_page_item > a {
    background: #7F4182 !important;
    color: #fff !important;
}

/* --- help card blurb (Text module) --- */
.ttmhn-resources .ttmhn-side-col .ttmhn-help-card .et_pb_text_inner p,
.ttmhn-resources .ttmhn-side-col .ttmhn-help-card p {
    margin: 0 0 12px !important;
    font-size: 14px !important;
    color: #5A4A5B !important;
    line-height: 1.5 !important;
}

/* --- help card button (Button module) as the outline "Contact us" link --- */
.ttmhn-resources .ttmhn-side-col .et_pb_button_module_wrapper {
    margin: 0 !important;
    padding: 0 !important;
    text-align: left;
}
.ttmhn-resources .ttmhn-side-col .et_pb_button.ttmhn-help-link,
#page-container .ttmhn-resources .ttmhn-side-col .et_pb_button.ttmhn-help-link {
    display: inline-block !important;
    padding: 6px 13px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: .03em !important;
    text-transform: uppercase !important;
    color: #7F4182 !important;
    background: transparent !important;
    border: 1px solid #7F4182 !important;
    border-radius: 6px !important;
}
.ttmhn-resources .ttmhn-side-col .et_pb_button.ttmhn-help-link:hover,
#page-container .ttmhn-resources .ttmhn-side-col .et_pb_button.ttmhn-help-link:hover {
    background: #7F4182 !important;
    color: #fff !important;
    border-color: #7F4182 !important;
}
.ttmhn-resources .ttmhn-side-col .et_pb_button:after,
.ttmhn-resources .ttmhn-side-col .et_pb_button:hover:after {
    display: none !important;
    content: none !important;
}

/* ---------- mobile ---------- */
@media (max-width: 980px) {
    .ttmhn-resources .ttmhn-list-col {
        grid-template-columns: minmax(0, 1fr);
    }
    .ttmhn-resources .ttmhn-list-col .et_pb_button_module_wrapper {
        grid-column: 1;
        align-self: auto;
        padding: 0 16px 13px 42px;
    }
    .ttmhn-resources .ttmhn-list-col .et_pb_toggle {
        border-bottom: 0 !important;
        padding-bottom: 6px !important;
    }
    .ttmhn-resources .ttmhn-side-col {
        padding-left: 0;
        margin-top: 24px;
    }
}