/*
 * Template 500
 *
 * Stylesheet organization
 *  1. Design tokens
 *  2. Template-scoped base styles
 *  3. Accessibility
 *  4. Shared layout primitives
 *  5. Shared typography and elements
 *  6. Site header and navigation
 *  7. Homepage components
 *     7.1 Introductory hero
 *     7.2 Ancestor search and links
 *     7.3 Photo Collection
 *     7.4 Contact call-to-action
 *     7.5 What's New and featured story
 *     7.6 Upcoming Anniversaries and On This Day
 *     7.7 Featured person
 *     7.8 Notable Ancestors
 *     7.9 Surname cloud
 *  8. Site footer
 *  9. TNG compatibility adjustments
 * 10. Responsive adjustments
 * 11. Mod compatibility
 * 12. Print adjustments
 *
 * Rules should be added to the narrowest appropriate section. Reusable
 * geometry belongs in Shared layout primitives; component-specific exceptions
 * stay with their component. Change the variables in section 1 first when
 * adjusting the shared palette, spacing, or typography.
 *
 * This stylesheet contains the distributed Template 500 design. Put a
 * site-specific change in mytngstyle.css when it should survive a future
 * template import. Homepage component rules remain in stylesheet source order;
 * index.php documents the current visual order of those sections.
 */

/* ==========================================================================
   1. Design tokens
   ========================================================================== */

:root {
    --t500-color-ink: #1e2221;                       /* Near-black charcoal — primary text */
    --t500-color-ink-soft: #5f6764;                  /* Muted gray-green — secondary text */
    --t500-color-paper: #ffffff;                     /* Clean white — overall page canvas */
    --t500-color-surface: #ffffff;                   /* Clean white — cards, panels, and form fields */
    --t500-color-surface-soft: #f5f2ec;              /* Soft ivory — homepage cards, banners, and image padding */
    --t500-color-surface-muted: #eee9df;             /* Warm ivory — muted section backgrounds */
    --t500-color-border: #d8d0c3;                    /* Warm light beige — standard borders */
    --t500-color-border-strong: #aaaaaa;             /* Medium gray — stronger legacy control borders */
    --t500-color-brand: #526c99;                     /* Slate blue — navigation, footer, and primary controls */
    --t500-color-brand-deep: #496189;                /* Deep slate blue — headings and prominent panels */
    --t500-color-accent: #a77a42;                    /* Warm bronze-gold — decorative accents */
    --t500-color-nav-accent: #fc0;                   /* Bright gold — active TNG tabs and navigation interaction */
    --t500-color-accent-interactive: #805c30;        /* Dark bronze — accessible link hover color */
    --t500-color-focus: #176b91;                     /* Dark teal-blue — keyboard focus outlines */
    --t500-color-on-brand: #ffffff;                  /* Clean white — text displayed over brand colors */
    --t500-color-on-brand-muted: #eee9df;            /* Warm ivory — softer text over brand colors */
    --t500-color-nav-hover: #445b82;                 /* Dark slate blue — accessible background for gold navigation text */
    --t500-color-on-brand-hover: rgb(255 255 255 / 12%); /* Translucent white — general hover overlay on brand backgrounds */
    --t500-color-on-brand-border: rgb(255 255 255 / 20%); /* Translucent white — dividers over brand colors */
    --t500-color-print-ink: #000000;                 /* Pure black — printed text */
    --t500-ancestor-icon-color: var(--t500-color-accent); /* Warm bronze-gold — Notable Ancestors SVG icons */

    /* Surname cloud colors. TNG assigns one size class per frequency bucket:
       size1 is the most frequent, size9 is less frequent, and size0 is the
       smallest bucket. These clear, lively colors stay dark enough to read
       well on a white background without feeling fluorescent. */
    --t500-color-surname-size-1: #1673b5; /* Bright blue */
    --t500-color-surname-size-2: #8a6200; /* Gold */
    --t500-color-surname-size-3: #187c52; /* Green */
    --t500-color-surname-size-4: #b54e12; /* Orange */
    --t500-color-surname-size-5: #b83d4e; /* Red */
    --t500-color-surname-size-6: #b33f7b; /* Pink */
    --t500-color-surname-size-7: #6a52b3; /* Violet */
    --t500-color-surname-size-8: #007583; /* Teal */
    --t500-color-surname-size-9: #8c5a15; /* Amber */
    --t500-color-surname-size-0: #497717; /* Leaf green */

    --t500-font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --t500-font-heading: Georgia, "Times New Roman", serif;

    --t500-text-small: 0.875rem;
    --t500-text-base: 1rem;
    --t500-text-lead: clamp(1.0625rem, 1rem + 0.25vw, 1.2rem);
    --t500-text-h3: clamp(1.1rem, 1rem + 0.35vw, 1.35rem);
    --t500-text-h2: clamp(1.4rem, 1.15rem + 0.8vw, 2rem);
    --t500-text-h1: clamp(2rem, 1.45rem + 2vw, 3.4rem);

    --t500-space-1: 0.375rem;
    --t500-space-2: 0.75rem;
    --t500-space-3: 1rem;
    --t500-space-4: 1.5rem;
    --t500-space-5: 2rem;
    --t500-space-6: 3rem;
    --t500-space-7: 4.5rem;

    --t500-content-width: 80rem;
    --t500-page-gutter: clamp(1rem, 3vw, 2.5rem);
    --t500-mobile-header-height: 4rem;
    --t500-radius-small: 0.25rem;
    --t500-shadow-subtle: 0 0.35rem 1.25rem rgb(39 45 43 / 5%); /* Very faint charcoal shadow */
    --t500-shadow-soft: 0 0.75rem 2rem rgb(39 45 43 / 10%);    /* Soft charcoal shadow */
}

/* Opening the phone menu locks body scrolling. The root element owns the
   viewport scrollbar, so reserve its space in both states to avoid shifting
   the page horizontally. */
html {
    scrollbar-gutter: stable;
}

/* ==========================================================================
   2. Template-scoped base styles
   ========================================================================== */

.tng-template-500 {
    margin: 0;
    color: var(--t500-color-ink);
    background: var(--t500-color-paper);
    font-family: var(--t500-font-body);
    font-size: var(--t500-text-base);
    line-height: 1.6;
    text-rendering: optimizeLegibility;
}

.tng-template-500,
.tng-template-500 *,
.tng-template-500 *::before,
.tng-template-500 *::after {
    box-sizing: border-box;
}

/* TNG stretches black.gif and spacer.gif into legacy chart connector lines;
   their HTML dimensions must not be replaced with responsive image sizing. */
.tng-template-500 img:not([src$="black.gif"]):not([src$="spacer.gif"]) {
    max-width: 100%;
    height: auto;
}

.tng-template-500 button,
.tng-template-500 input,
.tng-template-500 select,
.tng-template-500 textarea {
    font: inherit;
}

/* ==========================================================================
   3. Accessibility
   ========================================================================== */

.tng-template-500 .skip-link {
    position: absolute;
    z-index: 1000;
    top: var(--t500-space-2);
    left: var(--t500-space-2);
    padding: var(--t500-space-2) var(--t500-space-3);
    color: var(--t500-color-on-brand);
    background: var(--t500-color-brand-deep);
    text-decoration: none;
    transform: translateY(-200%);
}

.tng-template-500 .skip-link:focus {
    color: var(--t500-color-on-brand);
    outline-color: var(--t500-color-brand-deep);
    transform: translateY(0);
}

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.tng-template-500 :focus-visible {
    outline: 0.1875rem solid var(--t500-color-focus);
    outline-offset: 0.1875rem;
}

.tng-template-500 .site-navigation ul.tngdd > li > .menulink:focus-visible,
.tng-template-500 .site-navigation ul.tngdd > li > a:focus-visible,
.tng-template-500 .site-navigation .icons a:focus-visible,
.tng-template-500 .site-navigation .icons-rt a:focus-visible,
.tng-template-500 .site-navigation .icons-rt select:focus-visible,
.tng-template-500 .home-featured-story :focus-visible,
.tng-template-500 .home-featured-person :focus-visible,
.tng-template-500 .site-footer :focus-visible {
    outline-color: var(--t500-color-on-brand);
}

/* ==========================================================================
   4. Shared layout primitives
   ========================================================================== */

.layout-container {
    width: min(100% - (2 * var(--t500-page-gutter)), var(--t500-content-width));
    margin-inline: auto;
}

.home-page {
    padding-block: var(--t500-space-5) var(--t500-space-7);
}

.home-page > * + * {
    margin-top: var(--t500-space-6);
}

.site-content {
    min-width: 0;
    padding-block: var(--t500-space-5) var(--t500-space-7);
}

/* ==========================================================================
   5. Shared typography and elements
   ========================================================================== */

.tng-template-500 h1,
.tng-template-500 h2,
.tng-template-500 h3 {
    margin-block: 0 var(--t500-space-3);
    color: var(--t500-color-brand-deep);
    font-family: var(--t500-font-heading);
    font-weight: 400;
    line-height: 1.15;
    text-wrap: balance;
}

.tng-template-500 h1 {
    font-size: var(--t500-text-h1);
}

.tng-template-500 h2 {
    font-size: var(--t500-text-h2);
}

.tng-template-500 h3 {
    font-size: var(--t500-text-h3);
}

/* TNG places a sprite-based icon before the headings of many public pages.
   Template 500 uses text-only page headings, so suppress those decorations
   without affecting the administrator's separately configurable menu icons. */
