/* ===========================================
   THE FAMILY ATTIC - GENEALOGY
=========================================== */

/* =========================================
   FAMILY ATTIC BANNER
========================================= */

.attic-banner {

    margin-bottom: 30px;

    background:
        linear-gradient(
            to bottom,
            #f7f0df,
            #efe4cc
        );

    border-bottom: 4px solid #9a7b4f;

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

.attic-banner-inner {

    max-width: 1200px;

    margin: 0 auto;

    padding: 24px 20px;

    text-align: center;
}

/* Main title */

.attic-sign {

    font-family: Georgia, serif;

    font-size: 2.6rem;

    font-weight: bold;

    color: #4f3f2d;

    letter-spacing: 1px;
}

/* Decorative divider */

.attic-divider {

    margin: 8px 0;

    font-size: 1.3rem;

    color: #9a7b4f;
}

/* Subtitle */

.attic-subtitle {

    font-size: 1rem;

    font-style: italic;

    color: #6b5a44;

    margin-bottom: 16px;
}

/* Navigation */

.attic-nav {

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: 10px;

    font-size: .9rem;
}

.attic-nav a {

    color: #4f3f2d;

    text-decoration: none;

    padding: 4px 8px;

    border-radius: 4px;

    transition: all .2s ease;
}

.attic-nav a:hover {

    background: rgba(154,123,79,.15);

    color: #7a5c30;
}

.attic-nav span {

    color: #9a7b4f;
}

/* =========================================
   FAMILY ATTIC
========================================= */

.page-genealogy .genealogy {

    display: flex;

    flex-direction: column;

    gap: 25px;
}

body.bg-genealogy {
    background: #e8e1cf !important;
    background-image: none !important;
}

/* =========================================
   CONTENT SECTIONS
========================================= */

.page-genealogy .genealogy-section {

    max-width: 900px;

    margin: 0 auto 35px auto;

    padding: 25px 30px;

    background: #fffdf8;

    border: 1px solid #d7c6a3;

    border-radius: 12px;

    box-shadow:
        0 2px 8px rgba(0,0,0,.06);
}

.page-genealogy .genealogy-section:first-of-type {

    background: #fffaf0;
}

.page-genealogy .genealogy-section h2 {

    margin-top: 0;

    margin-bottom: 15px;

    color: #5b4630;
}

.page-genealogy .genealogy-section p {

    margin-bottom: 18px;

    line-height: 1.8;
}

/* =========================================
   FAMILY ATTIC LINKS
========================================= */

.page-genealogy a {

    color: #7a5a32;

    text-decoration: none;

    font-weight: 600;

    border-bottom: 1px dotted #b69465;

    transition: all .2s ease;
}

.page-genealogy a:hover {

    color: #a06f2e;

    border-bottom-color: #a06f2e;
}

/* =========================================
   FAMILY ATTIC STATISTICS
========================================= */

.genealogy-stats {

    margin: 0 0 40px 0;
}

.stats-title {
    text-align: center;
    margin-bottom: 15px;
    color: #5c4730;
    font-size: 1.4rem;
    font-weight: 600;
}

/* Main scrapbook page */

.stats-card {

    max-width: 700px;

    margin: 0 auto;

    background: #fffaf0;

    border: 1px solid #d7c6a3;

    border-radius: 12px;

    padding: 30px;

    box-shadow:
        0 3px 10px rgba(0,0,0,.08);

    position: relative;
}

/* subtle paper effect */

.stats-card::before {

    content: "";

    position: absolute;

    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;

    border: 1px dashed rgba(160,130,90,.20);

    border-radius: 8px;

    pointer-events: none;
}

/* rows */

.stats-row {

    display: flex;

    justify-content: space-around;

    gap: 20px;

    margin-bottom: 25px;
}

.stats-row-last {

    margin-bottom: 0;
}

/* individual stat */

.stat-item {

    flex: 1;

    text-align: center;
}

/* number */

.stat-value {

    display: block;

    font-size: 1.2rem;

    font-weight: 600;

    color: #7a5a32;

    margin-bottom: 6px;
}

/* description */

.stat-label {

    display: block;

    font-size: .85rem;

    letter-spacing: .5px;

    text-transform: none;

    color: #6a645c;
}

/* responsive */

@media (max-width: 900px) {

    .stats-row {

        flex-direction: column;

        gap: 18px;
    }

    .stat-value {

        font-size: 1.6rem;
    }
}

/* =========================================
   FAMILY NAMES A-Z INDEX
========================================= */

.archive-az {

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: 12px;

    max-width: 700px;

    margin: 40px auto 60px;
}

.archive-az a:nth-child(odd) {

    margin-top: -8px;
}

.archive-az a:nth-child(3n) {

    margin-top: 10px;
}

.archive-az a:nth-child(5n) {

    margin-top: -4px;
}

.archive-az a:nth-child(4n) {
    transform: rotate(-6deg);
}

.archive-az a:nth-child(4n+1) {
    transform: rotate(4deg);
}

.archive-az a:nth-child(4n+2) {
    transform: rotate(-3deg);
}

.archive-az a:nth-child(4n+3) {
    transform: rotate(5deg);
}

.archive-az a {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 60px;

    height: 42px;

    background: #f8f1de;

    border: 1px solid #c8b48a;

    border-radius: 2px;

    color: #5b4630;

    text-decoration: none;

    font-weight: 600;

    box-shadow:
        1px 1px 4px rgba(0,0,0,.12);

    transition: all .2s ease;
}

.archive-az a:hover {

    transform: rotate(0deg) scale(1.15);

    z-index: 20;
}



/* =========================================
   INDIVIDUAL SEARCH FORM
========================================= */

.genealogy-search h3 {

    margin-top: 0;

    color: #5b4630;
}

.genealogy-search {

    max-width: 600px;

    margin: 30px auto;

    padding: 25px;

    background: #fffaf0;

    border: 1px solid #d7c6a3;

    border-radius: 12px;

    text-align: center;

    box-shadow:
        0 2px 8px rgba(0,0,0,.06);
}

.genealogy-search input[type="text"] {

    width: 100%;

    max-width: 250px;

    height: 48px;

    padding: 0 15px;

    border: 1px solid #c9b38a;

    border-radius: 8px;

    background: #fffdf8;

    font-size: 1rem;

    box-sizing: border-box;
}

.genealogy-search button,
.genealogy-search input[type="submit"] {

    margin-top: 12px;

    padding: 10px 20px;

    border: none;

    border-radius: 8px;

    background: #8b6b44;

    color: white;

    cursor: pointer;

    transition: background .2s ease;
}

.genealogy-search button:hover,
.genealogy-search input[type="submit"]:hover {

    background: #a07a4e;
}

/* =========================================
   SPECIAL FAMILIES
========================================= */

.family-index {

    list-style: none;

    padding: 0;

    margin: 25px auto;

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: 18px;
}

.family-index li {

    margin: 0;
}

.family-index a {

    display: block;

    padding: 10px 18px;

    background: #fff8e8;

    border: 1px solid #d7c6a3;

    border-radius: 2px;

    text-decoration: none;

    color: #5b4630;

    font-weight: 600;

    box-shadow:
        1px 1px 5px rgba(0,0,0,.10);

    transition:
        transform .2s ease;
}

.family-index li:nth-child(4n) a {

    transform: rotate(-3deg);
}

.family-index li:nth-child(4n+1) a {

    transform: rotate(2deg);
}

.family-index li:nth-child(4n+2) a {

    transform: rotate(-1deg);
}

.family-index li:nth-child(4n+3) a {

    transform: rotate(4deg);
}

.family-index li:nth-child(3n) {

    margin-top: 10px;
}

.family-index li:nth-child(5n) {

    margin-top: -8px;
}

.family-index a:hover {

    transform: rotate(0deg) scale(1.08);

    z-index: 10;

    position: relative;
}

/* =========================================
   ATTIC NOTES
========================================= */

.attic-note {

    max-width: 700px;

    margin: 50px auto 20px auto;

    padding: 25px;

    background: #fffaf0;

    border: 1px solid #d7c6a3;

    border-radius: 12px;

    box-shadow:
        0 2px 8px rgba(0,0,0,.06);
}

.attic-note-title {

    margin-top: 0;

    margin-bottom: 20px;

    text-align: center;

    color: #5b4630;
}

.genealogy-record {

    border-top: none;

    padding-top: 0;
}

.record-line {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 10px 0;

    border-bottom: 1px dashed #d7c6a3;
}

.record-line:last-child {

    border-bottom: none;
}

.record-line .label {
    width: 220px;
    flex-shrink: 0;
    font-size: .85rem;
    font-weight: 600;
    color: #7a5a32;
    text-transform: none;
    letter-spacing: normal;
}

.record-line .value {

    color: #5b4630;

    text-align: right;
}

/* =========================================
   SURNAME INDEX PAGE
========================================= */

.surname-letter {

    display: inline-block;

    padding: 8px 20px;

    margin-bottom: 20px;

    background: #8b6b44;

    color: white;

    border-radius: 4px;

    font-size: 1.4rem;

    font-weight: 600;

    box-shadow:
        1px 2px 5px rgba(0,0,0,.15);
}

.surname-group {

    max-width: 1200px;

    margin: 0 auto 30px;

    padding: 25px;

    background: #fffaf0;

    border: 1px solid #d7c6a3;

    border-radius: 12px;

    box-shadow:
        0 2px 8px rgba(0,0,0,.06);
}

/* =========================================
   SURNAME COLLAPSE SYSTEM
========================================= */

.surname-group.collapsed {

    display: none;
}

.surname-group.active {

    display: block;
}

.surname-list {

    list-style: none;

    padding: 0;

    margin: 0;

    columns: 4;

    column-gap: 40px;
}

.surname-list li {

    break-inside: avoid;

    margin-bottom: 6px;
}

.surname-list a {

    color: #5b4630;

    text-decoration: none;
}

.surname-list a:hover {

    color: #a07a4e;

    text-decoration: underline;
}

.archive-az .active {

    background: #5b4630;

    color: white;

    transform: rotate(0deg) scale(1.1);
}

/* =========================================
   GENEALOGY PERSON INDEX
========================================= */

.genealogy-index {

    max-width: 900px;

    margin: 30px auto;

    padding: 30px;

    background: #fffaf0;

    border: 1px solid #d7c6a3;

    border-radius: 12px;

    box-shadow:
        0 2px 8px rgba(0,0,0,.06);
}

/* =========================================
   FAMILY DOSSIERS LAYOUT
========================================= */

.archive-layout {

    max-width: 1400px;

    margin: 30px auto;

    padding: 0 20px;

    display: grid;

    grid-template-columns: 280px 1fr;

    gap: 30px;

    align-items: start;
}

/* =========================================
   DOSSIER INDEX
========================================= */

.archive-sidebar {

    position: sticky;

    top: 20px;

    background: #f8f1df;

    border: 1px solid #d9c7a3;

    border-radius: 12px;

    padding: 20px;

    box-shadow:
        0 2px 8px rgba(0,0,0,.06);
}

.archive-heading {

    font-size: 1.2rem;

    font-weight: 700;

    color: #5b4630;

    margin-bottom: 20px;

    text-align: center;

    padding-bottom: 12px;

    border-bottom: 1px solid #d7c6a3;
}

.archive-list {

    list-style: none;

    margin: 0;
    padding: 0;
}

.archive-list li {

    margin-bottom: 8px;
}

.archive-list a {

    display: block;

    padding: 10px 14px;

    text-decoration: none;

    color: #6a5336;

    border-radius: 8px;

    transition: all .2s ease;
}

.archive-list a:hover {

    background: #efe2c3;

    transform: translateX(3px);
}

.archive-list li.active a {

    background: #8b6b44;

    color: #fff;

    font-weight: 600;
}

.archive-viewer {

    min-width: 0;
}

/* =========================================
   DOSSIER HEADER
========================================= */

.family-title-block {

    text-align: center;

    margin-bottom: 30px;
}

.family-title {

    margin: 0;

    color: #5b4630;

    font-size: 2rem;

    font-weight: 700;
}

.family-header {

    display: grid;

    grid-template-columns: 240px 1fr;

    gap: 30px;

    align-items: start;

    margin-bottom: 30px;
}

.family-coat {

    width: 100%;

    max-width: 240px;

    display: block;

    margin: 0 auto;

    background: #fff;

    padding: 12px;

    border: 1px solid #d7c6a3;

    border-radius: 8px;

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

.family-section {

    background: #fffaf0;

    border: 1px solid #e0d1af;

    border-radius: 12px;

    padding: 22px;

    margin-bottom: 24px;

    box-shadow:
        0 2px 8px rgba(0,0,0,.05);
}

.family-section h3 {

    margin-top: 0;

    color: #5b4630;

    border-bottom: 1px solid #e0d1af;

    padding-bottom: 10px;

    margin-bottom: 16px;
}

.family-section:has(h3:first-child) {

}

.family-section em {

    color: #7a5a32;
}

.family-list {

    list-style: none;

    padding: 0;

    display: flex;

    flex-wrap: wrap;

    gap: 10px;
}

.family-list li {

    background: #efe2c3;

    border: 1px solid #d7c6a3;

    border-radius: 20px;

    padding: 6px 12px;

    font-size: .95rem;
}

.archive-empty {

    text-align: center;

    padding: 60px 30px;

    background: #fffaf0;

    border: 1px solid #d7c6a3;

    border-radius: 12px;

    color: #7a6a55;
}

@media (max-width: 900px) {

    .archive-layout {

        grid-template-columns: 1fr;
    }

    .archive-sidebar {

        position: static;
    }

    .family-header {

        grid-template-columns: 1fr;
    }

    .family-coat {

        margin: 0 auto;
    }
}