/**
 * HeritagePress Genealogy Frontend Styles
 */

/* Hide WordPress titles and fix spacing */
.entry-title,
.page-title,
.wp-block-post-title,
.wp-block-post-title h1,
.wp-block-post-title h2,
.wp-block-post-title h3,
.wp-block-post-title h4,
.wp-block-post-title h5,
.wp-block-post-title h6,
.wp-block-post-content h1:first-child,
.wp-block-post-content h2:first-child,
.wp-block-post-content h3:first-child,
h1.wp-block-post-title {
    display: none !important;
}

/* Fix spacing at the top of the page */
.wp-block-post-content,
.entry-content,
.wp-site-blocks .wp-block-post-content,
.wp-site-blocks main,
.wp-site-blocks .entry-content,
.wp-site-blocks .wp-block-post,
.alignfull.wp-block-post-content,
.has-global-padding,
.is-layout-constrained,
.wp-block-post-content-is-layout-constrained {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.wp-block-spacer:first-child,
.wp-block-post-content > .wp-block-spacer:first-child,
.wp-block-post-content > *:first-child:not(.hp-genealogy-container) {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Container */
.hp-genealogy-container {
    margin: 0 auto !important;
    padding: 0 !important;
    font-family: var(--lp-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif);
    font-size: var(--lp-font-size, medium);
    line-height: var(--lp-line-height, 1.3);
    color: var(--lp-text-color, inherit);
}

/* Header */
.hp-genealogy-header {
    margin-bottom: 15px;
}

.hp-genealogy-header h1 {
    margin-bottom: 10px;
    font-size: 24px;
    color: var(--lp-heading-color, inherit);
}

/* Breadcrumbs */
.hp-breadcrumbs {
    margin-bottom: 10px;
    font-size: medium;
}

.hp-breadcrumbs a {
    text-decoration: none;
    color: var(--lp-link-color, #004466);
}

.hp-breadcrumbs a:hover {
    text-decoration: underline;
}

/* Tree Selector */
.hp-tree-selector {
    margin-bottom: 15px;
    padding: 10px;
    background-color: #f9f9f9;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
}

.hp-tree-selector label {
    margin-right: 10px;
    font-weight: bold;
}

.hp-tree-selector select {
    padding: 4px 6px;
    border: 1px solid #ddd;
    border-radius: 3px;
    min-width: 180px;
    font-size: medium;
}

.hp-tree-selector button {
    padding: 4px 10px;
    background-color: var(--lp-accent-color, #004466);
    color: white;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    margin-left: 5px;
    font-size: medium;
}

.hp-tree-selector button:hover {
    background-color: #005177;
}

/* Alphabetical Index */
.hp-alphabetical-index {
    margin-bottom: 10px;
    padding: 5px;
    background-color: #f5f5f5;
    border-radius: 4px;
    text-align: center;
}

.hp-letter-link {
    display: inline-block;
    padding: 3px 6px;
    margin: 1px;
    text-decoration: none;
    color: var(--lp-link-color, #004466);
    font-weight: bold;
    border-radius: 3px;
    font-size: medium;
}

.hp-letter-link:hover {
    background-color: #004466;
    color: white;
}

/* Surnames List */
.hp-surnames-container {
    margin-bottom: 15px;
}

.hp-letter-group {
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 15px;
    border-bottom: 1px solid #e0e0e0;
}

.hp-letter-group:last-child {
    border-bottom: none;
}

.hp-letter-heading {
    padding: 4px 12px;
    background-color: var(--lp-accent-color, #004466);
    color: white;
    border-radius: 3px;
    font-size: 16px;
    margin-bottom: 10px;
    display: inline-block;
    position: relative;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.hp-letter-heading:after {
    content: '';
    position: absolute;
    top: 100%;
    left: 15px;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #004466;
}

.hp-surnames {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 5px;
}

.hp-surname-item {
    padding: 2px 4px;
    border-bottom: 1px solid #eee;
    font-size: medium;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hp-surname-item a {
    text-decoration: none;
    color: var(--lp-link-color, #004466);
    font-weight: normal;
}

.hp-surname-item a:hover {
    text-decoration: underline;
}

.hp-surname-count {
    color: #666;
    font-size: 0.9em;
    margin-left: 5px;
}

/* Individuals List */
.hp-individuals-container {
    margin-bottom: 15px;
}

.hp-individuals-container h2 {
    margin-bottom: 10px;
    font-size: 20px;
}

.hp-individuals-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 10px;
    font-size: medium;
}

.hp-individuals-table th,
.hp-individuals-table td {
    padding: 6px;
    text-align: left;
    border-bottom: 1px solid #eee;
    font-size: medium;
}

.hp-individuals-table th {
    background-color: #f5f5f5;
    font-weight: bold;
}

.hp-individuals-table tr:hover {
    background-color: #f9f9f9;
}

.hp-individuals-table .hp-person-link {
    color: var(--lp-link-color, #004466);
    text-decoration: none;
}

.hp-individuals-table .hp-person-link:hover {
    text-decoration: underline;
}

/* Pagination */
.hp-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 15px;
    padding-top: 10px;
    border-top: 1px solid #eee;
}

.hp-pagination-info {
    font-size: 14px;
    color: #666;
}

.hp-pagination-links {
    display: flex;
    gap: 5px;
}

.hp-pagination-link {
    display: inline-block;
    padding: 5px 10px;
    border: 1px solid var(--lp-border-color, #ddd);
    border-radius: 3px;
    text-decoration: none;
    color: var(--lp-link-color, #004466);
}

.hp-pagination-link:hover {
    background-color: #f5f5f5;
}

.hp-pagination-current {
    background-color: #004466;
    color: white;
    border-color: #004466;
}

/* Back to top button */
.hp-back-to-top {
    position: fixed !important;
    bottom: 20px !important;
    right: 20px !important;
    background-color: #004466 !important;
    color: white !important;
    width: 50px !important;
    height: 50px !important;
    border-radius: 50% !important;
    text-align: center !important;
    line-height: 50px !important;
    font-size: 24px !important;
    cursor: pointer !important;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 9999 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2) !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.hp-back-to-top.show {
    opacity: 1 !important;
    visibility: visible !important;
}

.hp-back-to-top:hover {
    background-color: #005177 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
}

/* Compact styles */
.hp-genealogy-content {
    margin-top: 5px;
}

.hp-letter-group + .hp-letter-group {
    margin-top: 25px;
}

/* Responsive Styles */
@media (max-width: 768px) {
    .hp-surnames {
        grid-template-columns: repeat(3, 1fr);
    }

    .hp-pagination {
        flex-direction: column;
        gap: 15px;
    }

    .hp-tree-selector {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .hp-tree-selector select {
        width: 100%;
    }

    .hp-tree-selector button {
        margin-left: 0;
    }
}

@media (max-width: 480px) {
    .hp-surnames {
        grid-template-columns: repeat(2, 1fr);
    }

    .hp-letter-link {
        padding: 3px 5px;
    }
}

/* Place Detail Page */
.hp-place-detail-page {
    margin: 0 auto;
    padding: 20px;
}

.hp-place-detail-page .hp-page-title {
    font-size: 28px;
    margin-bottom: 20px;
}

.hp-place-map-container {
    margin-bottom: 30px;
}

.hp-people-list h2 {
    font-size: 22px;
    margin-bottom: 15px;
}

.hp-people-table {
    width: 100%;
    border-collapse: collapse;
}

.hp-people-table th,
.hp-people-table td {
    padding: 10px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

.hp-people-table th {
    background-color: #f5f5f5;
    font-weight: bold;
}

.hp-people-table tr:hover {
    background-color: #f9f9f9;
}

.hp-people-table a {
    color: var(--lp-link-color, #004466);
    text-decoration: none;
}

.hp-people-table a:hover {
    text-decoration: underline;
}