.tng-template-500 .headericon {
    display: none;
}

.tng-template-500 p {
    margin-block: 0 var(--t500-space-3);
}

.tng-template-500 a {
    color: var(--t500-color-brand);
    text-decoration: none;
}

.tng-template-500 a:hover {
    color: var(--t500-color-accent-interactive);
    text-decoration-line: underline;
    text-decoration-style: dotted;
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.2em;
}

.tng-template-500 input[type="text"],
.tng-template-500 input[type="search"],
.tng-template-500 select,
.tng-template-500 textarea {
    max-width: 100%;
    color: var(--t500-color-ink);
    background: var(--t500-color-surface);
    border: 1px solid var(--t500-color-border);
    border-radius: var(--t500-radius-small);
}

.tng-template-500 button,
.tng-template-500 input[type="button"],
.tng-template-500 input[type="submit"] {
    color: var(--t500-color-on-brand);
    background: var(--t500-color-brand);
    border: 1px solid var(--t500-color-brand);
    border-radius: var(--t500-radius-small);
    cursor: pointer;
}

/* ==========================================================================
   6. Site header and navigation
   ========================================================================== */

.site-header {
    background: var(--t500-color-surface);
}

.site-header__inner {
    display: flex;
    align-items: center;
    min-height: 4.5rem;
}

.tng-template-500 .site-identity {
    display: grid;
    gap: 0.1rem;
}

.tng-template-500 .site-identity,
.tng-template-500 .site-identity:hover {
    color: var(--t500-color-brand-deep);
    text-decoration: none;
}

.site-identity__title {
    font-family: var(--t500-font-heading);
    font-size: var(--t500-text-h3);
    line-height: 1.15;
}

.site-identity__subtitle {
    color: var(--t500-color-ink-soft);
    font-size: var(--t500-text-small);
    line-height: 1.3;
}

.site-menu-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 2.75rem;
    min-height: 2.75rem;
    padding: 0;
    color: var(--t500-color-brand-deep);
    background: transparent;
    border: 1px solid var(--t500-color-border);
    border-radius: var(--t500-radius-small);
    cursor: pointer;
}

.site-menu-toggle__icon,
.site-menu-toggle__icon::before,
.site-menu-toggle__icon::after {
    display: block;
    width: 1.15rem;
    height: 0.125rem;
    background: currentColor;
    content: "";
}

.site-menu-toggle__icon {
    position: relative;
}

.site-menu-toggle__icon::before,
.site-menu-toggle__icon::after {
    position: absolute;
    left: 0;
}

.site-menu-toggle__icon::before {
    top: -0.35rem;
}

.site-menu-toggle__icon::after {
    top: 0.35rem;
}

.site-navigation {
    position: sticky;
    z-index: 100;
    top: 0;
    min-width: 0;
    color: var(--t500-color-on-brand);
    background: var(--t500-color-brand);
    border-bottom: 1px solid var(--t500-color-brand);
}

.site-navigation__inner {
    position: relative;
}

.site-navigation .menucontainer,
.site-navigation .innercontainer {
    width: 100%;
    height: auto;
    min-height: 2.875rem;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.site-navigation .innercontainer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--t500-space-2);
}

.site-navigation .innercontainer > div:first-child {
    display: flex !important;
    align-items: stretch;
    min-width: 0;
}

.site-navigation .icons,
.site-navigation .icons-rt {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    white-space: nowrap;
}

.site-navigation ul.tngdd {
    display: flex;
    align-items: stretch;
    width: auto;
    min-width: 0;
    height: auto;
    margin: 0;
    padding: 0;
    background: transparent;
    list-style: none;
}

.site-navigation ul.tngdd > li {
    position: relative;
    display: block;
    float: none;
    margin: 0;
}

.site-navigation ul.tngdd > li > .menulink,
.site-navigation .icons a,
.site-navigation .icons-rt a {
    /* A flex alignment keeps TNG's core links (Home, Search, Share, Print)
       on the same visual baseline as the template menu controls. */
    display: flex;
    align-items: center;
    height: auto;
    min-height: 2.875rem;
    padding: 0.7rem 0.9rem;
    color: var(--t500-color-on-brand);
    background: transparent;
    border: 0;
    border-radius: var(--t500-radius-small);
    cursor: pointer;
    font-family: inherit;
    font-size: var(--t500-text-small);
    line-height: 1.4;
    text-decoration: none;
}

.site-navigation ul.tngdd > li > .menulink:hover,
.site-navigation ul.tngdd > li > .menulink:focus,
.site-navigation ul.tngdd > li.menuhover > .menulink,
.site-navigation ul.tngdd > li.is-submenu-open > .menulink,
.site-navigation .icons a:hover,
.site-navigation .icons a:focus,
.site-navigation .icons-rt a:hover,
.site-navigation .icons-rt a:focus {
    color: var(--t500-color-nav-accent);
    background: var(--t500-color-nav-hover);
}

.site-navigation ul.tngdd > li > .menulink::after {
    display: inline-block;
    margin-left: 0.45rem;
    border: 0.25rem solid transparent;
    border-top-color: currentColor;
    transform: translateY(0.2rem);
    content: "";
}

.site-navigation ul.tngdd > li > ul {
    position: absolute;
    z-index: 1000;
    top: 100%;
    left: 0;
    display: none;
    min-width: 13rem;
    margin: 0;
    padding: var(--t500-space-1) 0;
    background: var(--t500-color-surface);
    border: 1px solid var(--t500-color-border);
    box-shadow: var(--t500-shadow-soft);
    list-style: none;
}

.site-navigation ul.tngdd > li:hover > ul,
.site-navigation ul.tngdd > li.menuhover > ul,
.site-navigation ul.tngdd > li.is-submenu-open > ul {
    display: block;
    visibility: visible;
    opacity: 1;
}

.tng-template-500 .site-navigation ul.tngdd > li > ul,
.tng-template-500 .site-navigation ul.tngdd > li > ul li:first-child,
.tng-template-500 .site-navigation ul.tngdd > li > ul li:first-child > a,
.tng-template-500 .site-navigation ul.tngdd > li > ul li:last-child,
.tng-template-500 .site-navigation ul.tngdd > li > ul li:last-child > a {
    border-radius: 0;
}

.site-navigation ul.tngdd > li > ul li {
    display: block;
    float: none;
    width: 100%;
    margin: 0;
    border: 0;
    border-bottom: 1px solid var(--t500-color-border);
}

.site-navigation ul.tngdd > li > ul li:last-child {
    border-bottom: 0;
}

.site-navigation ul.tngdd > li > ul a {
    display: block;
    width: 100%;
    padding: 0.55rem var(--t500-space-3);
    color: var(--t500-color-brand-deep);
    background: transparent;
    border: 0;
    font-size: var(--t500-text-small);
    line-height: 1.4;
    text-decoration: none;
    white-space: nowrap;
}

.site-navigation ul.tngdd > li > ul a:hover,
.site-navigation ul.tngdd > li > ul a:focus {
    color: var(--t500-color-nav-accent);
    background: var(--t500-color-nav-hover);
}

.site-navigation #profile-menu > li > ul {
    right: 0;
    left: auto;
}

.site-navigation #searchdrop {
    position: absolute;
    z-index: 1001;
    top: 100%;
    right: 0;
    left: 0;
    width: 100%;
    margin: 0;
    padding: var(--t500-space-4);
    color: var(--t500-color-ink);
    background: var(--t500-color-surface);
    border: 1px solid var(--t500-color-border);
    border-top: 0;
    border-radius: 0;
    box-shadow: var(--t500-shadow-soft);
}

.site-navigation #searchdrop .subhead {
    color: var(--t500-color-brand-deep);
}

.site-navigation #searchdrop > a:first-child {
    margin-left: var(--t500-space-3);
}

.site-navigation #searchdrop form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--t500-space-2);
}

.site-navigation #searchdrop label {
    color: var(--t500-color-ink-soft);
    font-size: var(--t500-text-small);
    font-weight: 600;
}

.site-navigation #searchdrop input[type="text"] {
    flex: 1 1 10rem;
    min-width: 8rem;
    min-height: 2.5rem;
    padding: 0.5rem 0.65rem;
}

.site-navigation #searchdrop input[type="submit"] {
    min-height: 2.5rem;
    padding: 0.5rem var(--t500-space-4);
}

.site-navigation #searchdrop input[type="submit"]:hover,
.site-navigation #searchdrop input[type="submit"]:focus {
    background: var(--t500-color-brand-deep);
}

@media (max-width: 46.875rem) {
    .site-navigation .icons-rt {
        display: none;
    }
}

