@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;700&family=EB+Garamond:wght@400;500;700&display=swap&subset=latin-ext');

body {
    font-family: 'EB Garamond', Georgia, serif;
    background-color: #eae0cf; /* Slightly darker parchment */
    color: #3a2410;
    margin: 0;
    padding: 2rem 0 2rem; /* top/bottom padding; hero will break out full-width */
    font-size: 1.1rem; /* Increased font size */
    line-height: 1.6; /* Increased line spacing */
    text-shadow: 1px 1px 2px rgba(0,0,0,0.1); /* Subtle shadow for readability */
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: normal;
    border-bottom: 1px solid #d3c0a5;
    padding-bottom: 0.5rem;
    text-shadow: none; /* Headers usually don't need a shadow */
}

a {
    color: #8b4513;
}

a:hover {
    color: #a0522d;
}

.container {
    max-width: 800px;
    margin: 0 auto;
    background: rgba(234, 224, 207, 0.92); /* Match darker parchment with slight opacity */
    padding: 2rem;
    border: 1px solid #d3c0a5;
    box-shadow: 0 0 15px rgba(0,0,0,0.2);
}

/* Hero cover for hub pages */
.hero.hero--cover {
    position: relative;
    width: 100%;
    max-height: 42vh;
    min-height: 240px;
    overflow: hidden;
    border-bottom: 4px solid #d3c0a5;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
.hero.hero--cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
@media (max-width: 700px) {
    .hero.hero--cover { max-height: 32vh; min-height: 180px; }
}

.image-container img {
    border: 10px solid transparent;
    border-image: url('/images/frame.png') 30 stretch; /* Assuming a frame image */
    -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
    mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 80%, rgba(0,0,0,0) 100%);
}

/* Cover image styles */
.cover-image {
    margin: 0 0 2rem 0;
    text-align: center;
    border: 3px solid #d3c0a5;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.cover-image img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    display: block;
    border: none;
    border-image: none;
    -webkit-mask-image: none;
    mask-image: none;
}

/* Portrait image styles */
.portrait-image {
    float: right;
    margin: 0 0 2rem 2rem;
    max-width: 300px;
    border: 3px solid #d3c0a5;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    clear: right;
}

.portrait-image img {
    width: 100%;
    height: auto;
    max-height: 400px;
    object-fit: cover;
    display: block;
    border: none;
    border-image: none;
    -webkit-mask-image: none;
    mask-image: none;
}

/* If both cover and portrait exist, adjust portrait positioning */
.cover-image + .portrait-image {
    margin-top: -1rem;
}

/* Responsive cover images */
@media (max-width: 600px) {
    .cover-image img {
        height: 200px;
    }
    
    .portrait-image {
        float: none;
        margin: 1rem auto;
        max-width: 250px;
        display: block;
    }
}

/* Enhanced inline image styles for content */
main img:not(.cover-image img):not(.portrait-image img) {
    max-width: 100%;
    height: auto;
    border: 2px solid #d3c0a5;
    border-radius: 4px;
    margin: 1rem 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    cursor: zoom-in; /* Indicate images can be enlarged */
}

/* Image Modal for click-to-enlarge */
.image-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.image-modal-overlay.visible {
    opacity: 1;
    visibility: visible;
}

.image-modal-content {
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
    border: 5px solid white;
    border-radius: 5px;
    box-shadow: 0 0 30px rgba(0,0,0,0.5);
}

/* Advanced image alignment classes for content */
.image-left {
    float: left;
    margin: 0 1.5rem 1rem 0;
    max-width: 300px;
}

.image-right {
    float: right;
    margin: 0 0 1rem 1.5rem;
    max-width: 300px;
}

.image-center {
    display: block;
    margin: 1.5rem auto;
    text-align: center;
}

.image-small {
    max-width: 200px;
}

.image-medium {
    max-width: 400px;
}

.image-large {
    max-width: 600px;
    width: 100%;
}