@media (max-width: 40rem) {
    .tng-template-500.site-menu-open {
        overflow: hidden;
    }

    .site-header {
        position: sticky;
        z-index: 110;
        top: 0;
    }

    .tng-template-500 .site-header__inner {
        justify-content: flex-start;
        gap: var(--t500-space-3);
        min-height: var(--t500-mobile-header-height);
    }

    .site-menu-toggle {
        display: inline-flex;
    }

    .tng-template-500 .site-identity {
        min-width: 0;
    }

    .site-identity__subtitle {
        display: none;
    }

    .site-navigation {
        position: fixed;
        z-index: 109;
        top: var(--t500-mobile-header-height);
        right: 0;
        bottom: auto;
        left: 0;
        display: none;
        width: 100%;
        max-height: calc(100dvh - var(--t500-mobile-header-height));
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .site-navigation.is-open {
        display: block;
    }

    .site-navigation .innercontainer,
    .site-navigation .innercontainer > div:first-child,
    .site-navigation ul.tngdd {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    .site-navigation .icons {
        flex-wrap: wrap;
        width: 100%;
    }

    .site-navigation ul.tngdd > li > .menulink {
        width: 100%;
    }

    .site-navigation ul.tngdd > li > ul,
    .site-navigation #profile-menu > li > ul {
        position: static;
        display: none;
        visibility: hidden;
        opacity: 0;
        width: 100%;
        min-width: 0;
        padding: 0;
        background: var(--t500-color-surface-muted);
        border: 0;
        box-shadow: none;
    }

    /* TNG's menu script adds hover classes even on touch-sized layouts. Keep
       closed submenus out of the layout until our click handler opens them. */
    .tng-template-500 .site-navigation ul.tngdd > li:not(.is-submenu-open) > ul,
    .tng-template-500 .site-navigation ul.tngdd > li:not(.is-submenu-open):hover > ul,
    .tng-template-500 .site-navigation ul.tngdd > li:not(.is-submenu-open):focus-within > ul,
    .tng-template-500 .site-navigation ul.tngdd > li.menuhover:not(.is-submenu-open) > ul {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        opacity: 0 !important;
    }

    .tng-template-500 .site-navigation ul.tngdd > li.is-submenu-open > ul {
        display: block !important;
        visibility: visible !important;
        height: auto !important;
        opacity: 1 !important;
    }

    .site-navigation #searchdrop {
        position: static;
        padding: var(--t500-space-3);
        border-inline: 0;
    }

    .site-navigation #searchdrop form {
        align-items: stretch;
        flex-direction: column;
    }

    .site-navigation #searchdrop input[type="text"] {
        flex-basis: auto;
        width: 100%;
    }

    /* TNG jumps search inputs from 210px to 350px above 480px. Let People
       and Family search fields grow with their table cells instead. */
    .tng-template-500:is(.searchform, .famsearchform) .searchformbox {
        float: none;
        display: block;
        width: 100%;
        margin-right: 0;
    }

    .tng-template-500:is(.searchform, .famsearchform) .searchformbox .rounded-table {
        width: 100%;
        table-layout: fixed;
    }

    .tng-template-500:is(.searchform, .famsearchform) .searchformbox td.fieldnameback {
        width: 7rem;
    }

    .tng-template-500:is(.searchform, .famsearchform) .searchformbox td.databack {
        width: auto;
        overflow-wrap: anywhere;
    }

    .tng-template-500:is(.searchform, .famsearchform) .searchformbox input.longfield {
        width: 100%;
        max-width: 21.875rem;
    }

    .tng-template-500.searchsite .searchformbox,
    .tng-template-500.searchsite .searchsidebar {
        position: static;
        float: none;
        display: block;
        width: 100%;
        margin-right: 0;
    }

    .tng-template-500.searchsite .searchsidebar {
        clear: both;
    }

    .tng-template-500.searchsite .searchsidebar > p:last-child {
        display: flex;
        align-items: flex-start;
        flex-direction: column;
        gap: var(--t500-space-3);
    }

    .tng-template-500.searchsite .searchsidebar > p:last-child > a.snlink {
        display: inline-flex;
        line-height: 1.2;
        white-space: nowrap;
    }
}

/* ==========================================================================
   7. Homepage components
   ========================================================================== */

/* 7.1 Introductory hero
   -------------------------------------------------------------------------- */

.home-intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.78fr);
    gap: clamp(var(--t500-space-5), 6vw, var(--t500-space-7));
    align-items: center;
    padding-block: 0 var(--t500-space-3);
}

.home-intro__content {
    padding-inline-start: clamp(0rem, 3vw, var(--t500-space-5));
}

.home-intro__content h1 {
    margin-bottom: var(--t500-space-4);
}

.home-intro__content h1::after {
    display: block;
    width: 2.5rem;
    height: 0.125rem;
    margin-top: var(--t500-space-4);
    background: var(--t500-color-accent);
    content: "";
}

.home-intro__subtitle {
    margin-bottom: var(--t500-space-4);
    color: var(--t500-color-brand-deep);
    font-family: var(--t500-font-heading);
    font-size: var(--t500-text-lead);
    line-height: 1.35;
    text-wrap: balance;
}

.home-intro__welcome {
    color: var(--t500-color-ink);
}

.home-intro__welcome > :last-child {
    margin-bottom: 0;
}

.home-intro__media {
    justify-self: end;
    width: min(100%, 29rem);
    margin: 0;
    padding: clamp(0.35rem, 0.8vw, 0.625rem);
    background: var(--t500-color-surface-soft);
    border: 1px solid var(--t500-color-border);
    box-shadow: var(--t500-shadow-soft);
}

.home-intro__media img {
    width: 100%;
    max-height: 34rem;
    object-fit: contain;
    object-position: center;
}

/* 7.2 Ancestor search and links
   -------------------------------------------------------------------------- */

.home-search-links {
    display: grid;
    grid-template-columns: 1fr;
    overflow: hidden;
    background: var(--t500-color-surface);
    border: 1px solid var(--t500-color-border);
    box-shadow: var(--t500-shadow-subtle);
}

.home-search-links--one-link-column {
    grid-template-columns: minmax(0, 3fr) minmax(17rem, 2fr);
}

.home-search-links--two-link-columns {
    grid-template-columns: minmax(17rem, 2fr) minmax(0, 3fr);
}

.home-search,
.home-links {
    min-width: 0;
    padding: clamp(var(--t500-space-4), 3vw, var(--t500-space-5));
}

.home-search h2,
.home-links h2 {
    margin-bottom: var(--t500-space-4);
    font-size: clamp(1.3rem, 1.15rem + 0.5vw, 1.7rem);
}

.home-search__form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--t500-space-3);
    align-items: end;
}

.home-search__field {
    display: grid;
    gap: var(--t500-space-1);
    min-width: 0;
}

.home-search__field label {
    color: var(--t500-color-ink-soft);
    font-size: var(--t500-text-small);
    font-weight: 600;
}

.home-search__field input {
    width: 100%;
    min-height: 3rem;
    padding: 0.65rem 0.75rem;
}

.home-search__form button {
    justify-self: end;
    min-width: 7rem;
    min-height: 2.75rem;
    padding: 0.6rem var(--t500-space-4);
}

.home-search__form button:hover {
    background: var(--t500-color-brand-deep);
    border-color: var(--t500-color-brand-deep);
}

.home-search__advanced {
    justify-self: start;
    align-self: center;
    font-size: var(--t500-text-small);
    font-weight: 600;
}

.home-links {
    background: var(--t500-color-surface-soft);
    border-left: 1px solid var(--t500-color-border);
}

.home-search-links--links-only .home-links {
    border-left: 0;
}

.home-links a {
    color: var(--t500-color-brand-deep);
}

.home-links__list {
    display: grid;
    column-gap: var(--t500-space-5);
    row-gap: var(--t500-space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.home-links__list--two-columns {
    grid-auto-flow: column;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.home-links__list--rows-2 {
    grid-template-rows: repeat(2, auto);
}

.home-links__list--rows-3 {
    grid-template-rows: repeat(3, auto);
}

.home-links__item {
    min-width: 0;
}

.home-links__item h3 {
    margin-bottom: var(--t500-space-1);
    font-family: var(--t500-font-body);
    font-size: var(--t500-text-base);
    font-weight: 600;
}

.home-links__item h3 a {
    text-decoration: none;
}

.home-links__item p {
    margin: 0;
    color: var(--t500-color-ink-soft);
    font-size: var(--t500-text-small);
    line-height: 1.5;
}

/* 7.3 Photo Collection
   -------------------------------------------------------------------------- */

.home-photographs {
    text-align: center;
}

.home-photographs > h2 {
    margin-bottom: var(--t500-space-4);
}

.home-photographs__grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--t500-space-3);
    align-items: stretch;
}

.home-photographs__item {
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: var(--t500-space-2);
    overflow: hidden;
    background: var(--t500-color-surface);
    border: 1px solid var(--t500-color-border);
    box-shadow: var(--t500-shadow-soft);
}

.home-photographs__item--linked {
    padding: 0;
}

.home-photographs__item > a {
    display: grid;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    padding: var(--t500-space-2);
    overflow: hidden;
    place-items: center;
}

.home-photographs__item > a:focus-visible {
    outline-offset: -0.25rem;
}

.home-photographs__item img {
    display: block;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    object-fit: cover;
    object-position: center;
}

.home-photographs__more {
    display: inline-block;
    margin-top: var(--t500-space-4);
    font-weight: 600;
}

/* 7.4 Contact call-to-action
   -------------------------------------------------------------------------- */

.home-contact {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--t500-space-5);
    padding: clamp(var(--t500-space-5), 5vw, var(--t500-space-6));
    color: var(--t500-color-ink);
    background: var(--t500-color-surface-soft);
    border: 1px solid var(--t500-color-border);
}

.home-contact__content {
    max-width: 48rem;
}

.home-contact h2 {
    margin-bottom: var(--t500-space-2);
    color: inherit;
}

.home-contact__text {
    color: var(--t500-color-ink-soft);
}

.home-contact__text > :last-child {
    margin-bottom: 0;
}

.home-contact__actions {
    display: flex;
    flex: none;
    flex-wrap: wrap;
    gap: var(--t500-space-3);
}

.home-contact__actions a {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
    padding: 0.65rem var(--t500-space-4);
    color: var(--t500-color-on-brand);
    background: var(--t500-color-brand-deep);
    border: 1px solid var(--t500-color-brand-deep);
    font-weight: 700;
    text-decoration: none;
}

.home-contact__actions a:hover {
    color: var(--t500-color-on-brand);
    background: var(--t500-color-brand);
    border-color: var(--t500-color-brand);
}

/* 7.5 What's New and featured story
   -------------------------------------------------------------------------- */

.home-editorial-grid {
    display: grid;
    grid-template-columns: minmax(16rem, 0.6fr) minmax(0, 1.8fr);
    gap: var(--t500-space-5);
    align-items: stretch;
}

.home-editorial-grid--single {
    grid-template-columns: minmax(0, 1fr);
}

.home-updates,
.home-featured-story {
    min-width: 0;
}

.home-updates {
    padding: var(--t500-space-5);
    background: var(--t500-color-surface);
    border: 1px solid var(--t500-color-border);
}

.home-updates__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--t500-space-3);
    margin-bottom: var(--t500-space-4);
}

.home-updates__header h2 {
    margin: 0;
}

.home-updates__all {
    flex: none;
    font-size: var(--t500-text-small);
    font-weight: 600;
}

.home-updates__timelines,
.home-updates__timeline {
    display: grid;
    gap: 0;
}

.home-updates__timelines {
    grid-template-columns: minmax(0, 1fr);
}

.home-updates__timeline {
    margin: 0;
    padding: 0;
    list-style: none;
}

.home-updates--wide .home-updates__timelines {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--t500-space-6);
}

.home-updates--wide .home-updates__timeline:nth-child(n + 3) {
    display: none;
}

@media (min-width: 75rem) {
    .home-updates--wide .home-updates__timelines {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .home-updates--wide .home-updates__timeline:nth-child(n + 3) {
        display: grid;
    }
}

.home-updates__empty {
    margin: 0;
    color: var(--t500-color-ink-soft);
}

.home-updates__item {
    position: relative;
    display: grid;
    gap: var(--t500-space-1);
    padding: 0 0 var(--t500-space-4) var(--t500-space-4);
    border-left: 1px solid var(--t500-color-border);
}

.home-updates__item:last-child {
    padding-bottom: 0;
}

.home-updates__item::before {
    position: absolute;
    top: 0.35rem;
    left: -0.3125rem;
    width: 0.5625rem;
    height: 0.5625rem;
    background: var(--t500-color-accent);
    border: 2px solid var(--t500-color-surface);
    border-radius: 50%;
    box-shadow: 0 0 0 1px var(--t500-color-accent);
    content: "";
}

.home-updates__item time,
.home-updates__item span {
    color: var(--t500-color-ink-soft);
    font-size: var(--t500-text-small);
}

.home-updates__item a {
    font-family: var(--t500-font-heading);
    font-size: var(--t500-text-h3);
    line-height: 1.25;
    text-decoration: none;
}

.home-featured-story {
    display: grid;
    grid-template-columns: minmax(14rem, 0.8fr) minmax(0, 1.2fr);
    overflow: hidden;
    color: var(--t500-color-on-brand);
    background: var(--t500-color-brand-deep);
}

.home-featured-story__content {
    align-self: center;
    padding: var(--t500-space-5);
}

.home-featured-story__eyebrow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--t500-space-2);
    margin-bottom: var(--t500-space-2);
}

.home-featured-story__heading {
    margin: 0;
    color: var(--t500-color-on-brand-muted);
    font-size: var(--t500-text-small);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.tng-template-500 .home-featured-story__history-link {
    display: inline-block;
    padding: 0.25rem 0.55rem;
    color: var(--t500-color-on-brand-muted);
    border: 1px solid rgb(255 255 255 / 38%);
    font-size: var(--t500-text-small);
    font-weight: 600;
    line-height: 1.35;
    text-decoration: none;
}

.home-featured-story__history {
    margin-top: var(--t500-space-4);
}

.tng-template-500 .home-featured-story__history-link:hover {
    background: var(--t500-color-on-brand-hover);
}

.home-featured-story h2 {
    color: var(--t500-color-on-brand);
}

.home-featured-story__summary {
    color: var(--t500-color-on-brand-muted);
}

.home-featured-story__summary > :last-child {
    margin-bottom: 0;
}

.tng-template-500 .home-featured-story__link {
    display: inline-block;
    margin-top: var(--t500-space-4);
    color: var(--t500-color-on-brand);
    font-weight: 600;
}

.tng-template-500 .home-featured-story a:hover {
    color: var(--t500-color-on-brand);
    text-decoration-thickness: 0.14em;
}

.home-featured-story__media {
    position: relative;
    display: grid;
    min-width: 0;
    min-height: 18rem;
    place-items: center;
    background: var(--t500-color-brand-deep);
}

.home-featured-story__media img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 100%;
    align-self: center;
    justify-self: center;
    object-fit: contain;
    object-position: center center;
}

/* 7.6 Upcoming Anniversaries and On This Day
   -------------------------------------------------------------------------- */

.home-calendar {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(16rem, 3fr);
    gap: var(--t500-space-5);
    align-items: stretch;
}

.home-calendar--single {
    grid-template-columns: minmax(0, 1fr);
}

.home-calendar__panel {
    min-width: 0;
    padding: var(--t500-space-5);
}

.home-calendar__upcoming {
    background: var(--t500-color-surface-soft);
    border: 1px solid var(--t500-color-border);
    box-shadow: var(--t500-shadow-subtle);
}

.home-calendar__today {
    background: var(--t500-color-surface);
    border: 1px solid var(--t500-color-border);
}

.home-calendar__date {
    margin-top: calc(-1 * var(--t500-space-3));
    color: var(--t500-color-ink-soft);
    font-size: var(--t500-text-small);
    font-weight: 600;
}

.home-calendar ul {
    display: grid;
    gap: var(--t500-space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.home-calendar__upcoming ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--t500-space-5);
}

.home-calendar li {
    display: grid;
    grid-template-columns: minmax(7rem, auto) minmax(0, 1fr);
    column-gap: var(--t500-space-3);
}

.home-calendar li time,
.home-calendar li span {
    color: var(--t500-color-ink-soft);
    font-size: var(--t500-text-small);
}

.home-calendar li a {
    font-weight: 600;
    text-decoration: none;
}

.home-calendar__today li span {
    grid-column: 1 / -1;
}

.home-calendar__upcoming li a {
    grid-column: 2;
}

.home-calendar__today li {
    grid-template-columns: minmax(0, 1fr);
}

.home-calendar__today li a {
    grid-column: 1;
}

.home-calendar__upcoming li time {
    grid-column: 1;
    grid-row: 1 / span 2;
}

.home-calendar__upcoming li span {
    grid-column: 2;
}

.home-calendar__empty {
    margin: 0;
    color: var(--t500-color-ink-soft);
}

.home-calendar__more {
    display: inline-block;
    margin-top: var(--t500-space-4);
    font-size: var(--t500-text-small);
    font-weight: 600;
}

/* 7.7 Featured person
   -------------------------------------------------------------------------- */

.home-featured-person {
    display: grid;
    grid-template-columns: minmax(16rem, 0.8fr) minmax(0, 1.2fr);
    overflow: hidden;
    color: var(--t500-color-on-brand);
    background: var(--t500-color-brand-deep);
    border: 1px solid var(--t500-color-border);
}

.home-featured-person__media {
    position: relative;
    min-height: 22rem;
    background: var(--t500-color-surface-soft);
}

.home-featured-person__media img {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.home-featured-person__content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 0.55fr);
    gap: var(--t500-space-4);
    align-items: center;
    align-self: center;
    padding: var(--t500-space-5);
}