/* Image with caption */
.image-with-caption {
    text-align: center;
    margin: 1.5rem 0;
}

.image-with-caption img {
    margin-bottom: 0.5rem;
}

.image-with-caption .caption {
    font-style: italic;
    font-size: 0.9rem;
    color: #666;
    margin-top: 0.5rem;
}

/* Clear floats after images */
.clear {
    clear: both;
}

/* Ensure text flows properly around portrait images */
.portrait-image + p,
.portrait-image + h1,
.portrait-image + h2,
.portrait-image + h3 {
    margin-top: 0;
}

/* Map actions styling */
.map-actions, .entry-actions { margin: 1rem 0; text-align: center; }

/* Unified button system */
.btn-row { display: inline-flex; gap: 10px; align-items: stretch; justify-content: center; flex-wrap: wrap; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 140px; padding: 10px 18px; border-radius: 6px; font-weight: 600; font-size: 1rem; line-height: 1; text-decoration: none; cursor: pointer; transition: all 0.2s ease; box-shadow: 0 2px 5px rgba(0,0,0,0.18); border: none; }
.btn--accent { background: #2c5e2e; color: #fff !important; }
.btn--accent:hover { background: #3a7a3d; transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0,0,0,0.25); }
.btn:focus-visible { outline: 3px solid #a3cfbb; outline-offset: 2px; }

/* Legacy classes map to unified */
/* Legacy classes intentionally unused after unification */

/* Share toast */
.toast { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); background: #5c4122; color:#fff; padding:8px 12px; border-radius:6px; box-shadow:0 2px 8px rgba(0,0,0,.25); opacity:0; pointer-events:none; transition: opacity .2s ease; z-index: 10001; }
.toast.visible { opacity: 1; }

/* Header layout */
.site-header { margin-bottom: 1rem; }
.header-bar {
    display: grid;
    grid-template-columns: 1fr minmax(220px, 480px) auto;
    gap: 12px;
    align-items: center;
}
.nav-left { display:flex; gap:14px; align-items:center; }
.nav-left a { text-decoration:none; padding:4px 6px; border-radius:4px; }
.nav-left a:hover { background: rgba(184, 134, 11, 0.12); }
.nav-left a.active { font-weight: 700; background: rgba(184, 134, 11, 0.18); }

.lang-switch {
    font-size: 0.9rem;
}

.lang-switch a {
    background: rgba(184, 134, 11, 0.1);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    border: 1px solid rgba(184, 134, 11, 0.3);
    text-decoration: none;
    font-weight: normal;
}

.lang-switch a:hover {
    background: rgba(184, 134, 11, 0.2);
}

/* Global Search */
.global-search { margin: 0; position: relative; width: 100%; }
.global-search input { width:100%; padding:6px 8px; font-size:14px; border:1px solid #b89b6b; border-radius:4px; background: #f6efe2; }
.global-search input:focus { outline:2px solid #c8aa76; }
.search-results { position:absolute; top:100%; left:0; right:0; background:#fffbeedd; border:1px solid #c9b28c; box-shadow:0 4px 12px rgba(0,0,0,.12); max-height:360px; overflow:auto; z-index:200; display:none; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.search-results.visible { display:block; }
.search-results .sr-item { padding:6px 8px; cursor:pointer; border-bottom:1px solid #e5d7c0; }
.search-results .sr-item:last-child { border-bottom:none; }
.search-results .sr-item:hover { background:#efe2cf; }
.search-results .sr-title { font-weight:600; }
.search-results .sr-badge { background:#5c4122; color:#fff; font-size:10px; padding:2px 6px; border-radius:10px; margin-left:6px; text-transform:uppercase; letter-spacing:.5px; }
.search-results .sr-summary { font-size:12px; color:#432; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
@media (max-width:700px){
    .header-bar { grid-template-columns: 1fr auto; grid-template-rows: auto auto; }
    .search-mount { grid-column: 1 / -1; }
}