.home-featured-person__heading {
    margin: 0 0 var(--t500-space-2);
    color: var(--t500-color-on-brand-muted);
    font-size: var(--t500-text-small);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.home-featured-person h2 {
    margin-bottom: var(--t500-space-2);
    color: inherit;
}

.tng-template-500 .home-featured-person h2 a {
    color: inherit;
    text-decoration: none;
}

.home-featured-person__summary > p:not(.home-featured-person__heading) {
    color: var(--t500-color-on-brand-muted);
}

.home-featured-person__summary > p {
    margin-bottom: var(--t500-space-2);
}

.home-featured-person__summary > a {
    display: inline-block;
    margin-top: var(--t500-space-3);
    color: var(--t500-color-on-brand);
    font-weight: 600;
}

.tng-template-500 .home-featured-person a:hover,
.tng-template-500 .home-featured-person a:focus {
    color: var(--t500-color-on-brand);
    text-decoration-line: underline;
    text-decoration-style: dotted;
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.2em;
}

.home-featured-person__facts {
    padding: var(--t500-space-4);
    background: transparent;
    border: 2px solid var(--t500-color-nav-hover);
}

.home-featured-person__facts h3 {
    margin-bottom: var(--t500-space-3);
    color: var(--t500-color-on-brand);
    font-family: var(--t500-font-body);
    font-size: var(--t500-text-small);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.home-featured-person__facts dl,
.home-featured-person__facts dd {
    margin: 0;
}

.home-featured-person__facts dl {
    display: grid;
    gap: var(--t500-space-3);
}

.home-featured-person__facts dt {
    margin-bottom: var(--t500-space-1);
    color: var(--t500-color-on-brand-muted);
    font-size: var(--t500-text-small);
    font-weight: 700;
}

.home-featured-person__facts dd {
    color: var(--t500-color-on-brand);
    line-height: 1.4;
}

.tng-template-500 .home-featured-person__facts dd a {
    color: inherit;
    text-decoration-line: underline;
    text-decoration-style: dotted;
    text-decoration-thickness: 0.06em;
    text-underline-offset: 0.2em;
}

.home-featured-person__facts dd span {
    display: block;
    margin-top: 0.15rem;
    color: var(--t500-color-on-brand-muted);
    font-size: var(--t500-text-small);
}

/* 7.8 Notable Ancestors
   -------------------------------------------------------------------------- */

.home-ancestors {
    padding: var(--t500-space-5);
    background: var(--t500-color-surface-soft);
    border: 1px solid var(--t500-color-border);
}

.home-ancestors a {
    color: var(--t500-color-brand-deep);
}

.home-ancestors > h2 {
    margin-bottom: var(--t500-space-4);
    text-align: center;
}

.home-ancestors__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    row-gap: var(--t500-space-4);
}

.home-ancestors__grid--count-1,
.home-ancestors__grid--count-2,
.home-ancestors__grid--count-3 {
    justify-content: center;
}

.home-ancestors__grid--count-1 {
    grid-template-columns: minmax(0, 18rem);
}

.home-ancestors__grid--count-2 {
    grid-template-columns: repeat(2, minmax(0, 18rem));
}

.home-ancestors__grid--count-3 {
    grid-template-columns: repeat(3, minmax(0, 18rem));
}

.home-ancestors__item {
    min-width: 0;
    padding: var(--t500-space-2) var(--t500-space-4);
    text-align: center;
}

.home-ancestors__item + .home-ancestors__item {
    border-left: 1px solid var(--t500-color-border);
}

.home-ancestors__item:nth-child(4n + 1) {
    border-left: 0;
}

.home-ancestors__media {
    display: block;
    width: 4rem;
    height: 4rem;
    margin: 0 auto var(--t500-space-3);
}

.home-ancestors__icon,
.home-ancestors__image {
    display: block;
    width: 100%;
    height: 100%;
}

.home-ancestors__icon {
    background-color: var(--t500-ancestor-icon-color);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.home-ancestors__image {
    object-fit: cover;
}

.home-ancestors__item h3 {
    margin-bottom: var(--t500-space-2);
}

.home-ancestors__item h3 a {
    text-decoration: none;
}

.home-ancestors__item p {
    max-width: 22rem;
    margin: 0 auto;
    color: var(--t500-color-ink-soft);
    font-size: var(--t500-text-small);
}

/* 7.9 Surname cloud
   -------------------------------------------------------------------------- */

.home-collection {
    overflow: hidden;
    background: var(--t500-color-surface);
    border: 1px solid var(--t500-color-border);
    box-shadow: var(--t500-shadow-subtle);
}

.home-surnames {
    min-width: 0;
    padding: var(--t500-space-5);
}

.home-surnames h2 {
    text-align: center;
}

.home-surnames .surnames-cloud {
    line-height: 2.1;
    text-align: center;
}

.home-surnames span.surnames-cloud {
    display: inline-block;
    padding: 0 var(--t500-space-2);
}

.home-surnames a.surnames-cloud {
    color: var(--t500-color-surname-size-1);
    text-decoration: none;
}

.home-surnames a.surnames-cloud:hover {
    text-decoration: underline;
}

/* Each TNG surname-frequency class has its own editable color token above. */
.home-surnames a.size1,
.home-surnames a.size1:visited {
    color: var(--t500-color-surname-size-1);
}

.home-surnames a.size2,
.home-surnames a.size2:visited {
    color: var(--t500-color-surname-size-2);
}

.home-surnames a.size3,
.home-surnames a.size3:visited {
    color: var(--t500-color-surname-size-3);
}

.home-surnames a.size4,
.home-surnames a.size4:visited {
    color: var(--t500-color-surname-size-4);
}

.home-surnames a.size5,
.home-surnames a.size5:visited {
    color: var(--t500-color-surname-size-5);
}

.home-surnames a.size6,
.home-surnames a.size6:visited {
    color: var(--t500-color-surname-size-6);
}

.home-surnames a.size7,
.home-surnames a.size7:visited {
    color: var(--t500-color-surname-size-7);
}

.home-surnames a.size8,
.home-surnames a.size8:visited {
    color: var(--t500-color-surname-size-8);
}

.home-surnames a.size9,
.home-surnames a.size9:visited {
    color: var(--t500-color-surname-size-9);
}

.home-surnames a.size0,
.home-surnames a.size0:visited {
    color: var(--t500-color-surname-size-0);
}

/* ==========================================================================
   8. Site footer
   ========================================================================== */

.site-footer {
    color: var(--t500-color-on-brand);
    background: var(--t500-color-brand);
}

.site-footer__content {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--t500-space-5);
    padding-block: var(--t500-space-6);
}

.site-footer__content--up-to-three-groups {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.site-footer__group {
    min-width: 0;
}

.site-footer__group h2 {
    margin-bottom: var(--t500-space-3);
    color: var(--t500-color-on-brand);
    font-family: var(--t500-font-body);
    font-size: var(--t500-text-base);
    font-weight: 700;
}

.site-footer__text {
    color: var(--t500-color-on-brand-muted);
    font-size: var(--t500-text-small);
    line-height: 1.75;
}

.site-footer__text > :first-child {
    margin-top: 0;
}

.site-footer__text > :last-child {
    margin-bottom: 0;
}

.site-footer__links {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--t500-text-small);
    line-height: 1.75;
}

.site-footer__text + .site-footer__links {
    margin-top: var(--t500-space-3);
}

.site-footer a,
.site-footer a:hover {
    color: var(--t500-color-on-brand);
}

.site-footer__tng {
    padding-block: var(--t500-space-3);
    border-top: 1px solid var(--t500-color-on-brand-border);
    color: var(--t500-color-on-brand-muted);
    font-size: var(--t500-text-small);
    text-align: center;
}

/* ==========================================================================
   9. TNG compatibility adjustments
   ========================================================================== */

/*
 * Keep TNG-specific overrides in this section. Do not mix corrections for
 * genstyle.css or generated navigation markup into homepage components.
 */

/* TNG loads the active template stylesheet in both public and admin pages.
   These shared legacy classes are intentionally not body-scoped. */
.tng-template-500 #nameheader {
    font-size: 1.75rem;
}

.header,
.plainheader,
.subhead {
    color: var(--t500-color-brand);
}

.fieldnameback,
.bar,
.page,
.LB_closeAjaxWindow,
.tablesaw-cell-label,
.admincell,
.sideback {
    color: var(--t500-color-on-brand);
    background-color: var(--t500-color-brand);
    background-image: none;
}

.fieldnameback a,
.bar a,
.page a,
.LB_closeAjaxWindow a,
.tablesaw-cell-label a,
.admincell a,
.sideback a {
    color: var(--t500-color-on-brand);
}

.fieldnameback a:hover,
.bar a:hover,
.page a:hover,
.LB_closeAjaxWindow a:hover,
.tablesaw-cell-label a:hover,
.admincell a:hover,
.sideback a:hover,
.tng-template-500 .lightlink:hover,
.tng-template-500 .lightlink2:hover {
    color: var(--t500-color-on-brand);
}

a.admincell:hover,
a.leftlink:hover {
    color: var(--t500-color-on-brand);
    background-color: var(--t500-color-brand);
}

.snlink {
    color: var(--t500-color-brand-deep);
    background-color: var(--t500-color-surface-muted);
    border-right: 1px solid var(--t500-color-border-strong);
    border-bottom: 1px solid var(--t500-color-border-strong);
}

/* Large result sets add a compact page-jump form inside an .snlink span.
   TNG's inherited 36px line height otherwise makes its Go button oversized. */
.tng-template-500 span.snlink:has(> input.tngpage) {
    display: inline-flex;
    gap: var(--t500-space-1);
    align-items: center;
    padding: 0.3rem;
    line-height: 1;
    vertical-align: middle;
}

.tng-template-500 span.snlink > input.tngpage.minifield,
.tng-template-500 span.snlink > input.minibutton {
    height: 2rem !important;
    line-height: 1.2;
    vertical-align: middle;
}

.tng-template-500 span.snlink > input.tngpage.minifield {
    position: static;
    width: 4.25rem;
    padding-inline: 0.4rem;
}

.tng-template-500 span.snlink > input.minibutton {
    padding: 0.25rem 0.6rem;
}

a.snlink:hover,
.snlinkact,
.adminnav .snlinkact {
    color: var(--t500-color-on-brand);
    background-color: var(--t500-color-brand);
}

.databack,
.reportcol li:hover {
    background-color: var(--t500-color-surface-muted);
}

.databack a,
.pedbox a,
.LB_window a {
    color: var(--t500-color-brand-deep);
}

.databackalt {
    background-color: var(--t500-color-surface);
}

/* Pedigree and descendant charts receive inline colors from TNG's global
   chart configuration, so the template override must win explicitly. */
.pedbox {
    background-color: var(--t500-color-surface-muted) !important;
}

.pedboxtable {
    background-color: transparent;
}

/* Family Chart colors are emitted inline from TNG's legacy purple defaults.
   Keep the surrounding relatives quiet and outline the selected family. */
.tng-template-500.familychart .fambox {
    background-color: var(--t500-color-surface-muted) !important;
    border: 1px solid #777777;
    box-shadow: 2px 2px 3px rgb(0 0 0 / 25%) !important;
}

.tng-template-500.familychart .mfambox {
    background-color: var(--t500-color-surface-soft) !important;
    border: 4px solid var(--t500-color-brand-deep);
    box-shadow: 0 4px 10px rgb(73 97 137 / 45%) !important;
}

.tng-template-500.familychart .fambackground {
    background-color: transparent !important;
}

.tng-template-500.familychart .popup {
    background-color: var(--t500-color-surface-soft);
    border-color: var(--t500-color-border-strong);
}

/* TNG gives Suggest textareas an inline 95% width, making them narrower than
   the adjacent text fields until the data column becomes unusually wide. */
.tng-template-500.suggest table.tfixed.label textarea {
    width: 100% !important;
    max-width: 100%;
}

/* The legacy text pedigree is one table column per generation. Automatic
   sizing lets long place names consume early columns and collapse later ones. */
.tng-template-500.pedigreetext #main-content {
    overflow-x: auto;
}

.tng-template-500.pedigreetext #main-content > table {
    min-width: 64rem;
    table-layout: fixed;
}

/* LITBox predates border-box sizing and calculates its inner panel from a
   content-box outer height. Restore that expectation for modal windows. */
.LB_window {
    box-sizing: content-box;
    color: var(--t500-color-ink);
    background: var(--t500-color-surface-muted);
    border-color: var(--t500-color-brand);
}

.LB_content {
    overflow: auto;
}

/* ==========================================================================
   10. Responsive adjustments
   ========================================================================== */

@media (max-width: 48rem) {
    .site-header__inner {
        padding-block: var(--t500-space-3);
    }

    .site-navigation .innercontainer,
    .site-navigation .innercontainer > div:first-child {
        flex-wrap: wrap;
    }

    .home-page,
    .site-content {
        padding-block: var(--t500-space-4) var(--t500-space-6);
    }

    .home-page > * + * {
        margin-top: var(--t500-space-5);
    }

    .home-contact {
        align-items: flex-start;
        flex-direction: column;
    }

    .home-intro {
        grid-template-columns: 1fr;
        gap: var(--t500-space-5);
        padding-block-start: 0;
    }

    .home-intro__content {
        padding-inline-start: 0;
    }

    .home-intro__media {
        justify-self: center;
        width: min(100%, 25rem);
    }

    .home-editorial-grid,
    .home-calendar,
    .home-featured-person,
    .home-featured-story {
        grid-template-columns: 1fr;
    }

    .home-featured-story__media {
        aspect-ratio: 3 / 2;
        min-height: 0;
        max-height: 24rem;
        order: -1;
    }

    .home-featured-person__media {
        aspect-ratio: 4 / 3;
        min-height: 0;
    }

    .home-featured-person__content {
        grid-template-columns: 1fr;
    }

    .home-updates--wide .home-updates__timelines {
        grid-template-columns: 1fr;
    }

    .home-updates--wide .home-updates__timeline:nth-child(n + 2) {
        display: none;
    }

    .home-search-links--with-links {
        grid-template-columns: 1fr;
    }

    .home-links {
        border-top: 1px solid var(--t500-color-border);
        border-left: 0;
    }

    .home-calendar__upcoming ul {
        grid-template-columns: 1fr;
    }

    .home-ancestors__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: var(--t500-space-4);
    }

    .home-ancestors__grid--count-1 {
        grid-template-columns: minmax(0, 18rem);
    }

    .home-ancestors__item:nth-child(odd) {
        border-left: 0;
    }

    .home-photographs__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .site-footer__content {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Keep Suggest forms roomy through the tablet transition. The legacy
       80/20 table becomes cramped well before the phone breakpoint. */
    .tng-template-500.suggest table.tfixed.label {
        width: 100% !important;
    }

    .tng-template-500.suggest table.tfixed.label td:first-child {
        width: 7rem !important;
    }

    .tng-template-500.suggest table.tfixed.label td:last-child {
        width: auto !important;
    }
}

@media (max-width: 32rem) {
    /* TNG detail tables otherwise preserve 150px label and date columns,
       leaving too little room for locations and other descriptive values. */
    .tng-template-500 table.tfixed > colgroup > col.labelcol {
        width: 5rem;
    }

    .tng-template-500 table.tfixed > colgroup > col[style*="width:150px"],
    .tng-template-500 table.tfixed > colgroup > col[style*="width:110px"] {
        width: 6rem !important;
    }

    .tng-template-500 table.tfixed .databack {
        overflow-wrap: anywhere;
    }

    /* Surname and first-name summaries are emitted as fixed, side-by-side
       histogram tables followed by 360px charts. Preserve two list columns
       on phones, but let both the list and charts fit their cards. */
    .tng-template-500:is(.surnames, .firstnames) .titlebox > div {
        display: block !important;
        width: 100%;
        margin-right: 0 !important;
    }

    .tng-template-500:is(.surnames, .firstnames) .table-top30 {
        display: block;
        width: 100%;
    }

    .tng-template-500:is(.surnames, .firstnames) .table-top30 > tbody,
    .tng-template-500:is(.surnames, .firstnames) .table-top30 > tbody > tr {
        display: block;
        width: 100%;
    }

    .tng-template-500:is(.surnames, .firstnames) .table-top30 > tbody > tr > td[colspan] {
        display: block;
        width: 100%;
    }

    .tng-template-500:is(.surnames, .firstnames) .table-top30 > tbody > tr:nth-child(2) {
        display: block;
    }

    .tng-template-500:is(.surnames, .firstnames) .table-top30 > tbody > tr:nth-child(2) > td.aligntop {
        display: block;
        width: 100%;
    }

    .tng-template-500:is(.surnames, .firstnames) .table-top30 > tbody > tr:nth-child(2) > td.aligntop:last-child {
        display: none;
    }

    .tng-template-500:is(.surnames, .firstnames) .table-top30 > tbody > tr:nth-child(2) > td.table-gutter,
    .tng-template-500:is(.surnames, .firstnames) .table-histogram .bar-holder {
        display: none;
    }

    .tng-template-500:is(.surnames, .firstnames) .table-histogram {
        width: 100%;
        margin-left: 0;
        border-spacing: 2px 4px;
    }

    .tng-template-500:is(.surnames, .firstnames) .table-histogram td.nw {
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .tng-template-500:is(.surnames, .firstnames) #charts {
        display: block !important;
        width: 100% !important;
        max-width: 100%;
        margin-inline: auto;
    }

    .tng-template-500:is(.surnames, .firstnames) :is(#whole_chart, #focus_chart),
    .tng-template-500:is(.surnames, .firstnames) #charts svg {
        width: 100% !important;
        max-width: 100%;
    }

    .tng-template-500.statistics #charts {
        display: block !important;
        width: 100% !important;
        max-width: 100%;
        margin-inline: auto;
    }

    .tng-template-500.statistics #charts > div,
    .tng-template-500.statistics #charts svg {
        width: 100% !important;
        max-width: 100%;
    }

    /* What's New tables carry desktop-oriented metadata that cannot fit in
       their cards on phones. Retain the useful identifying information and
       remove IDs, relationship metadata, and modification dates. */
    .tng-template-500.whatsnew table.thfixed {
        width: 100% !important;
        table-layout: fixed;
    }

    /* Photos and histories: thumbnail + description. */
    .tng-template-500.whatsnew table:has(th.thumbnails) :is(th, td):nth-child(3),
    .tng-template-500.whatsnew table:has(th.thumbnails) :is(th, td):nth-child(4) {
        display: none;
    }

    .tng-template-500.whatsnew table:has(th.thumbnails) :is(th, td):first-child {
        width: 5rem;
    }

    /* Individuals: name + birth/christening information. */
    .tng-template-500.whatsnew table:has(th.idcol) :is(th, td):nth-child(1),
    .tng-template-500.whatsnew table:has(th.idcol) :is(th, td):nth-child(4),
    .tng-template-500.whatsnew table:has(th.idcol) :is(th, td):nth-child(5) {
        display: none;
    }

    /* Families: parents' names + marriage date. */
    .tng-template-500.whatsnew table:has(th.nbrcol) :is(th, td):nth-child(1),
    .tng-template-500.whatsnew table:has(th.nbrcol) :is(th, td):nth-child(2),
    .tng-template-500.whatsnew table:has(th.nbrcol) :is(th, td):nth-child(4),
    .tng-template-500.whatsnew table:has(th.nbrcol) :is(th, td):nth-child(7) {
        display: none;
    }

    .tng-template-500.whatsnew table.thfixed :is(th, td) {
        min-width: 0;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    /* Dates results contain a 500px hover-preview panel that is visually
       hidden but still enlarges the phone viewport. Keep the useful name,
       date, and location columns; omit navigation metadata. */
    .tng-template-500.anniversaries .person-prev {
        display: none !important;
    }

    .tng-template-500.anniversaries .titlebox table.thfixed {
        width: 100% !important;
        table-layout: fixed;
    }

    .tng-template-500.anniversaries .titlebox table.thfixed thead th:first-child,
    .tng-template-500.anniversaries .titlebox table.thfixed thead th:nth-child(4),
    .tng-template-500.anniversaries .titlebox table.thfixed thead th:nth-child(5),
    .tng-template-500.anniversaries .titlebox table.thfixed tbody td:first-child,
    .tng-template-500.anniversaries .titlebox table.thfixed tbody td:nth-child(5),
    .tng-template-500.anniversaries .titlebox table.thfixed tbody td:nth-child(6) {
        display: none;
    }

    .tng-template-500.anniversaries .titlebox table.thfixed :is(th, td) {
        min-width: 0;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    /* Media collection controls are emitted as inline content, which lets
       padded links and buttons split across lines. Give each control a
       deliberate mobile row and retain only the useful media columns. */
    .tng-template-500.browsemedia #main-content > p:first-of-type {
        display: flex;
        flex-wrap: wrap;
        gap: var(--t500-space-3);
        align-items: center;
    }

    .tng-template-500.browsemedia #main-content > p:first-of-type > a.snlink {
        display: inline-flex;
        line-height: 1.2;
        white-space: nowrap;
    }

    .tng-template-500.browsemedia #main-content > form[name^="MediaSearch"] {
        display: flex;
        flex-wrap: wrap;
        gap: var(--t500-space-2);
    }

    .tng-template-500.browsemedia #main-content > form[name^="MediaSearch"] input.longfield {
        flex: 1 0 100%;
        width: 100%;
        max-width: 100%;
    }

    .tng-template-500.browsemedia table.thfixed {
        width: 100% !important;
        table-layout: fixed;
    }

    .tng-template-500.browsemedia table.thfixed :is(th, td):nth-child(1),
    .tng-template-500.browsemedia table.thfixed :is(th, td):nth-child(4),
    .tng-template-500.browsemedia table.thfixed :is(th, td):nth-child(5) {
        display: none;
    }

    .tng-template-500.browsemedia table.thfixed :is(th, td):nth-child(2) {
        width: 5rem;
    }

    .tng-template-500.browsemedia table.thfixed :is(th, td) {
        min-width: 0 !important;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    /* Person search results contain six desktop columns. On phones, retain
       the identifying name, life-event date, and location while removing
       row numbers, internal IDs, and tree metadata. */
    .tng-template-500.search table.thfixed {
        width: 100% !important;
        table-layout: fixed;
    }

    .tng-template-500.search table.thfixed :is(th, td):nth-child(1),
    .tng-template-500.search table.thfixed :is(th, td):nth-child(3),
    .tng-template-500.search table.thfixed :is(th, td):nth-child(6) {
        display: none;
    }

    .tng-template-500.search table.thfixed :is(th, td):nth-child(2) {
        width: 42%;
    }

    .tng-template-500.search table.thfixed :is(th, td):nth-child(4) {
        width: 25%;
    }

    .tng-template-500.search table.thfixed :is(th, td):nth-child(5) {
        width: 33%;
    }

    .tng-template-500.search table.thfixed :is(th, td) {
        min-width: 0 !important;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .tng-template-500.search .person-prev {
        display: none !important;
    }

    /* Family IDs are the links to family pages, so retain them alongside
       both parents and the marriage date. The row number and long location
       column are the least useful fields in the constrained phone view. */
    .tng-template-500.famsearch table.whiteback {
        width: 100% !important;
        table-layout: fixed;
    }

    .tng-template-500.famsearch table.whiteback :is(th, td):nth-child(1),
    .tng-template-500.famsearch table.whiteback :is(th, td):nth-child(6) {
        display: none;
    }

    .tng-template-500.famsearch table.whiteback :is(th, td):nth-child(2) {
        width: 15%;
    }

    .tng-template-500.famsearch table.whiteback :is(th, td):nth-child(3),
    .tng-template-500.famsearch table.whiteback :is(th, td):nth-child(4) {
        width: 32%;
    }

    .tng-template-500.famsearch table.whiteback :is(th, td):nth-child(5) {
        width: 21%;
    }

    .tng-template-500.famsearch table.whiteback :is(th, td) {
        min-width: 0 !important;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    /* TNG wraps this table in an inline container with a 50px right margin.
       Recover that space on phones and retain the three primary links. */
    .tng-template-500.browsetrees #main-content > div:has(> table.thfixed) {
        display: block !important;
        width: 100%;
        margin-right: 0 !important;
    }

    .tng-template-500.browsetrees table.thfixed {
        width: 100% !important;
        table-layout: fixed;
    }

    .tng-template-500.browsetrees table.thfixed :is(th, td):nth-child(1),
    .tng-template-500.browsetrees table.thfixed :is(th, td):nth-child(3),
    .tng-template-500.browsetrees table.thfixed :is(th, td):nth-child(6) {
        display: none;
    }

    .tng-template-500.browsetrees table.thfixed :is(th, td):nth-child(2) {
        width: 40%;
    }

    .tng-template-500.browsetrees table.thfixed :is(th, td):nth-child(4),
    .tng-template-500.browsetrees table.thfixed :is(th, td):nth-child(5) {
        width: 30%;
    }

    .tng-template-500.browsetrees table.thfixed :is(th, td) {
        min-width: 0 !important;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    /* Branch descriptions identify each branch; the two totals link to its
       people and families. Hide the row number and privacy-limited starting
       individual on phones. */
    .tng-template-500.browsebranches table.thfixed {
        width: 100% !important;
        table-layout: fixed;
    }

    .tng-template-500.browsebranches table.thfixed :is(th, td):nth-child(1),
    .tng-template-500.browsebranches table.thfixed :is(th, td):nth-child(3) {
        display: none;
    }

    .tng-template-500.browsebranches table.thfixed :is(th, td):nth-child(2) {
        width: 40%;
    }

    .tng-template-500.browsebranches table.thfixed :is(th, td):nth-child(4),
    .tng-template-500.browsebranches table.thfixed :is(th, td):nth-child(5) {
        width: 30%;
    }

    .tng-template-500.browsebranches table.thfixed :is(th, td) {
        min-width: 0 !important;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    /* TNG divides the Top 30 places into three nested ten-item tables.
       Flatten those groups on phones so entries 1-15 fill the first column
       and the remaining entries fill the second. Histogram bars are omitted
       because the linked place name and occurrence count retain the data. */
    .tng-template-500.places table.table-top30 {
        display: block;
        width: 100% !important;
    }

    .tng-template-500.places table.table-top30 > tbody {
        display: block;
        width: 100%;
    }

    .tng-template-500.places table.table-top30 > tbody > tr:first-child,
    .tng-template-500.places table.table-top30 > tbody > tr:last-child,
    .tng-template-500.places table.table-top30 > tbody > tr:first-child > td,
    .tng-template-500.places table.table-top30 > tbody > tr:last-child > td {
        display: block;
        width: 100%;
    }

    .tng-template-500.places table.table-top30 > tbody > tr:nth-child(2) {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: repeat(15, auto);
        grid-auto-flow: column;
        column-gap: var(--t500-space-3);
        width: 100%;
    }

    .tng-template-500.places table.table-top30 > tbody > tr:nth-child(2) > td.aligntop,
    .tng-template-500.places table.table-top30 > tbody > tr:nth-child(2) table.table-histogram,
    .tng-template-500.places table.table-top30 > tbody > tr:nth-child(2) table.table-histogram > tbody {
        display: contents;
    }

    .tng-template-500.places table.table-top30 > tbody > tr:nth-child(2) > td.table-gutter,
    .tng-template-500.places table.table-histogram tr > td:nth-child(3) {
        display: none;
    }

    .tng-template-500.places table.table-histogram tr {
        display: grid;
        grid-template-columns: 2rem minmax(0, 1fr);
        align-items: start;
        min-width: 0;
    }

    .tng-template-500.places table.table-histogram td {
        min-width: 0;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .tng-template-500.suggest table.tfixed.label input.longfield {
        width: 100% !important;
        max-width: 100%;
    }

    .home-links__list--two-columns,
    .home-search__form {
        grid-template-columns: 1fr;
    }

    .home-links__list--two-columns {
        grid-auto-flow: row;
        grid-template-rows: none;
    }

    .home-search__form button,
    .home-search__advanced {
        justify-self: stretch;
    }

    .home-search__form button {
        width: 100%;
    }

    .home-ancestors__grid {
        grid-template-columns: 1fr;
    }

    .home-ancestors__grid--count-1 {
        grid-template-columns: minmax(0, 18rem);
    }

    .home-ancestors__item,
    .home-ancestors__item + .home-ancestors__item {
        padding-block: var(--t500-space-3);
        border-top: 1px solid var(--t500-color-border);
        border-left: 0;
    }

    .home-ancestors__item:first-child {
        border-top: 0;
    }

    .home-photographs__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .site-footer__content {
        grid-template-columns: 1fr;
        gap: var(--t500-space-4);
    }
}

/* Core cemetery CSS uses three fixed 30% floated columns at every desktop
   width. An adaptive grid keeps each hierarchy readable and adds columns only
   when there is enough room for them. */
.tng-template-500.cemeteries #cemcontainer {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 22rem));
    gap: var(--t500-space-4);
    align-items: start;
    width: 100%;
}

.tng-template-500.cemeteries #cemcontainer > div[id^="col"] {
    float: none;
    box-sizing: border-box;
    width: auto;
    margin: 0;
    padding-left: 0;
    border-left: 0;
}

.tng-template-500.cemeteries :is(.cemblock, .pad3) {
    box-sizing: border-box;
    max-width: 100%;
    overflow-wrap: anywhere;
}

/* Core TNG forces every text-descendant entry onto one unbroken line. Allow
   names, reference numbers, and vital dates to wrap within the page. */
.tng-template-500.descendtext #descendantchart,
.tng-template-500.descendtext #descendantchart :is(ul, li) {
    min-width: 0;
    max-width: 100%;
}

.tng-template-500.descendtext #descendantchart li {
    white-space: normal;
    overflow-wrap: anywhere;
}

@media (max-width: 48rem) {
    .tng-template-500.descendtext #descendantchart ul:not(.first) {
        padding-left: 0.75rem;
    }

    /* Keep the four-column generation selector inside the phone viewport.
       Relationship labels may wrap; the other fields need only compact cells. */
    .tng-template-500.descendtables table.thfixed:has(> tbody > tr:first-child > th:nth-child(4):last-child) {
        float: none !important;
        box-sizing: border-box;
        width: 100% !important;
        table-layout: fixed;
    }

    .tng-template-500.descendtables table.thfixed:has(> tbody > tr:first-child > th:nth-child(4):last-child) > tbody > tr > :nth-child(1) {
        width: 15%;
    }

    .tng-template-500.descendtables table.thfixed:has(> tbody > tr:first-child > th:nth-child(4):last-child) > tbody > tr > :nth-child(2) {
        width: 50%;
    }

    .tng-template-500.descendtables table.thfixed:has(> tbody > tr:first-child > th:nth-child(4):last-child) > tbody > tr > :nth-child(3) {
        width: 15%;
    }

    .tng-template-500.descendtables table.thfixed:has(> tbody > tr:first-child > th:nth-child(4):last-child) > tbody > tr > :nth-child(4) {
        width: 20%;
    }

    .tng-template-500.descendtables table.thfixed:has(> tbody > tr:first-child > th:nth-child(4):last-child) > tbody > tr > :is(th, td) {
        min-width: 0 !important;
        white-space: normal !important;
        overflow-wrap: anywhere;
    }

    /* The seven-column person table needs a different reduction. Retain each
       person's name and vital dates. */
    .tng-template-500.descendtables table.thfixed:has(> tbody > tr:first-child > th:nth-child(7)) {
        float: none !important;
        width: 100% !important;
        table-layout: fixed;
    }

    .tng-template-500.descendtables table.thfixed:has(> tbody > tr:first-child > th:nth-child(7)) > tbody > tr > :nth-child(1),
    .tng-template-500.descendtables table.thfixed:has(> tbody > tr:first-child > th:nth-child(7)) > tbody > tr > :nth-child(2),
    .tng-template-500.descendtables table.thfixed:has(> tbody > tr:first-child > th:nth-child(7)) > tbody > tr > :nth-child(6),
    .tng-template-500.descendtables table.thfixed:has(> tbody > tr:first-child > th:nth-child(7)) > tbody > tr > :nth-child(7) {
        display: none;
    }

    .tng-template-500.descendtables table.thfixed:has(> tbody > tr:first-child > th:nth-child(7)) > tbody > tr > :nth-child(3) {
        width: 45%;
    }

    .tng-template-500.descendtables table.thfixed:has(> tbody > tr:first-child > th:nth-child(7)) > tbody > tr > :nth-child(4) {
        width: 30%;
    }

    .tng-template-500.descendtables table.thfixed:has(> tbody > tr:first-child > th:nth-child(7)) > tbody > tr > :nth-child(5) {
        width: 25%;
    }

    .tng-template-500.descendtables table.thfixed:has(> tbody > tr:first-child > th:nth-child(7)) > tbody > tr > :is(th, td) {
        min-width: 0 !important;
        white-space: normal !important;
        overflow-wrap: anywhere;
    }

    .tng-template-500.descendtables table.thfixed:has(> tbody > tr:first-child > th:nth-child(7)) > tbody > tr > td:nth-child(3) > table,
    .tng-template-500.descendtables table.thfixed:has(> tbody > tr:first-child > th:nth-child(7)) > tbody > tr > td:nth-child(3) > table > tbody {
        display: block;
        width: 100%;
    }

    .tng-template-500.descendtables table.thfixed:has(> tbody > tr:first-child > th:nth-child(7)) > tbody > tr > td:nth-child(3) > table > tbody > tr {
        display: flex;
        flex-wrap: wrap;
        gap: 0 var(--t500-space-1);
    }

    .tng-template-500.descendtables table.thfixed:has(> tbody > tr:first-child > th:nth-child(7)) > tbody > tr > td:nth-child(3) > table td {
        display: block;
        width: auto !important;
        min-width: 0;
        padding: 0 !important;
        white-space: normal !important;
        overflow-wrap: anywhere;
    }
}

/* ========================================================================== 
   11. Mod compatibility
   ========================================================================== */

/* BEGIN: MOD COMPATIBILITY — Relate Mod
   The mod adds its own minimal rules to genstyle.css. Keep the visual treatment
   here so it is delivered with Template 500 and remains independent of that
   patched core file. */
.tng-template-500 .rellink {
    position: relative;
    display: inline-block;
    margin-inline-start: var(--t500-space-2);
    list-style: none;
}

.tng-template-500 li.fieldnameback.rellink {
    padding: 0;
    background: transparent !important;
    border: 0 !important;
}

.tng-template-500 .rellink > a {
    position: relative;
    z-index: 1002;
    display: inline-flex;
    box-sizing: border-box;
    align-items: center;
    gap: 0.45rem;
    min-height: 2.25rem;
    padding: 0.7rem 0.9rem;
    color: var(--t500-color-on-brand) !important;
    background: var(--t500-color-brand) !important;
    border: 0;
    border-radius: 0;
    font: inherit;
    font-size: var(--t500-text-small);
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
}

.tng-template-500 .rellink > a::after {
    width: 0;
    height: 0;
    border: 0.25rem solid transparent;
    border-top-color: currentColor;
    transform: translateY(0.2rem);
    content: "";
}

.tng-template-500 .rellink > a:hover,
.tng-template-500 .rellink > a:focus,
.tng-template-500 .rellink:focus-within > a {
    color: var(--t500-color-nav-accent) !important;
    background: var(--t500-color-nav-hover) !important;
}

.tng-template-500 .rellink > .relmenu {
    position: absolute;
    z-index: 1001;
    top: 100%;
    right: 0;
    left: auto;
    display: none;
    width: max-content;
    min-width: 12.5rem;
    max-width: min(20rem, calc(100vw - 2rem));
    margin: 0;
    padding: var(--t500-space-1) 0;
    opacity: 1;
    background: var(--t500-color-surface) !important;
    border: 1px solid var(--t500-color-border);
    border-radius: 0 !important;
    box-shadow: var(--t500-shadow-soft);
    list-style: none;
}

.tng-template-500 .rellink > .relmenu,
.tng-template-500 .rellink > .relmenu > li,
.tng-template-500 .rellink > .relmenu > li > .menu-label,
.tng-template-500 .rellink > .relmenu > li > .menu-label > a {
    border-radius: 0 !important;
}

.tng-template-500 .rellink:hover > .relmenu,
.tng-template-500 .rellink:focus-within > .relmenu {
    display: block;
    overflow: visible;
}

.tng-template-500 .rellink > .relmenu > li {
    display: block;
    float: none !important;
    clear: both;
    width: 100% !important;
    margin: 0;
    padding: 0;
    background: transparent !important;
    border-bottom: 1px solid var(--t500-color-border);
}

.tng-template-500 .rellink > .relmenu > li:last-child {
    border-bottom: 0;
}

.tng-template-500 .rellink > .relmenu > li > .menu-label {
    display: block;
    width: 100%;
    box-sizing: border-box;
    background: transparent !important;
}

.tng-template-500 .rellink > .relmenu > li > .menu-label > a {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 0.55rem var(--t500-space-3);
    color: var(--t500-color-brand-deep) !important;
    background: transparent !important;
    font-size: var(--t500-text-small);
    line-height: 1.4;
    text-decoration: none;
    white-space: nowrap;
}

.tng-template-500 .rellink > .relmenu > li:hover > .menu-label,
.tng-template-500 .rellink > .relmenu > li:focus-within > .menu-label {
    background: var(--t500-color-nav-hover) !important;
}

.tng-template-500 .rellink > .relmenu > li > .menu-label > a:hover,
.tng-template-500 .rellink > .relmenu > li > .menu-label > a:focus,
.tng-template-500 .rellink > .relmenu > li:hover > .menu-label > a,
.tng-template-500 .rellink > .relmenu > li:focus-within > .menu-label > a {
    color: var(--t500-color-nav-accent) !important;
    background: transparent !important;
}

@media (max-width: 40rem) {
    .tng-template-500 .rellink {
        display: block;
        margin: var(--t500-space-2) 0 0;
    }

    .tng-template-500 .rellink > .relmenu {
        position: static;
        width: 100%;
        max-width: none;
        margin-top: var(--t500-space-1);
    }
}
/* END: MOD COMPATIBILITY — Relate Mod */

/* ========================================================================== 
   12. Print adjustments
   ========================================================================== */

@media print {
    .skip-link,
    .site-navigation {
        display: none;
    }

    .tng-template-500 {
        color: var(--t500-color-print-ink);
        background: var(--t500-color-paper);
    }
}