/* ================================
   HOUSETORY – CUSTOM CSS
   Cleaned consolidated version
   ================================ */

.hero-section {
    background-image: url('/images/terrace.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    color: #fff;
}

/* Dark overlay for readability */
.hero-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
}

.hero-inner {
    position: relative;
    z-index: 2;
    max-width: 800px;
}

.hero-section h1 {
    font-size: 3rem;
    margin-bottom: 20px;
}

.hero-buttons a {
    margin: 5px;
}

/* Hide system/helper house fields */
.js-house-system-field {
    display: none !important;
}

.control-group:has(.js-house-system-field),
.subform-repeatable-group:has(.js-house-system-field),
.field-entry:has(.js-house-system-field),
.form-group:has(.js-house-system-field) {
    display: none !important;
}

/* Hide generic Joomla editor UI on frontend house submission */
#attrib-helix_ultimate_blog_options,
#editor,
.tox,
.tox-tinymce,
.joomla-editor-container,
.control-group:has(.tox-tinymce),
.form-group:has(.tox-tinymce) {
    display: none !important;
}

/* Hide the Add a House menu item only, while keeping the route active */
a.menu-hidden-house,
li.menu-hidden-house,
li.menu-hidden-house > a.menu-hidden-house,
li.menu-hidden-house > a {
    display: none !important;
}

/* Hide the Search Housetory menu item while keeping the route active */
a.menu-hidden-search,
li.menu-hidden-search,
li.menu-hidden-search > a.menu-hidden-search,
li.menu-hidden-search > a {
    display: none !important;
}

/* Housetory header search */
.housetory-header-search {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: 12px;
    max-width: 420px;
}

.housetory-header-search input[type="text"] {
    width: 240px;
    height: 34px;
    padding: 0 10px;
    border: 1px solid #cfcfcf;
    border-radius: 4px;
    font-size: 13px;
    line-height: 1.2;
    background: #fff;
    color: #333;
}

.housetory-header-search input[type="text"]:focus {
    outline: none;
    border-color: #888;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.06);
}

.housetory-header-search input[type="text"].is-invalid {
    border-color: #b00020;
    box-shadow: 0 0 0 2px rgba(176, 0, 32, 0.08);
}

.housetory-header-search button {
    height: 34px;
    padding: 0 10px;
    border: 1px solid #444;
    border-radius: 4px;
    background: #444;
    color: #fff;
    font-size: 13px;
    cursor: pointer;
}

.housetory-header-search button:hover {
    opacity: 0.92;
}

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

/* Shared search / contributions page container */
.housetory-search-page {
    max-width: 1100px;
    margin: 0 auto;
    padding: 40px 20px 60px;
}

.housetory-search-header h1 {
    margin-bottom: 8px;
}

.housetory-search-summary {
    color: #666;
    margin-bottom: 30px;
}

.housetory-search-count {
    margin-bottom: 20px;
    font-weight: 600;
}

/* Card grid */
.housetory-house-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
}

.housetory-house-card {
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.housetory-house-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

.housetory-house-image-link {
    display: block;
}

.housetory-house-image {
    display: block;
    width: 100%;
    height: 220px;
    object-fit: cover;
}

.housetory-house-card-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 18px;
}

.housetory-house-title {
    font-size: 1.2rem;
    margin-bottom: 4px;
}

.housetory-house-title a {
    color: #222;
    text-decoration: none;
}

.housetory-house-title a:hover {
    text-decoration: underline;
}

.housetory-house-excerpt {
    color: #555;
    margin-bottom: 8px;
}

.housetory-house-distance {
    color: #777;
    margin-bottom: 8px;
    font-size: 0.95rem;
}

/* Status badges */
.housetory-house-status {
    display: inline-block;
    align-self: flex-start;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    margin: 6px 0 10px;
}

.housetory-status-published {
    background: #e6f4ea;
    color: #2e7d32;
}

.housetory-status-in-review {
    background: #fff4e5;
    color: #b26a00;
}

.housetory-status-unpublished {
    background: #fdecea;
    color: #b00020;
}

/* Buttons */
.housetory-house-button {
    display: inline-block;
    align-self: flex-start;
    margin-top: auto;
    padding: 6px 12px;
    border-radius: 6px;
    background: #333;
    color: #fff;
    text-decoration: none;
    font-size: 0.85rem;
    width: auto;
}

.housetory-house-button:hover {
    opacity: 0.92;
    color: #fff;
}

/* Empty states */
.housetory-search-empty {
    padding: 24px;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 10px;
}

.housetory-search-help {
    margin-top: 10px;
}

/* Contributions sections */
.housetory-contrib-section {
    margin-bottom: 40px;
}

.housetory-contrib-section h2 {
    margin-bottom: 16px;
}

/* Houses stay as responsive grid */
.housetory-section-houses .housetory-house-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
}

/* Timeline + Memories use fixed-width cards */
.housetory-section-timeline .housetory-house-grid,
.housetory-section-memories .housetory-house-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

.housetory-section-timeline .housetory-house-card,
.housetory-section-memories .housetory-house-card {
    width: 260px;
}

/* Refined card styles */
.housetory-house-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 28px;
    margin: 30px 0;
}

.housetory-house-card {
    background: #fff;
    border: 1px solid #d9d9d9;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.housetory-house-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

.housetory-house-card-image img {
    display: block;
    width: 100%;
    height: 220px;
    object-fit: cover;
}

.housetory-house-card-body {
    padding: 20px;
}

.housetory-house-card-title {
    font-size: 1.15rem;
    line-height: 1.35;
    margin: 0 0 14px;
}

.housetory-house-card-title a {
    color: #56766d;
    text-decoration: none;
}

.housetory-house-card-title a:hover {
    text-decoration: underline;
}

.status-badge {
    display: inline-block;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 600;
    margin-bottom: 12px;
}

.status-badge.published {
    background: #e4f3e7;
    color: #2e6b3f;
}

.status-badge.review {
    background: #fff1dd;
    color: #a15c00;
}

.submitted-date {
    font-size: 0.92rem;
    color: #666;
    margin: 0 0 14px;
}

.housetory-house-card-text {
    font-size: 0.95rem;
    color: #555;
    margin-bottom: 18px;
}

.housetory-house-card-actions {
    margin: 0;
}

.btn-view {
    display: inline-block;
    padding: 10px 16px;
    border-radius: 8px;
    background: #56766d;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    transition: background 0.2s ease;
}

.btn-view:hover {
    background: #45635b;
    color: #fff;
}

.pagination-wrapper {
    margin-top: 20px;
}

#fieldset-fields-9 {
    background: #f7f5f2;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #ddd;
}

.housetory-section {
    margin: 20px 0;
    padding: 20px;
    background: #f7f5f2;
    border: 1px solid #ddd;
    border-radius: 10px;
}

.housetory-section h3 {
    margin-top: 0;
    font-size: 18px;
}

/* Polished supporting document upload */
.housetory-upload {
    position: relative;
    padding: 22px 24px;
    border: 1px solid #d8d0c3;
    border-radius: 16px;
    background: linear-gradient(180deg, #fcfaf7 0%, #f6f1ea 100%);
    box-shadow: 0 8px 24px rgba(60, 40, 20, 0.06);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
    cursor: pointer;
    overflow: hidden;
}

.housetory-upload:hover {
    transform: translateY(-1px);
    border-color: #b9ab95;
    box-shadow: 0 14px 30px rgba(60, 40, 20, 0.10);
    background: linear-gradient(180deg, #fffdf9 0%, #f7f1e9 100%);
}

.housetory-upload.dragover {
    border-color: #8c7a62;
    box-shadow: 0 0 0 4px rgba(140, 122, 98, 0.10), 0 14px 30px rgba(60, 40, 20, 0.10);
    background: linear-gradient(180deg, #fffaf2 0%, #f3eadf 100%);
}

.housetory-upload::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at top right, rgba(86, 118, 109, 0.08), transparent 28%),
        radial-gradient(circle at bottom left, rgba(140, 122, 98, 0.08), transparent 30%);
    pointer-events: none;
}

.upload-inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 56px 1fr auto;
    gap: 16px;
    align-items: center;
}

.upload-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: #dfe9e3;
    color: #56766d;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
}

.upload-text {
    text-align: left;
}

.upload-text strong {
    display: block;
    margin: 0 0 4px;
    font-size: 1.05rem;
    line-height: 1.2;
    color: #2f2923;
}

.upload-text span {
    display: block;
    font-size: 0.92rem;
    color: #6d655c;
    line-height: 1.4;
}

.housetory-upload-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 14px;
    border: 1px solid #cfc3b1;
    border-radius: 10px;
    background: #fffdfa;
    color: #3c342b;
    font-size: 0.92rem;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(60, 40, 20, 0.05);
}

.housetory-upload:hover .housetory-upload-button {
    border-color: #b9ab95;
    background: #fff;
}

.upload-file-name {
    position: relative;
    z-index: 1;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(140, 122, 98, 0.18);
    font-size: 0.92rem;
    color: #5f584f;
    text-align: left;
}

.upload-help {
    position: relative;
    z-index: 1;
    margin-top: 10px;
    font-size: 0.84rem;
    color: #7a7267;
    text-align: left;
}

/* Safer safeguards checkbox alignment */
.housetory-section .submission-safeguards .checkbox,
.housetory-section .submission-safeguards .form-check,
.housetory-section .submission-safeguards .field-entry.checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.housetory-section .submission-safeguards .checkbox input[type="checkbox"],
.housetory-section .submission-safeguards .form-check input[type="checkbox"],
.housetory-section .submission-safeguards .field-entry.checkbox input[type="checkbox"] {
    margin-top: 0.28em;
    flex: 0 0 auto;
}

.housetory-section .submission-safeguards .checkbox label,
.housetory-section .submission-safeguards .form-check label,
.housetory-section .submission-safeguards .field-entry.checkbox label {
    margin: 0;
    line-height: 1.45;
}

@media (max-width: 640px) {
    .upload-inner {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .upload-icon {
        margin: 0 auto;
    }

    .upload-text,
    .upload-file-name,
    .upload-help {
        text-align: center;
    }

    .housetory-upload-button {
        width: 100%;
    }
}

/* Hide disclaimer fields from Step 1 */
.step-1 .field-accuracy-statement,
.step-1 .field-sensitivity-statement {
    display: none !important;
}
/* Housetory header logo sizing */
#sp-logo {
    min-height: 72px;
    display: flex;
    align-items: center;
}

#sp-logo .logo,
#sp-logo .logo-image,
#sp-logo img {
    max-height: 58px;
    width: auto;
}
/* ================================
   MEMORY IMAGE (INLINE + GALLERY)
   ================================ */

.memory-inline-image {
    width: 220px;
    float: right;
    margin: 0 0 15px 20px;
    border-radius: 12px;
    overflow: hidden;
}

.memory-inline-image img {
    width: 100%;
    display: block;
}

.memory-inline-image:hover {
    transform: scale(1.02);
    transition: 0.2s ease;
}

.memory-image-caption {
    font-size: 12px;
    color: #8a7f73;
    margin-top: 6px;
}

/* Mobile fix */
@media (max-width: 768px) {
    .memory-inline-image {
        float: none;
        width: 100%;
        margin: 15px 0;
    }
}

/* Memory inline image polish */
.memory-inline-image {
    box-shadow: 0 4px 14px rgba(60, 40, 20, 0.08);
    border: 1px solid #e5ded4;
    background: #fff;
    padding: 6px;
    shape-outside: margin-box;
}

.memory-image-caption {
    font-size: 12px;
    color: #8a7f73;
    margin-top: 8px;
    line-height: 1.3;
}
.memory-added-badge {
    display: inline-flex;
    align-items: center;
    padding: .35rem .62rem;
    border: 1px solid rgba(120, 95, 65, .12); /* lighter border */
    border-radius: 999px;
    background: rgba(255,255,255,.25); /* softer */
    color: #9a8f84; /* lighter text */
    font-size: .75rem;
    font-weight: 600; /* slightly less bold */
}
/* ================================
   MEMORY GALLERY GRID
   ================================ */

.memory-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    margin-top: 15px;
}

.memory-gallery-item {
    background: #fff;
    border: 1px solid #e5ded4;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(60, 40, 20, 0.08);
    padding: 6px;
    transition: transform 0.2s ease;
}

.memory-gallery-item:hover {
    transform: scale(1.02);
}

.memory-gallery-item img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
}

.memory-image-caption {
    font-size: 12px;
    color: #8a7f73;
    margin-top: 8px;
    line-height: 1.3;
}
/* Hide obsolete old Memory Images field */
.control-group:has(select[name*="memory-images"]),
.form-group:has(select[name*="memory-images"]),
.field-entry:has(select[name*="memory-images"]) {
    display: none !important;
}


/* ================================
   HOUSETORY – HOMEPAGE HERO
   Two buttons first, search below.
   The Housetory Header Search module/script may move the search form
   into .hero-buttons and add .housetory-hero-search.
   ================================ */

.hero-section .hero-buttons,
.hero-section .housetory-hero-buttons {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 24px !important;
    transform: none !important;
    margin-top: 34px !important;
}

.hero-section .hero-buttons > a,
.hero-section .housetory-hero-btn {
    min-width: 260px !important;
    height: 72px !important;
    padding: 0 34px !important;
    border-radius: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 14px !important;
    font-size: 1.28rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em !important;
    text-decoration: none !important;
    box-shadow: 0 8px 22px rgba(0,0,0,0.18) !important;
}

.hero-section .housetory-hero-btn-icon {
    font-size: 1.45rem !important;
    line-height: 1 !important;
}

.hero-section .housetory-hero-btn-primary,
.hero-section .hero-buttons > a:first-child {
    background: #3f6358 !important;
    color: #fff !important;
    border: 2px solid #b08a4a !important;
}

.hero-section .housetory-hero-btn-secondary,
.hero-section .hero-buttons > a:nth-child(2) {
    background: #fffaf2 !important;
    color: #3f6358 !important;
    border: 2px solid #b08a4a !important;
}

.hero-section .hero-buttons > a:hover,
.hero-section .housetory-hero-btn:hover {
    transform: translateY(-2px) !important;
    opacity: 0.96 !important;
}

/* Search appears below the two buttons when the header search form is moved into the hero. */
.hero-section .housetory-hero-search,
.hero-section .housetory-header-search {
    flex-basis: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 18px auto 0 !important;
    max-width: 760px !important;
    width: 100% !important;
}

.hero-section .housetory-hero-search input[type="text"],
.hero-section .housetory-header-search input[type="text"] {
    width: min(560px, 82vw) !important;
    height: 54px !important;
    border-radius: 12px !important;
    padding: 0 18px !important;
    font-size: 1rem !important;
}

.hero-section .housetory-hero-search button,
.hero-section .housetory-header-search button {
    height: 54px !important;
    border-radius: 12px !important;
    padding: 0 24px !important;
    font-weight: 700 !important;
}

@media (max-width: 768px) {
    .hero-section .hero-buttons,
    .hero-section .housetory-hero-buttons {
        flex-direction: column !important;
        gap: 18px !important;
        margin-top: 28px !important;
    }

    .hero-section .hero-buttons > a,
    .hero-section .housetory-hero-btn {
        width: min(78vw, 320px) !important;
        min-width: 0 !important;
        height: 64px !important;
        font-size: 1.18rem !important;
    }

    .hero-section .housetory-hero-search,
    .hero-section .housetory-header-search {
        flex-direction: column !important;
        gap: 12px !important;
        margin-top: 16px !important;
    }

    .hero-section .housetory-hero-search input[type="text"],
    .hero-section .housetory-header-search input[type="text"] {
        width: 90vw !important;
        max-width: 420px !important;
    }

    .hero-section .housetory-hero-search button,
    .hero-section .housetory-header-search button {
        min-width: 150px !important;
    }
}

/* ================================
   HOUSETORY – MESSAGING RESTORE
   ================================ */

/* Contact contributor buttons */
.housetory-message-button,
.housetory-contact-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: .55rem 1rem !important;
    border-radius: 999px !important;
    font-size: .9rem !important;
    line-height: 1.2 !important;
    background: #4b3a2c !important;
    color: #fff !important;
    text-decoration: none !important;
    box-shadow: 0 4px 10px rgba(0,0,0,.08) !important;
}

.housetory-message-button:hover,
.housetory-contact-button:hover {
    background: #2f251d !important;
    color: #fff !important;
}

/* uddeIM Simple Notifier in header */
.mod_uddeim_simple_notifier,
.moduletable:has(img[src*="mod_uddeim_simple_notifier"]) {
    display: inline-flex !important;
    align-items: center !important;
    margin-left: 8px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.mod_uddeim_simple_notifier a,
.moduletable:has(img[src*="mod_uddeim_simple_notifier"]) a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    text-decoration: none !important;
    color: #2f2923 !important;
}

.mod_uddeim_simple_notifier img,
.moduletable:has(img[src*="mod_uddeim_simple_notifier"]) img {
    max-height: 18px !important;
    width: auto !important;
}
/* Housetory message icon polish */
.mod_uddeim_simple_notifier,
.moduletable:has(img[src*="mod_uddeim_simple_notifier"]) {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    margin-left: 10px !important;
    font-weight: 700 !important;
}

.mod_uddeim_simple_notifier a,
.moduletable:has(img[src*="mod_uddeim_simple_notifier"]) a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    color: #2f2923 !important;
    text-decoration: none !important;
    cursor: pointer !important;
}

.mod_uddeim_simple_notifier a:hover,
.moduletable:has(img[src*="mod_uddeim_simple_notifier"]) a:hover {
    color: #56766d !important;
    opacity: .85;
}

/* Make message count feel like a badge */
.mod_uddeim_simple_notifier,
.moduletable:has(img[src*="mod_uddeim_simple_notifier"]) {
    line-height: 1 !important;
}

/* ========================================
   HOUSETORY ABOUT PAGE
======================================== */

.housetory-about-page {
    background: #f8f4ee;
    color: #2f2923;
}

/* HERO */

.housetory-about-hero {
    min-height: 520px;

    background:
        linear-gradient(
            90deg,
            rgba(20,18,15,.82),
            rgba(20,18,15,.35)
        ),
        url('/images/terrace.png');

    background-size: cover;
    background-position: center;

    display: flex;
    align-items: center;

    padding: 70px 8vw;
}

.housetory-about-hero-inner {
    max-width: 560px;
    color: #fff;
}

.housetory-about-hero h1 {
    font-family: Georgia, serif;
    font-size: clamp(3rem, 7vw, 5.8rem);
    line-height: .95;
    margin-bottom: 28px;
}

.housetory-about-hero p {
    font-size: 1.25rem;
    line-height: 1.55;
    max-width: 480px;
    margin-bottom: 28px;
}

/* BUTTON */

.housetory-about-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 14px 24px;

    border-radius: 8px;

    background: #56766d;

    color: #fff !important;

    text-decoration: none !important;

    font-weight: 700;
}

.housetory-about-btn:hover {
    background: #45635b;
}

/* INTRO */

.housetory-about-intro {
    max-width: 860px;
    margin: 0 auto;
    padding: 58px 22px 24px;
    text-align: center;
}

.housetory-about-intro h2,
.housetory-about-workflow h2 {
    font-family: Georgia, serif;
    font-size: 2.4rem;
    margin-bottom: 22px;
}

.housetory-about-intro h2::after,
.housetory-about-workflow h2::after {
    content: "";
    display: block;
    width: 52px;
    height: 2px;
    background: #b08a4a;
    margin: 16px auto 0;
}

.housetory-about-intro p {
    font-size: 1.12rem;
    line-height: 1.65;
}

/* CARDS */

.housetory-about-cards {
    max-width: 1100px;

    margin: 30px auto 48px;

    padding: 0 22px;

    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: 28px;
}

.housetory-about-cards article {
    background: #fffdfa;

    border: 1px solid #e3d8ca;

    border-radius: 16px;

    padding: 34px 28px;

    text-align: center;

    box-shadow: 0 10px 28px rgba(60,40,20,.07);
}

.housetory-about-icon {
    width: 76px;
    height: 76px;

    margin: 0 auto 20px;

    border-radius: 50%;

    background: #56766d;
    color: #fff;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 34px;
}

.housetory-about-cards article:nth-child(2)
.housetory-about-icon {
    background: #b08a4a;
}

.housetory-about-cards h3 {
    font-family: Georgia, serif;
    font-size: 1.5rem;
    margin-bottom: 12px;
}

.housetory-about-cards p {
    line-height: 1.55;
}

/* WORKFLOW */

.housetory-about-workflow {
    max-width: 1180px;

    margin: 0 auto 56px;

    padding: 46px 28px;

    border-radius: 22px;

    background: #efeadf;

    text-align: center;
}

.housetory-workflow-steps {
    display: grid;
    grid-template-columns: repeat(5, 1fr);

    gap: 18px;

    margin-top: 34px;
}

.housetory-workflow-steps div {
    padding: 16px;
}

.housetory-workflow-steps span {
    width: 56px;
    height: 56px;

    margin: 0 auto 16px;

    border-radius: 50%;

    background: #dfe6d8;

    display: flex;
    align-items: center;
    justify-content: center;

    font-weight: 800;
}

.housetory-workflow-steps h3 {
    font-size: 1rem;
    margin-bottom: 8px;
}

.housetory-workflow-steps p {
    font-size: .92rem;
    line-height: 1.45;
}

/* QUOTE */

.housetory-about-quote {
    padding: 64px 22px;

    text-align: center;

    background:
        linear-gradient(
            rgba(248,244,238,.9),
            rgba(248,244,238,.9)
        ),
        url('/images/terrace.png');

    background-size: cover;
    background-position: center;
}

.housetory-about-quote p {
    font-family: Georgia, serif;

    font-size: 2rem;

    font-style: italic;

    max-width: 680px;

    margin: 0 auto 26px;
}

/* MOBILE */

@media (max-width: 900px) {

    .housetory-about-cards,
    .housetory-workflow-steps {
        grid-template-columns: 1fr;
    }

    .housetory-about-hero {
        min-height: 460px;
        padding: 58px 28px;
    }

    .housetory-about-hero h1 {
        font-size: 3.4rem;
    }
}
/* ========================================
   HOUSETORY HOMEPAGE COMPACT ABOUT TEASER
======================================== */

.housetory-home-about-compact {
    background: #f8f4ee;
    color: #2f2923;
    padding: 58px 22px 70px;
}

.housetory-home-mission {
    max-width: 920px;
    margin: 0 auto 36px;
    text-align: center;
}

.housetory-home-mission h2 {
    font-family: Georgia, serif;
    font-size: clamp(1.8rem, 3vw, 2.7rem);
    line-height: 1.22;
    margin-bottom: 18px;
}

.housetory-home-mission h2::after {
    content: "";
    display: block;
    width: 54px;
    height: 2px;
    background: #b08a4a;
    margin: 20px auto 0;
}

.housetory-home-mission p {
    max-width: 720px;
    margin: 0 auto;
    font-size: 1.08rem;
    line-height: 1.65;
    color: #4c443d;
}

.housetory-home-cards {
    max-width: 1050px;
    margin: 0 auto 36px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.housetory-home-cards article {
    background: #fffdfa;
    border: 1px solid #e3d8ca;
    border-radius: 16px;
    padding: 28px 24px;
    text-align: center;
    box-shadow: 0 8px 22px rgba(60,40,20,.06);
}

.housetory-home-card-icon {
    width: 62px;
    height: 62px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: #56766d;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
}

.housetory-home-cards article:nth-child(2) .housetory-home-card-icon {
    background: #b08a4a;
}

.housetory-home-cards h3 {
    font-family: Georgia, serif;
    font-size: 1.45rem;
    margin-bottom: 10px;
}

.housetory-home-cards p {
    line-height: 1.55;
    margin-bottom: 0;
}

/* Homepage How steps - card layout */
.housetory-home-about-compact .housetory-home-how,
html body .housetory-home-about-compact section.housetory-home-how {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 14px !important;
    max-width: 1120px !important;
    margin: 34px auto 24px !important;
    padding: 0 20px !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-weight: 400 !important;
    color: inherit !important;
}

.housetory-home-about-compact .housetory-home-how-step,
html body .housetory-home-about-compact .housetory-home-how-step,
html body .housetory-home-about-compact section.housetory-home-how > div {
    display: block !important;
    min-width: 0 !important;
    background: #fffaf2 !important;
    border: 1px solid rgba(80, 60, 35, .16) !important;
    border-radius: 18px !important;
    padding: 18px 16px !important;
    text-align: center !important;
    box-shadow: 0 8px 24px rgba(50, 38, 25, .06) !important;
}

.housetory-home-about-compact .housetory-home-how-step strong,
html body .housetory-home-about-compact section.housetory-home-how > div strong {
    display: block !important;
    margin: 0 0 8px !important;
    color: #3d3125 !important;
    font-size: 1.05rem !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
}

.housetory-home-about-compact .housetory-home-how-step span,
html body .housetory-home-about-compact section.housetory-home-how > div span {
    display: block !important;
    margin: 0 !important;
    color: #6f655a !important;
    font-size: .92rem !important;
    line-height: 1.45 !important;
    font-weight: 400 !important;
}

.housetory-home-about-compact .housetory-home-how span::after,
.housetory-home-about-compact .housetory-home-how span:not(:last-child)::after,
html body .housetory-home-about-compact .housetory-home-how span::after,
html body .housetory-home-about-compact .housetory-home-how span:not(:last-child)::after {
    content: "" !important;
    display: none !important;
    margin: 0 !important;
}

@media (max-width: 900px) {
    .housetory-home-about-compact .housetory-home-how,
    html body .housetory-home-about-compact section.housetory-home-how {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 560px) {
    .housetory-home-about-compact .housetory-home-how,
    html body .housetory-home-about-compact section.housetory-home-how {
        grid-template-columns: 1fr !important;
    }
}

/* Homepage compact section scale refinement */
.housetory-home-mission {
    max-width: 820px;
    margin-bottom: 34px;
}

.housetory-home-mission h2 {
    font-size: clamp(1.9rem, 2.6vw, 3rem) !important;
    line-height: 1.22 !important;
    max-width: 860px;
    margin-left: auto;
    margin-right: auto;
}

.housetory-home-mission p {
    font-size: 1.08rem !important;
    max-width: 700px;
}

/* Reduce vertical gap between hero and homepage teaser */
.housetory-home-about-compact {
    padding-top: 46px !important;
}
/* Homepage final scale polish */

/* Slightly reduce homepage hero height so the teaser appears sooner */
body.home .hero-section,
.hero-section {
    min-height: 62vh;
}

/* Make the compact homepage intro breathe a little more */
.housetory-home-about-compact {
    padding-top: 52px !important;
    padding-bottom: 76px !important;
}

/* Let the mission statement read wider on desktop */
.housetory-home-mission {
    max-width: 980px !important;
}

.housetory-home-mission h2 {
    max-width: 960px !important;
    font-size: clamp(2rem, 2.4vw, 2.75rem) !important;
}

/* Slightly larger cards without making page too long */
.housetory-home-cards {
    max-width: 1120px !important;
}

.housetory-home-cards article {
    padding: 32px 28px !important;
}
/* Hide duplicated article-level social/share icons, keep top-bar socials */
.article-social-share,
.sp-social-share,
.social-share,
.entry-social,
.article-header .icons,
.article-tools,
ul.actions,
.icons {
    display: none !important;
}
/* Stronger About page vertical spacing fix */
body:has(.housetory-about-page) #sp-main-body {
    padding-top: 0 !important;
}

body:has(.housetory-about-page) .com-content-article,
body:has(.housetory-about-page) .item-page,
body:has(.housetory-about-page) .article-body,
body:has(.housetory-about-page) .com-content-article__body {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

body:has(.housetory-about-page) .housetory-about-page {
    margin-top: 24px !important;
}
/* About page mobile hero refinement */
@media (max-width: 768px) {
    .housetory-about-hero {
        min-height: 620px;
        padding: 46px 28px;
        align-items: center;
    }

    .housetory-about-hero h1 {
        font-size: clamp(3.2rem, 14vw, 4.8rem) !important;
        line-height: 1.02 !important;
        margin-bottom: 24px;
    }

    .housetory-about-hero p {
        font-size: 1.45rem !important;
        line-height: 1.45 !important;
        max-width: 100%;
    }

    .housetory-about-btn {
        font-size: 1.05rem;
        padding: 15px 24px;
    }

    .housetory-about-intro h2 {
        font-size: 3rem !important;
        line-height: 1.1;
    }
}
/* About page mobile top spacing refinement */
@media (max-width: 768px) {
    body:has(.housetory-about-page) .housetory-about-page {
        margin-top: 10px !important;
    }

    body:has(.housetory-about-page) #sp-main-body {
        padding-top: 0 !important;
    }

    .housetory-about-hero {
        margin-top: 0 !important;
    }
}
/* Google Places autocomplete dropdown fix */
.pac-container {
    z-index: 999999 !important;
    display: block !important;
    visibility: visible !important;
}
/* =========================================================
   Housetory - How It Works Page
   ========================================================= */

.housetory-how-page {
    background: #f7f3ed;
    color: #332c25;
}

.housetory-how-hero {
    min-height: 520px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 28px;
    background:
        linear-gradient(rgba(25, 22, 18, 0.58), rgba(25, 22, 18, 0.58)),
        url('/images/terrace.png') center center / cover no-repeat;
    text-align: center;
    color: #fff;
}

.housetory-how-hero-inner {
    max-width: 880px;
}

.housetory-kicker {
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.85rem;
    margin-bottom: 18px;
    color: #e7d6b4;
}

.housetory-how-hero h1 {
    font-size: clamp(3rem, 7vw, 5.8rem);
    line-height: 1.02;
    margin-bottom: 24px;
    font-weight: 600;
}

.housetory-how-hero p {
    max-width: 720px;
    margin: 0 auto 34px;
    font-size: 1.25rem;
    line-height: 1.6;
}

.housetory-how-btn {
    display: inline-block;
    padding: 15px 28px;
    background: #b28a3c;
    color: #fff;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 600;
}

.housetory-how-btn:hover {
    background: #96722f;
    color: #fff;
}

.housetory-how-intro {
    max-width: 850px;
    margin: 0 auto;
    padding: 80px 28px 40px;
    text-align: center;
}

.housetory-how-intro h2,
.housetory-how-types h2 {
    font-size: clamp(2.2rem, 4vw, 3.6rem);
    line-height: 1.1;
    margin-bottom: 22px;
}

.housetory-how-intro p {
    font-size: 1.2rem;
    line-height: 1.7;
    color: #5f564d;
}

.housetory-how-steps {
    max-width: 1080px;
    margin: 0 auto;
    padding: 30px 28px 90px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 22px;
}

.housetory-how-step {
    background: #fffaf2;
    border: 1px solid rgba(80, 60, 35, 0.16);
    border-radius: 10px;
    padding: 28px 22px;
    box-shadow: 0 10px 26px rgba(50, 38, 25, 0.06);
}

.housetory-step-number {
    display: inline-flex;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #4f7467;
    color: #fff;
    font-weight: 700;
    margin-bottom: 18px;
}

.housetory-how-step h3 {
    font-size: 1.35rem;
    margin-bottom: 12px;
}

.housetory-how-step p {
    color: #5f564d;
    line-height: 1.65;
    margin: 0;
}

.housetory-how-types {
    background: #efe7da;
    padding: 80px 28px;
    text-align: center;
}

.housetory-how-type-grid {
    max-width: 980px;
    margin: 36px auto 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.housetory-how-type-grid > div {
    background: #fffaf2;
    padding: 28px 24px;
    border-radius: 10px;
    border: 1px solid rgba(80, 60, 35, 0.14);
}

.housetory-how-type-grid h3 {
    font-size: 1.35rem;
    margin-bottom: 10px;
}

.housetory-how-type-grid p {
    color: #5f564d;
    line-height: 1.6;
    margin: 0;
}

.housetory-how-note {
    padding: 80px 28px;
    text-align: center;
}

.housetory-how-note blockquote {
    max-width: 760px;
    margin: 0 auto;
    font-size: clamp(1.8rem, 4vw, 3rem);
    line-height: 1.25;
    color: #3d342c;
}

/* Remove default Joomla article spacing on How It Works page */
body:has(.housetory-how-page) #sp-main-body {
    padding-top: 0 !important;
}

body:has(.housetory-how-page) .com-content-article,
body:has(.housetory-how-page) .item-page,
body:has(.housetory-how-page) .article-body,
body:has(.housetory-how-page) .com-content-article__body {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Mobile */
@media (max-width: 900px) {
    .housetory-how-steps,
    .housetory-how-type-grid {
        grid-template-columns: 1fr;
    }

    .housetory-how-hero {
        min-height: 600px;
        padding: 60px 28px;
    }

    .housetory-how-hero h1 {
        font-size: clamp(3rem, 13vw, 4.8rem);
    }

    .housetory-how-hero p {
        font-size: 1.15rem;
    }
}
/* =========================================================
   Housetory - Contribution Guidelines Page
   ========================================================= */

.housetory-guidelines-page {
    background: #f7f3ed;
    color: #332c25;
}

.housetory-guidelines-hero {
    min-height: 520px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 28px;
    background:
        linear-gradient(rgba(25, 22, 18, 0.62), rgba(25, 22, 18, 0.62)),
        url('/images/terrace.png') center center / cover no-repeat;
    text-align: center;
    color: #fff;
}

.housetory-guidelines-hero-inner {
    max-width: 840px;
}

.housetory-guidelines-hero h1 {
    font-size: clamp(3.4rem, 8vw, 6rem);
    line-height: 1;
    margin-bottom: 24px;
    font-weight: 600;
}

.housetory-guidelines-hero p {
    max-width: 720px;
    margin: 0 auto 34px;
    font-size: 1.22rem;
    line-height: 1.6;
}

.housetory-guidelines-btn {
    display: inline-block;
    padding: 15px 28px;
    background: #56766d;
    color: #fff !important;
    border-radius: 6px;
    text-decoration: none !important;
    font-weight: 700;
}

.housetory-guidelines-btn:hover {
    background: #45635b;
}

.housetory-guidelines-intro {
    max-width: 850px;
    margin: 0 auto;
    padding: 80px 28px 40px;
    text-align: center;
}

.housetory-guidelines-intro h2 {
    font-family: Georgia, serif;
    font-size: clamp(2.2rem, 4vw, 3.6rem);
    line-height: 1.1;
    margin-bottom: 22px;
}

.housetory-guidelines-intro h2::after {
    content: "";
    display: block;
    width: 54px;
    height: 2px;
    background: #b08a4a;
    margin: 18px auto 0;
}

.housetory-guidelines-intro p {
    font-size: 1.18rem;
    line-height: 1.7;
    color: #5f564d;
}

.housetory-guidelines-grid {
    max-width: 1080px;
    margin: 0 auto;
    padding: 30px 28px 90px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.housetory-guidelines-grid article {
    background: #fffaf2;
    border: 1px solid rgba(80, 60, 35, 0.16);
    border-radius: 14px;
    padding: 32px 26px;
    text-align: center;
    box-shadow: 0 10px 26px rgba(50, 38, 25, 0.06);
}

.housetory-guidelines-icon {
    width: 62px;
    height: 62px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: #4f7467;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
}

.housetory-guidelines-grid article:nth-child(2n) .housetory-guidelines-icon {
    background: #b08a4a;
}

.housetory-guidelines-grid h3 {
    font-family: Georgia, serif;
    font-size: 1.45rem;
    margin-bottom: 12px;
}

.housetory-guidelines-grid p {
    color: #5f564d;
    line-height: 1.65;
    margin: 0;
}

.housetory-guidelines-do-dont {
    max-width: 1080px;
    margin: 0 auto 80px;
    padding: 0 28px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
}

.housetory-guidelines-do-dont > div {
    background: #efe7da;
    border-radius: 16px;
    padding: 36px 34px;
    border: 1px solid rgba(80, 60, 35, 0.14);
}

.housetory-guidelines-do-dont h2 {
    font-family: Georgia, serif;
    font-size: 2rem;
    margin-bottom: 18px;
}

.housetory-guidelines-do-dont ul {
    margin: 0;
    padding-left: 20px;
}

.housetory-guidelines-do-dont li {
    margin-bottom: 10px;
    line-height: 1.55;
    color: #4f463d;
}

.housetory-guidelines-note {
    padding: 80px 28px;
    text-align: center;
    background: #fffaf2;
}

.housetory-guidelines-note blockquote {
    max-width: 760px;
    margin: 0 auto;
    font-family: Georgia, serif;
    font-size: clamp(1.8rem, 4vw, 3rem);
    line-height: 1.25;
    color: #3d342c;
}

/* Remove default Joomla article spacing on Contribution Guidelines page */
body:has(.housetory-guidelines-page) #sp-main-body {
    padding-top: 0 !important;
}

body:has(.housetory-guidelines-page) .com-content-article,
body:has(.housetory-guidelines-page) .item-page,
body:has(.housetory-guidelines-page) .article-body,
body:has(.housetory-guidelines-page) .com-content-article__body {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

@media (max-width: 900px) {
    .housetory-guidelines-grid,
    .housetory-guidelines-do-dont {
        grid-template-columns: 1fr;
    }

    .housetory-guidelines-hero {
        min-height: 600px;
        padding: 60px 28px;
    }

    .housetory-guidelines-hero h1 {
        font-size: clamp(3rem, 14vw, 4.8rem);
    }

    .housetory-guidelines-hero p {
        font-size: 1.15rem;
    }
}
/* Fix sticky header overlap on public content pages */
body:has(.housetory-how-page) .housetory-how-intro,
body:has(.housetory-guidelines-page) .housetory-guidelines-intro {
    scroll-margin-top: 120px;
}

/* Give section headings safer breathing room under sticky header */
body:has(.housetory-guidelines-page) .housetory-guidelines-intro {
    padding-top: 110px !important;
}

body:has(.housetory-how-page) .housetory-how-intro {
    padding-top: 110px !important;
}

@media (max-width: 900px) {
    body:has(.housetory-guidelines-page) .housetory-guidelines-intro,
    body:has(.housetory-how-page) .housetory-how-intro {
        padding-top: 90px !important;
    }
}

/* =========================================================
   Housetory - My Contributions Dashboard FINAL override
   itemid-115
   ========================================================= */

html body.itemid-115,
html body.itemid-115 #sp-main-body,
html body.itemid-115 main#sp-main,
html body.itemid-115 #sp-section-1 {
    background: #f7f3ed !important;
}

html body.itemid-115 #sp-main-body {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

html body.itemid-115 main#sp-main {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* Main content width and spacing */
html body.itemid-115 #sp-component {
    max-width: 1120px !important;
    margin: 0 auto !important;
    padding: 28px 24px 90px !important;
}

/* Hide stray empty paragraphs Joomla may insert above the dashboard */
html body.itemid-115 #sp-component > p:empty,
html body.itemid-115 #sp-component .com-content-article > p:empty,
html body.itemid-115 #sp-component .item-page > p:empty {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    height: 0 !important;
}

/* Intro paragraph */
html body.itemid-115 #sp-component > p:not(:empty),
html body.itemid-115 #sp-component .com-content-article > p:not(:empty),
html body.itemid-115 #sp-component .item-page > p:not(:empty) {
    max-width: 820px !important;
    margin: 0 0 34px !important;
    padding: 18px 22px !important;
    border-left: 4px solid #b08a4a !important;
    background: #fffaf2 !important;
    color: #5f564d !important;
    border-radius: 10px !important;
    line-height: 1.6 !important;
}

/* Section headings */
html body.itemid-115 #sp-component h2 {
    font-family: Georgia, serif !important;
    font-size: 2.15rem !important;
    margin: 46px 0 22px !important;
    color: #2f2923 !important;
}

/* Dashboard cards: target the actual visible card boxes */
html body.itemid-115 #sp-component h2 + div > div,
html body.itemid-115 #sp-component .housetory-house-card,
html body.itemid-115 #sp-component .housetory-contrib-card,
html body.itemid-115 #sp-component .contribution-card {
    background: #fffaf2 !important;
    border: 1px solid rgba(80, 60, 35, 0.18) !important;
    border-radius: 16px !important;
    padding: 24px !important;
    box-shadow: 0 12px 30px rgba(50, 38, 25, 0.08) !important;
}

/* Card layout grids */
html body.itemid-115 #sp-component h2 + div {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
    gap: 24px !important;
    margin-bottom: 46px !important;
}

/* Card title text */
html body.itemid-115 #sp-component h3,
html body.itemid-115 #sp-component h4,
html body.itemid-115 #sp-component strong {
    color: #2f2923 !important;
}

/* Published badges */
html body.itemid-115 #sp-component .badge,
html body.itemid-115 #sp-component .status-badge,
html body.itemid-115 #sp-component span[class*="badge"],
html body.itemid-115 #sp-component span[class*="status"] {
    border-radius: 999px !important;
    padding: 5px 10px !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
}

/* Buttons */
html body.itemid-115 #sp-component a,
html body.itemid-115 #sp-component a.btn,
html body.itemid-115 #sp-component a.button,
html body.itemid-115 #sp-component button {
    text-decoration: none !important;
}

html body.itemid-115 #sp-component a.btn,
html body.itemid-115 #sp-component a.button,
html body.itemid-115 #sp-component .btn,
html body.itemid-115 #sp-component button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 13px !important;
    border-radius: 8px !important;
    background: #3d3125 !important;
    color: #fff !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    border: 0 !important;
}

html body.itemid-115 #sp-component a.btn:hover,
html body.itemid-115 #sp-component a.button:hover,
html body.itemid-115 #sp-component .btn:hover,
html body.itemid-115 #sp-component button:hover {
    background: #56766d !important;
    color: #fff !important;
}

/* Mobile */
@media (max-width: 768px) {
    html body.itemid-115 #sp-component {
        padding: 42px 18px 70px !important;
    }

    html body.itemid-115 #sp-component h2 {
        font-size: 1.75rem !important;
    }
}

/* My Contributions top spacing refinement */
html body.itemid-115 #sp-main-body {
    padding-top: 0 !important;
}

html body.itemid-115 #sp-component {
    padding-top: 28px !important;
}

html body.itemid-115 #sp-component > :first-child {
    margin-top: 0 !important;
}

@media (max-width: 768px) {
    html body.itemid-115 #sp-component {
        padding-top: 22px !important;
    }
}


/* =========================================================
   Housetory - My Contributions Summary Cards
   ========================================================= */

html body.itemid-115 .housetory-contrib-dashboard-header {
    margin: 0 0 42px !important;
}

html body.itemid-115 .housetory-contrib-dashboard-header .housetory-search-summary {
    max-width: 820px !important;
    margin: 0 0 26px !important;
    padding: 18px 22px !important;
    border-left: 4px solid #b08a4a !important;
    background: #fffaf2 !important;
    color: #5f564d !important;
    border-radius: 10px !important;
    line-height: 1.6 !important;
}

html body.itemid-115 .housetory-contrib-summary-cards {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 18px !important;
    max-width: 980px !important;
    margin: 0 0 12px !important;
}

html body.itemid-115 .housetory-contrib-summary-card {
    background: #fffaf2 !important;
    border: 1px solid rgba(80, 60, 35, 0.18) !important;
    border-radius: 16px !important;
    padding: 20px 22px !important;
    box-shadow: 0 10px 26px rgba(50, 38, 25, 0.06) !important;
    min-height: 112px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

html body.itemid-115 .housetory-contrib-summary-card strong {
    display: block !important;
    font-family: Georgia, serif !important;
    font-size: 2.35rem !important;
    line-height: 1 !important;
    color: #2f2923 !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
}

html body.itemid-115 .housetory-contrib-summary-card span {
    display: block !important;
    font-size: 0.88rem !important;
    line-height: 1.25 !important;
    color: #6d655c !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

html body.itemid-115 .housetory-summary-total {
    background: #efe7da !important;
}

/* Prevent the generic dashboard card rule from treating summary cards as content cards */
html body.itemid-115 #sp-component .housetory-contrib-summary-cards {
    margin-bottom: 34px !important;
}

@media (max-width: 900px) {
    html body.itemid-115 .housetory-contrib-summary-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 560px) {
    html body.itemid-115 .housetory-contrib-summary-cards {
        grid-template-columns: 1fr !important;
    }

    html body.itemid-115 .housetory-contrib-summary-card {
        min-height: auto !important;
    }
}

/* =========================================================
   Housetory - Mobile header/logo and hero final cleanup
   Replaces older temporary mobile logo force blocks.
   ========================================================= */

@media (max-width: 768px) {
    html,
    body {
        overflow-x: hidden !important;
    }

    /* Keep the mobile header roomy without forcing a desktop layout. */
    #sp-header {
        min-height: 82px !important;
    }

    #sp-header .container,
    #sp-header .container-inner,
    #sp-logo,
    #sp-logo .sp-column {
        min-height: 82px !important;
        display: flex !important;
        align-items: center !important;
    }

    #sp-logo a,
    #sp-logo .logo {
        display: flex !important;
        align-items: center !important;
    }

    /* Mobile logo: use the house-only file in Helix Mobile Logo. */
    #sp-logo img,
    #sp-logo .logo-image,
    #sp-logo .logo-image-phone,
    img.logo-image-phone,
    #sp-header .sp-mobile-logo,
    #sp-header .sp-default-logo {
        height: 60px !important;
        max-height: 60px !important;
        width: auto !important;
        max-width: 92px !important;
        object-fit: contain !important;
    }

    /* Keep the hamburger vertically centred beside the taller mobile logo. */
    #sp-menu,
    #sp-menu .sp-column {
        min-height: 82px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
    }

    /* Homepage hero title: target only the hero, not every h1 site-wide. */
    .hero-section {
        min-height: 66vh !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        box-sizing: border-box !important;
    }

    .hero-inner {
        max-width: 100% !important;
        width: 100% !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        box-sizing: border-box !important;
    }

    .hero-section h1 {
        font-size: clamp(2rem, 9vw, 2.65rem) !important;
        line-height: 1.12 !important;
        max-width: calc(100vw - 32px) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center !important;
        white-space: normal !important;
        overflow-wrap: normal !important;
    }

    .housetory-hero-search input[type="text"] {
        width: min(90vw, 420px) !important;
    }

    .pac-container {
        z-index: 2147483647 !important;
    }
}

/* =========================================================
   Housetory mobile hamburger FINAL visibility/shape fix
   This must stay at the very bottom of custom.css
   ========================================================= */

@media (max-width: 768px) {
    /* Keep the header as logo left / menu right */
    #sp-header .container-inner,
    #sp-header .row {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
    }

    #sp-logo {
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: 130px !important;
        margin-right: auto !important;
    }

    #sp-menu,
    #sp-menu .sp-column {
        flex: 0 0 auto !important;
        margin-left: auto !important;
        min-height: 82px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        text-align: right !important;
    }

    /* Make the clickable hamburger area visible but not boxed */
    #sp-header .offcanvas-toggler,
    #sp-header .offcanvas-toggler-right,
    #sp-header a.offcanvas-toggler {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 52px !important;
        height: 52px !important;
        padding: 0 !important;
        margin: 0 8px 0 auto !important;
        background: transparent !important;
        border: 0 !important;
        outline: none !important;
        box-shadow: none !important;
        color: #111 !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* Restore Helix burger lines as three black horizontal bars */
    #sp-header .burger-icon,
    #sp-header .offcanvas-toggler .burger-icon {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        width: 38px !important;
        height: 38px !important;
        background: transparent !important;
        border: 0 !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    #sp-header .burger-icon > span,
    #sp-header .burger-icon span,
    #sp-header .offcanvas-toggler .burger-icon > span,
    #sp-header .offcanvas-toggler .burger-icon span {
        display: block !important;
        width: 32px !important;
        height: 3px !important;
        min-height: 3px !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #111 !important;
        background-color: #111 !important;
        border: 0 !important;
        border-radius: 2px !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
    }

    #sp-header .offcanvas-toggler:focus,
    #sp-header .offcanvas-toggler:active,
    #sp-header .offcanvas-toggler:hover,
    #sp-header .burger-icon:focus,
    #sp-header .burger-icon:active,
    #sp-header .burger-icon:hover {
        outline: none !important;
        box-shadow: none !important;
        background: transparent !important;
        border: 0 !important;
    }
}

/* =========================================================
   Housetory - Next Build: House photo preview cap + count badge
   ========================================================= */
.housetory-panel-header-with-count {
    align-items: center;
    gap: 12px;
}

.housetory-panel-header-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-left: auto;
}

.housetory-photo-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(120, 95, 65, 0.10);
    color: #5c4a3a;
    font-size: 0.88rem;
    font-weight: 800;
}

.housetory-photo-preview-note {
    margin: -0.15rem 0 0.85rem;
    color: rgba(86, 66, 46, 0.72);
    font-size: 0.92rem;
    font-style: italic;
}

.housetory-photo-strip-preview {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
}

.housetory-photo-strip-preview .housetory-photo-thumb {
    position: relative;
    margin: 0 !important;
}

.housetory-photo-strip-preview .housetory-photo-thumb a {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 8px;
}

.housetory-photo-strip-preview .housetory-photo-thumb img {
    width: 100% !important;
    aspect-ratio: 1 / 0.78;
    height: auto !important;
    object-fit: cover !important;
    display: block;
}

.housetory-photo-thumb-more {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(47, 40, 31, 0.62);
    color: #fffaf4;
    font-size: 1.35rem;
    font-weight: 900;
    letter-spacing: 0.02em;
}

.housetory-photo-thumb-has-more figcaption {
    display: none;
}

@media (max-width: 768px) {
    .housetory-panel-header-actions {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
        margin-left: 0;
    }

    .housetory-photo-strip-preview .housetory-photo-thumb:nth-child(n+7) {
        display: none !important;
    }
}

@media (max-width: 520px) {
    .housetory-photo-strip-preview {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* =========================================================
   Housetory - Street Stories v1
   ========================================================= */

.housetory-street-story-page {
    max-width: 1180px;
    margin: 0 auto;
    padding: 34px 22px 80px;
    color: #2f2923;
}

.housetory-street-hero {
    background: linear-gradient(135deg, #fffaf2 0%, #efe7da 100%);
    border: 1px solid rgba(80, 60, 35, 0.16);
    border-radius: 24px;
    padding: clamp(32px, 5vw, 58px);
    margin-bottom: 28px;
    box-shadow: 0 14px 36px rgba(50, 38, 25, 0.08);
}

.housetory-street-kicker {
    margin: 0 0 10px;
    color: #56766d;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.78rem;
    font-weight: 800;
}

.housetory-street-hero h1 {
    font-family: Georgia, serif;
    font-size: clamp(2.4rem, 5vw, 4.6rem);
    line-height: 1.05;
    margin: 0 0 14px;
}

.housetory-street-location {
    margin: 0 0 18px;
    font-size: 1.12rem;
    color: #5f564d;
}

.housetory-street-badges,
.housetory-street-section-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.housetory-street-badges span,
.housetory-street-section-head span,
.housetory-street-distance,
.housetory-street-story-preview-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 6px 10px;
    background: #fffdfa;
    border: 1px solid rgba(80, 60, 35, 0.14);
    color: #6a5b48;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.housetory-street-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.75fr);
    gap: 24px;
}

.housetory-street-panel {
    background: #fffaf2;
    border: 1px solid rgba(80, 60, 35, 0.16);
    border-radius: 18px;
    padding: 26px;
    box-shadow: 0 10px 28px rgba(50, 38, 25, 0.06);
}

.housetory-street-main-story,
.housetory-street-related-houses,
.housetory-street-same-street,
.housetory-street-nearby-houses,
.housetory-street-map {
    grid-column: 1 / -1;
}

.housetory-street-panel h2 {
    font-family: Georgia, serif;
    font-size: 1.65rem;
    margin: 0 0 16px;
}

.housetory-street-prose {
    font-size: 1.05rem;
    line-height: 1.72;
    color: #3f372f;
}

.housetory-street-prose p:last-child {
    margin-bottom: 0;
}

.housetory-street-details dl {
    margin: 0;
}

.housetory-street-details dt {
    margin: 14px 0 3px;
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #8a7f73;
    font-weight: 800;
}

.housetory-street-details dd {
    margin: 0;
    color: #3f372f;
    line-height: 1.45;
}

.housetory-street-house-grid,
.housetory-street-story-preview-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}

.housetory-street-house-card,
.housetory-street-story-preview-card {
    background: #fffdfa;
    border: 1px solid rgba(80, 60, 35, 0.14);
    border-radius: 14px;
    padding: 18px;
    box-shadow: 0 8px 18px rgba(50, 38, 25, 0.04);
}

.housetory-street-house-card h3,
.housetory-street-story-preview-card h3 {
    font-family: Georgia, serif;
    font-size: 1.12rem;
    line-height: 1.25;
    margin: 0 0 8px;
}

.housetory-street-house-card a,
.housetory-street-story-preview-card a {
    color: #2f2923;
    text-decoration: none;
}

.housetory-street-house-card a:hover,
.housetory-street-story-preview-card a:hover {
    color: #56766d;
    text-decoration: underline;
}

.housetory-street-house-card p,
.housetory-street-story-preview-card p {
    color: #6d655c;
    line-height: 1.45;
    margin: 0 0 10px;
}

.housetory-street-story-preview-card small {
    display: block;
    color: #8a7f73;
    font-weight: 700;
}

.housetory-street-section-head {
    justify-content: space-between;
    margin-bottom: 16px;
}

.housetory-street-section-head h2 {
    margin: 0;
}

.housetory-house-street-stories .housetory-street-story-preview-list {
    grid-template-columns: 1fr;
}

.housetory-house-street-stories .housetory-street-story-preview-card {
    padding: 16px;
}

.housetory-house-street-stories .housetory-street-story-preview-card h3 {
    margin-top: 8px;
}

.housetory-map-embed iframe,
.housetory-street-map iframe {
    width: 100%;
    min-height: 280px;
    border: 0;
    border-radius: 14px;
}

.housetory-street-footer-note {
    margin-top: 24px;
    text-align: center;
    color: #8a7f73;
    font-size: 0.9rem;
}

@media (max-width: 900px) {
    .housetory-street-layout {
        grid-template-columns: 1fr;
    }

    .housetory-street-story-page {
        padding: 22px 16px 60px;
    }

    .housetory-street-panel {
        padding: 20px;
    }
}

/* =========================================================
   Housetory homepage - FINAL How steps card override
   Keep this as the last block in custom.css
   ========================================================= */
html body .housetory-home-about-compact section.housetory-home-how,
html body .housetory-home-about-compact .housetory-home-how {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 14px !important;
    max-width: 1120px !important;
    margin: 34px auto 24px !important;
    padding: 0 20px !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-weight: 400 !important;
    color: inherit !important;
}

html body .housetory-home-about-compact .housetory-home-how-step,
html body .housetory-home-about-compact section.housetory-home-how > div {
    display: block !important;
    background: #fffaf2 !important;
    border: 1px solid rgba(80, 60, 35, .16) !important;
    border-radius: 18px !important;
    padding: 18px 16px !important;
    text-align: center !important;
    box-shadow: 0 8px 24px rgba(50, 38, 25, .06) !important;
}

html body .housetory-home-about-compact .housetory-home-how-step strong,
html body .housetory-home-about-compact section.housetory-home-how > div strong {
    display: block !important;
    margin: 0 0 8px !important;
    color: #3d3125 !important;
    font-size: 1.05rem !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
}

html body .housetory-home-about-compact .housetory-home-how-step span,
html body .housetory-home-about-compact section.housetory-home-how > div span {
    display: block !important;
    margin: 0 !important;
    color: #6f655a !important;
    font-size: .92rem !important;
    line-height: 1.45 !important;
    font-weight: 400 !important;
}

html body .housetory-home-about-compact .housetory-home-how span::after,
html body .housetory-home-about-compact .housetory-home-how span:not(:last-child)::after {
    content: "" !important;
    display: none !important;
    margin: 0 !important;
}

@media (max-width: 900px) {
    html body .housetory-home-about-compact section.housetory-home-how,
    html body .housetory-home-about-compact .housetory-home-how {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 560px) {
    html body .housetory-home-about-compact section.housetory-home-how,
    html body .housetory-home-about-compact .housetory-home-how {
        grid-template-columns: 1fr !important;
    }
}
/* Homepage How cards - replacement for old pill layout */
.housetory-home-how-cards {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 14px !important;
    max-width: 1120px !important;
    margin: 34px auto 24px !important;
    padding: 0 20px !important;
}

.housetory-home-how-cards article {
    display: block !important;
    background: #fffaf2 !important;
    border: 1px solid rgba(80, 60, 35, .16) !important;
    border-radius: 18px !important;
    padding: 18px 16px !important;
    text-align: center !important;
    box-shadow: 0 8px 24px rgba(50, 38, 25, .06) !important;
}

.housetory-home-how-cards h3 {
    margin: 0 0 8px !important;
    color: #3d3125 !important;
    font-size: 1.05rem !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
}

.housetory-home-how-cards p {
    margin: 0 !important;
    color: #6f655a !important;
    font-size: .92rem !important;
    line-height: 1.45 !important;
    font-weight: 400 !important;
}

@media (max-width: 900px) {
    .housetory-home-how-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 560px) {
    .housetory-home-how-cards {
        grid-template-columns: 1fr !important;
    }
}
/* Street Stories landing page intro */
.housetory-street-stories-landing-hero {
    max-width: 1040px;
    margin: 44px auto 34px;
    padding: 0 22px;
}

.housetory-street-stories-landing-inner {
    background: linear-gradient(135deg, #fffaf2 0%, #efe7da 100%);
    border: 1px solid rgba(80, 60, 35, 0.16);
    border-radius: 24px;
    padding: clamp(34px, 5vw, 58px);
    text-align: center;
    box-shadow: 0 14px 36px rgba(50, 38, 25, 0.08);
}

.housetory-street-stories-kicker {
    margin: 0 0 10px;
    color: #56766d;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.78rem;
    font-weight: 800;
}

.housetory-street-stories-landing-inner h1 {
    font-family: Georgia, serif;
    font-size: clamp(2.2rem, 5vw, 4rem);
    line-height: 1.08;
    margin: 0 0 16px;
    color: #2f2923;
}

.housetory-street-stories-landing-inner p {
    max-width: 760px;
    margin: 0 auto 24px;
    color: #5f564d;
    font-size: 1.05rem;
    line-height: 1.65;
}

.housetory-street-stories-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
}

.housetory-street-stories-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 20px;
    border-radius: 999px;
    font-weight: 800;
    text-decoration: none !important;
}

.housetory-street-stories-btn.primary {
    background: #56766d;
    color: #fff !important;
}

.housetory-street-stories-btn.secondary {
    background: #fffaf2;
    color: #3d3125 !important;
    border: 1px solid rgba(80, 60, 35, 0.22);
}

.housetory-street-stories-btn:hover {
    transform: translateY(-1px);
    opacity: 0.96;
}

/* =========================================================
   Housetory - Street Stories landing FINAL cleanup
   Keep this block at the very bottom of custom.css
   ========================================================= */

/* Hide the Street Stories landing intro on individual Street Story article pages.
   Joomla may reuse Itemid 139 for articles, so target view-article as well as
   the inline intro section used in the Custom module. */
html body.view-article .housetory-street-stories-landing-hero,
html body.com-content.view-article .housetory-street-stories-landing-hero,
html body.view-article #sp-title section[style*="max-width:1040px"],
html body.view-article #sp-title section[style*="max-width: 1040px"],
html body.com-content.view-article #sp-title section[style*="max-width:1040px"],
html body.com-content.view-article #sp-title section[style*="max-width: 1040px"] {
    display: none !important;
}

/* Street Stories browse page is Itemid 139. Tighten the title/module area. */
html body.itemid-139 #sp-title,
html body.itemid-139 #sp-title .container,
html body.itemid-139 #sp-title .container-inner,
html body.itemid-139 #sp-title .row,
html body.itemid-139 #sp-title .sp-column,
html body.itemid-139 #sp-title .sp-module,
html body.itemid-139 #sp-title .custom {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

html body.itemid-139 #sp-title {
    padding-top: 20px !important;
    padding-bottom: 4px !important;
}

/* Tighten the Street Stories intro module itself, whether it has the class or inline styling. */
html body.itemid-139 .housetory-street-stories-landing-hero,
html body.itemid-139 #sp-title section[style*="max-width:1040px"],
html body.itemid-139 #sp-title section[style*="max-width: 1040px"] {
    margin-top: 18px !important;
    margin-bottom: 6px !important;
}

/* Remove extra Joomla/Helix spacing before the Street Stories component/map. */
html body.itemid-139 #sp-main-body,
html body.itemid-139 main#sp-main,
html body.itemid-139 #sp-component,
html body.itemid-139 #sp-component .sp-column,
html body.itemid-139 #sp-component .com-content-category-blog,
html body.itemid-139 #sp-component .blog,
html body.itemid-139 #sp-component .item-page {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* Pull the map/list closer to the intro. */
html body.itemid-139 .housetory-street-story-page {
    padding-top: 6px !important;
    margin-top: 0 !important;
}

/* Centre and narrow the Street Stories map and list area. */
html body.itemid-139 .housetory-street-story-page,
html body.itemid-139 .housetory-street-story-list,
html body.itemid-139 .housetory-street-story-grid,
html body.itemid-139 .housetory-house-grid,
html body.itemid-139 .housetory-map-embed,
html body.itemid-139 .housetory-street-map,
html body.itemid-139 .housetory-street-map-wrapper {
    max-width: 980px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Google maps may render as an iframe or a div. Keep both contained. */
html body.itemid-139 .housetory-map-embed iframe,
html body.itemid-139 .housetory-street-map iframe,
html body.itemid-139 iframe[src*="google"],
html body.itemid-139 iframe[src*="maps"],
html body.itemid-139 div[id*="map"] {
    max-width: 980px !important;
    width: 100% !important;
    min-height: 300px !important;
    border-radius: 14px !important;
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    overflow: hidden !important;
}

/* Keep the story cards aligned below the narrowed map. */
html body.itemid-139 .housetory-street-story-page .housetory-house-grid,
html body.itemid-139 .housetory-street-story-page .housetory-street-story-grid {
    max-width: 980px !important;
}

/* Confirm this live file is the correct updated Housetory CSS. */
html body::after {
    content: "";
}

@media (max-width: 768px) {
    html body.itemid-139 #sp-title {
        padding-top: 16px !important;
        padding-bottom: 4px !important;
    }

    html body.itemid-139 .housetory-street-stories-landing-hero,
    html body.itemid-139 #sp-title section[style*="max-width:1040px"],
    html body.itemid-139 #sp-title section[style*="max-width: 1040px"] {
        margin-top: 16px !important;
        margin-bottom: 6px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    html body.itemid-139 .housetory-map-embed iframe,
    html body.itemid-139 .housetory-street-map iframe,
    html body.itemid-139 iframe[src*="google"],
    html body.itemid-139 iframe[src*="maps"],
    html body.itemid-139 div[id*="map"] {
        min-height: 260px !important;
        max-width: calc(100vw - 32px) !important;
    }
}

/* Slightly reduce mobile top bar height */
@media (max-width: 768px) {
    #sp-top-bar {
        font-size: 0.82rem !important;
    }

    #sp-top-bar .container-inner,
    #sp-top-bar .sp-column {
        padding-top: 4px !important;
        padding-bottom: 4px !important;
    }

    #sp-top-bar .social-icons {
        margin-bottom: 2px !important;
    }
}

/* =========================================================
   Housetory - Login page horizontal wider controls v4
   Keep this block at the very bottom of custom.css
   ========================================================= */

/*
   "Bigger" here means longer/wider horizontally, not taller.
   Scoped to the login component only so it does not affect the header,
   social icons, top menu, dropdowns, or offcanvas menu.
*/

html body.view-login #sp-main-body,
html body.com-users.view-login #sp-main-body,
html body.itemid-130 #sp-main-body {
    background: #f7f3ed !important;
    padding-top: 52px !important;
    padding-bottom: 86px !important;
}

html body.view-login #sp-component,
html body.com-users.view-login #sp-component,
html body.itemid-130 #sp-component {
    max-width: 920px !important;
    margin: 0 auto !important;
    padding: 0 24px !important;
}

html body.view-login #sp-component .login,
html body.com-users.view-login #sp-component .login,
html body.itemid-130 #sp-component .login,
html body.view-login #sp-component .com-users-login,
html body.com-users.view-login #sp-component .com-users-login,
html body.itemid-130 #sp-component .com-users-login {
    width: 100% !important;
    max-width: 760px !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    padding: 42px 58px !important;
    background: linear-gradient(135deg, #fffaf2 0%, #efe7da 100%) !important;
    border: 1px solid rgba(80, 60, 35, 0.16) !important;
    border-radius: 22px !important;
    box-shadow: 0 16px 38px rgba(50, 38, 25, 0.08) !important;
    box-sizing: border-box !important;
}

/* Horizontal width target: make controls longer/wider. */
html body #sp-component .login form,
html body #sp-component .com-users-login form,
html body #sp-component form[action*="login"],
html body #sp-component form[action*="user.login"] {
    width: 520px !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* Reset Joomla/Bootstrap field wrappers inside the login form only. */
html body #sp-component .login .control-group,
html body #sp-component .login .form-group,
html body #sp-component .login .mb-3,
html body #sp-component .login .control-label,
html body #sp-component .login .controls,
html body #sp-component .com-users-login .control-group,
html body #sp-component .com-users-login .form-group,
html body #sp-component .com-users-login .mb-3,
html body #sp-component .com-users-login .control-label,
html body #sp-component .com-users-login .controls,
html body #sp-component form[action*="login"] .control-group,
html body #sp-component form[action*="login"] .form-group,
html body #sp-component form[action*="login"] .mb-3,
html body #sp-component form[action*="login"] .control-label,
html body #sp-component form[action*="login"] .controls {
    float: none !important;
    clear: both !important;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
}

html body #sp-component .login .control-group,
html body #sp-component .login .form-group,
html body #sp-component .login .mb-3,
html body #sp-component .com-users-login .control-group,
html body #sp-component .com-users-login .form-group,
html body #sp-component .com-users-login .mb-3,
html body #sp-component form[action*="login"] .control-group,
html body #sp-component form[action*="login"] .form-group,
html body #sp-component form[action*="login"] .mb-3 {
    margin-bottom: 18px !important;
}

/* Labels */
html body #sp-component .login label,
html body #sp-component .com-users-login label,
html body #sp-component form[action*="login"] label {
    display: block !important;
    width: 100% !important;
    margin: 0 0 7px !important;
    color: #3d3125 !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
}

/* Longer/wider inputs, same sensible height. */
html body #sp-component .login input[type="text"],
html body #sp-component .login input[type="password"],
html body #sp-component .login input[type="email"],
html body #sp-component .com-users-login input[type="text"],
html body #sp-component .com-users-login input[type="password"],
html body #sp-component .com-users-login input[type="email"],
html body #sp-component form[action*="login"] input[type="text"],
html body #sp-component form[action*="login"] input[type="password"],
html body #sp-component form[action*="login"] input[type="email"],
html body #sp-component form[action*="login"] .form-control {
    display: block !important;
    width: 520px !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 50px !important;
    padding: 0 15px !important;
    border: 1px solid rgba(80, 60, 35, 0.24) !important;
    border-radius: 10px !important;
    background: #fffdfa !important;
    color: #2f2923 !important;
    font-size: 1rem !important;
    box-sizing: border-box !important;
}

/* Password field + eye button stays one horizontal control. */
html body #sp-component .login .input-group,
html body #sp-component .com-users-login .input-group,
html body #sp-component form[action*="login"] .input-group {
    display: flex !important;
    align-items: stretch !important;
    flex-wrap: nowrap !important;
    width: 520px !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

html body #sp-component .login .input-group input,
html body #sp-component .com-users-login .input-group input,
html body #sp-component form[action*="login"] .input-group input {
    flex: 1 1 auto !important;
    width: 1% !important;
    min-width: 0 !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

html body #sp-component .login .input-group .btn,
html body #sp-component .login .input-group button,
html body #sp-component .com-users-login .input-group .btn,
html body #sp-component .com-users-login .input-group button,
html body #sp-component form[action*="login"] .input-group .btn,
html body #sp-component form[action*="login"] .input-group button {
    flex: 0 0 54px !important;
    width: 54px !important;
    min-width: 54px !important;
    height: 50px !important;
    min-height: 50px !important;
    border-radius: 0 10px 10px 0 !important;
    border: 1px solid rgba(80, 60, 35, 0.24) !important;
    border-left: 0 !important;
    background: #f7f3ed !important;
    color: #2f2923 !important;
    padding: 0 !important;
}

/* Remember me */
html body #sp-component .login .form-check,
html body #sp-component .com-users-login .form-check,
html body #sp-component form[action*="login"] .form-check {
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    width: 520px !important;
    max-width: 100% !important;
    margin: 4px auto 18px !important;
    padding-left: 0 !important;
}

html body #sp-component .login input[type="checkbox"],
html body #sp-component .com-users-login input[type="checkbox"],
html body #sp-component form[action*="login"] input[type="checkbox"] {
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
}

/* Longer/wider buttons, not taller. */
html body #sp-component .login button,
html body #sp-component .login .btn,
html body #sp-component .com-users-login button,
html body #sp-component .com-users-login .btn,
html body #sp-component form[action*="login"] button,
html body #sp-component form[action*="login"] .btn {
    width: 520px !important;
    max-width: 100% !important;
    min-height: 50px !important;
    margin: 0 auto 12px !important;
    border-radius: 10px !important;
    font-size: 1rem !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    box-sizing: border-box !important;
    white-space: normal !important;
}

html body #sp-component .login .btn-primary,
html body #sp-component .login button[type="submit"],
html body #sp-component .com-users-login .btn-primary,
html body #sp-component .com-users-login button[type="submit"],
html body #sp-component form[action*="login"] .btn-primary,
html body #sp-component form[action*="login"] button[type="submit"] {
    background: #56766d !important;
    border-color: #56766d !important;
    color: #fff !important;
}

html body #sp-component .login .btn-secondary,
html body #sp-component .com-users-login .btn-secondary,
html body #sp-component form[action*="login"] .btn-secondary {
    background: #6d747b !important;
    border-color: #6d747b !important;
    color: #fff !important;
}

/* The three bottom choices as larger horizontal buttons. */
html body #sp-component .login ul,
html body #sp-component .login .list-group,
html body #sp-component .com-users-login ul,
html body #sp-component .com-users-login .list-group,
html body #sp-component form[action*="login"] ul,
html body #sp-component form[action*="login"] .list-group {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 9px !important;
    width: 520px !important;
    max-width: 100% !important;
    margin: 18px auto 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

html body #sp-component .login ul li,
html body #sp-component .login .list-group-item,
html body #sp-component .com-users-login ul li,
html body #sp-component .com-users-login .list-group-item,
html body #sp-component form[action*="login"] ul li,
html body #sp-component form[action*="login"] .list-group-item {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

html body #sp-component .login ul li a,
html body #sp-component .login .list-group-item a,
html body #sp-component .com-users-login ul li a,
html body #sp-component .com-users-login .list-group-item a,
html body #sp-component form[action*="login"] ul li a,
html body #sp-component form[action*="login"] .list-group-item a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 50px !important;
    padding: 12px 16px !important;
    border: 1px solid rgba(80, 60, 35, 0.18) !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, 0.62) !important;
    color: #3d3125 !important;
    text-align: center !important;
    text-decoration: none !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    box-sizing: border-box !important;
}

html body #sp-component .login ul li a:hover,
html body #sp-component .login .list-group-item a:hover,
html body #sp-component .com-users-login ul li a:hover,
html body #sp-component .com-users-login .list-group-item a:hover,
html body #sp-component form[action*="login"] ul li a:hover,
html body #sp-component form[action*="login"] .list-group-item a:hover {
    background: #fffdfa !important;
    color: #56766d !important;
    border-color: rgba(86, 118, 109, 0.32) !important;
}

/* Mobile */
@media (max-width: 640px) {
    html body.view-login #sp-component,
    html body.com-users.view-login #sp-component,
    html body.itemid-130 #sp-component {
        padding-left: 18px !important;
        padding-right: 18px !important;
    }

    html body.view-login #sp-component .login,
    html body.com-users.view-login #sp-component .login,
    html body.itemid-130 #sp-component .login,
    html body.view-login #sp-component .com-users-login,
    html body.com-users.view-login #sp-component .com-users-login,
    html body.itemid-130 #sp-component .com-users-login {
        padding: 30px 22px !important;
        border-radius: 18px !important;
    }

    html body #sp-component .login form,
    html body #sp-component .com-users-login form,
    html body #sp-component form[action*="login"],
    html body #sp-component .login input[type="text"],
    html body #sp-component .login input[type="password"],
    html body #sp-component .login input[type="email"],
    html body #sp-component .login .input-group,
    html body #sp-component .login .form-check,
    html body #sp-component .login button,
    html body #sp-component .login .btn,
    html body #sp-component .login ul,
    html body #sp-component .login .list-group,
    html body #sp-component .com-users-login input[type="text"],
    html body #sp-component .com-users-login input[type="password"],
    html body #sp-component .com-users-login input[type="email"],
    html body #sp-component .com-users-login .input-group,
    html body #sp-component .com-users-login .form-check,
    html body #sp-component .com-users-login button,
    html body #sp-component .com-users-login .btn,
    html body #sp-component .com-users-login ul,
    html body #sp-component .com-users-login .list-group {
        width: 100% !important;
    }
}

/* =========================================================
   Housetory - Login bottom account choices final override
   Keep this block at the very bottom of custom.css
   ========================================================= */

/*
   The login inputs/buttons are already good.
   This final override only restores the three account-help links as larger,
   clearly defined buttons: forgot password, forgot username, create account.
*/

html body.view-login #sp-component .login ul,
html body.com-users.view-login #sp-component .login ul,
html body.itemid-130 #sp-component .login ul,
html body.view-login #sp-component .login .list-group,
html body.com-users.view-login #sp-component .login .list-group,
html body.itemid-130 #sp-component .login .list-group,
html body.view-login #sp-component .com-users-login ul,
html body.com-users.view-login #sp-component .com-users-login ul,
html body.itemid-130 #sp-component .com-users-login ul,
html body.view-login #sp-component .com-users-login .list-group,
html body.com-users.view-login #sp-component .com-users-login .list-group,
html body.itemid-130 #sp-component .com-users-login .list-group {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: 520px !important;
    max-width: 100% !important;
    margin: 20px auto 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

html body.view-login #sp-component .login ul li,
html body.com-users.view-login #sp-component .login ul li,
html body.itemid-130 #sp-component .login ul li,
html body.view-login #sp-component .login .list-group-item,
html body.com-users.view-login #sp-component .login .list-group-item,
html body.itemid-130 #sp-component .login .list-group-item,
html body.view-login #sp-component .com-users-login ul li,
html body.com-users.view-login #sp-component .com-users-login ul li,
html body.itemid-130 #sp-component .com-users-login ul li,
html body.view-login #sp-component .com-users-login .list-group-item,
html body.com-users.view-login #sp-component .com-users-login .list-group-item,
html body.itemid-130 #sp-component .com-users-login .list-group-item {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

html body.view-login #sp-component .login ul li a,
html body.com-users.view-login #sp-component .login ul li a,
html body.itemid-130 #sp-component .login ul li a,
html body.view-login #sp-component .login .list-group-item a,
html body.com-users.view-login #sp-component .login .list-group-item a,
html body.itemid-130 #sp-component .login .list-group-item a,
html body.view-login #sp-component .com-users-login ul li a,
html body.com-users.view-login #sp-component .com-users-login ul li a,
html body.itemid-130 #sp-component .com-users-login ul li a,
html body.view-login #sp-component .com-users-login .list-group-item a,
html body.com-users.view-login #sp-component .com-users-login .list-group-item a,
html body.itemid-130 #sp-component .com-users-login .list-group-item a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 52px !important;
    padding: 13px 18px !important;
    border: 1px solid rgba(80, 60, 35, 0.20) !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.68) !important;
    color: #3d3125 !important;
    text-align: center !important;
    text-decoration: none !important;
    font-size: 0.98rem !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    box-sizing: border-box !important;
    box-shadow: 0 4px 12px rgba(50, 38, 25, 0.04) !important;
}

html body.view-login #sp-component .login ul li a:hover,
html body.com-users.view-login #sp-component .login ul li a:hover,
html body.itemid-130 #sp-component .login ul li a:hover,
html body.view-login #sp-component .login .list-group-item a:hover,
html body.com-users.view-login #sp-component .login .list-group-item a:hover,
html body.itemid-130 #sp-component .login .list-group-item a:hover,
html body.view-login #sp-component .com-users-login ul li a:hover,
html body.com-users.view-login #sp-component .com-users-login ul li a:hover,
html body.itemid-130 #sp-component .com-users-login ul li a:hover,
html body.view-login #sp-component .com-users-login .list-group-item a:hover,
html body.com-users.view-login #sp-component .com-users-login .list-group-item a:hover,
html body.itemid-130 #sp-component .com-users-login .list-group-item a:hover {
    background: #fffdfa !important;
    color: #56766d !important;
    border-color: rgba(86, 118, 109, 0.34) !important;
    box-shadow: 0 6px 16px rgba(50, 38, 25, 0.07) !important;
}

@media (max-width: 640px) {
    html body.view-login #sp-component .login ul,
    html body.com-users.view-login #sp-component .login ul,
    html body.itemid-130 #sp-component .login ul,
    html body.view-login #sp-component .login .list-group,
    html body.com-users.view-login #sp-component .login .list-group,
    html body.itemid-130 #sp-component .login .list-group,
    html body.view-login #sp-component .com-users-login ul,
    html body.com-users.view-login #sp-component .com-users-login ul,
    html body.itemid-130 #sp-component .com-users-login ul,
    html body.view-login #sp-component .com-users-login .list-group,
    html body.com-users.view-login #sp-component .com-users-login .list-group,
    html body.itemid-130 #sp-component .com-users-login .list-group {
        width: 100% !important;
    }
}
/* =========================================================
   Housetory - Homepage Learn More button centring
   ========================================================= */

.housetory-home-learn {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    margin: 28px auto 0 !important;
    text-align: center !important;
}

.housetory-home-learn .housetory-about-btn {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* =========================================================
   Housetory - HOME MOBILE CARD STACK HARD OVERRIDE v53
   Keep this as the LAST block in custom.css
   ========================================================= */

/*
   If the home cards stay in skinny side-by-side columns on mobile, the earlier
   media-query rules are either not matching the real rendered elements or are
   being beaten by another rule. This hard override targets the live homepage
   markup directly and forces the card rows to stack vertically on tablet/mobile.

   It deliberately covers:
   - .housetory-home-cards
   - .housetory-home-how-cards
   - older .housetory-home-how fallbacks
*/

@media only screen and (max-width: 1200px) {
    html body .housetory-home-about-compact {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        padding-left: 18px !important;
        padding-right: 18px !important;
        box-sizing: border-box !important;
    }

    html body .housetory-home-about-compact .housetory-home-cards,
    html body .housetory-home-about-compact .housetory-home-how-cards,
    html body .housetory-home-about-compact .housetory-home-how {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 16px !important;
        width: 100% !important;
        max-width: 430px !important;
        min-width: 0 !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
        grid-template-columns: none !important;
        grid-auto-columns: auto !important;
        grid-auto-flow: row !important;
        column-count: auto !important;
        overflow: visible !important;
        transform: none !important;
    }

    html body .housetory-home-about-compact .housetory-home-cards > *,
    html body .housetory-home-about-compact .housetory-home-how-cards > *,
    html body .housetory-home-about-compact .housetory-home-how > * {
        flex: 0 0 auto !important;
        display: block !important;
        float: none !important;
        clear: both !important;
        width: 100% !important;
        max-width: 430px !important;
        min-width: 0 !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
        transform: none !important;
        position: relative !important;
        left: auto !important;
        right: auto !important;
        overflow: visible !important;
    }

    html body .housetory-home-about-compact .housetory-home-cards article,
    html body .housetory-home-about-compact .housetory-home-how-cards article,
    html body .housetory-home-about-compact .housetory-home-how-step,
    html body .housetory-home-about-compact section.housetory-home-how > div {
        background: #fffaf2 !important;
        border: 1px solid rgba(80, 60, 35, .16) !important;
        border-radius: 18px !important;
        padding: 22px 18px !important;
        text-align: center !important;
        box-shadow: 0 8px 24px rgba(50, 38, 25, .06) !important;
    }

    html body .housetory-home-about-compact .housetory-home-cards h3,
    html body .housetory-home-about-compact .housetory-home-cards p,
    html body .housetory-home-about-compact .housetory-home-how-cards h3,
    html body .housetory-home-about-compact .housetory-home-how-cards p,
    html body .housetory-home-about-compact .housetory-home-how-step strong,
    html body .housetory-home-about-compact .housetory-home-how-step span,
    html body .housetory-home-about-compact section.housetory-home-how > div strong,
    html body .housetory-home-about-compact section.housetory-home-how > div span {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        text-align: center !important;
        white-space: normal !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
        hyphens: none !important;
    }

    html body .housetory-home-learn {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        max-width: 430px !important;
        margin: 28px auto 0 !important;
        padding: 0 !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }

    html body .housetory-home-learn .housetory-about-btn {
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* =========================================================
   Housetory - User Guide landing module
   Module: Housetory User Guide Landing
   Article shortcode: {loadmoduleid 121}
   ========================================================= */

/* Main page shell */
.housetory-user-guide-page,
#mod-custom121 .housetory-user-guide-page,
#Mod121 .housetory-user-guide-page {
    max-width: 1180px !important;
    margin: 0 auto !important;
    padding: 36px 22px 86px !important;
    color: #2f2923 !important;
    box-sizing: border-box !important;
}

.housetory-user-guide-page *,
.housetory-user-guide-page *::before,
.housetory-user-guide-page *::after {
    box-sizing: border-box !important;
}

/* Hero */
.housetory-user-guide-hero {
    display: block !important;
    width: 100% !important;
    background: linear-gradient(135deg, #fffaf2 0%, #efe7da 100%) !important;
    border: 1px solid rgba(80, 60, 35, 0.16) !important;
    border-radius: 26px !important;
    padding: clamp(36px, 5vw, 64px) !important;
    margin: 0 0 34px !important;
    box-shadow: 0 16px 38px rgba(50, 38, 25, 0.08) !important;
    text-align: center !important;
}

.housetory-user-guide-page .housetory-kicker,
.housetory-user-guide-hero .housetory-kicker {
    display: block !important;
    margin: 0 0 12px !important;
    color: #56766d !important;
    text-transform: uppercase !important;
    letter-spacing: 0.16em !important;
    font-size: 0.78rem !important;
    font-weight: 800 !important;
}

.housetory-user-guide-hero h1 {
    font-family: Georgia, serif !important;
    font-size: clamp(2.6rem, 5vw, 4.8rem) !important;
    line-height: 1.05 !important;
    margin: 0 0 18px !important;
    color: #2f2923 !important;
}

.housetory-user-guide-hero p {
    max-width: 760px !important;
    margin: 0 auto !important;
    color: #5f564d !important;
    font-size: 1.1rem !important;
    line-height: 1.65 !important;
}

/* Intro / review / extra links */
.housetory-user-guide-intro,
.housetory-user-guide-review,
.housetory-user-guide-links {
    max-width: 860px !important;
    margin: 0 auto 34px !important;
    text-align: center !important;
}

.housetory-user-guide-intro h2,
.housetory-user-guide-review h2,
.housetory-user-guide-links h2 {
    font-family: Georgia, serif !important;
    font-size: clamp(1.9rem, 3vw, 2.6rem) !important;
    line-height: 1.12 !important;
    margin: 0 0 14px !important;
    color: #2f2923 !important;
}

.housetory-user-guide-intro p,
.housetory-user-guide-review p,
.housetory-user-guide-links p {
    color: #5f564d !important;
    font-size: 1.05rem !important;
    line-height: 1.65 !important;
    margin: 0 !important;
}

/* Guide cards */
.housetory-guide-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 22px !important;
    width: 100% !important;
    margin: 38px 0 48px !important;
    padding: 0 !important;
}

.housetory-guide-card,
.housetory-guide-grid > article,
.housetory-guide-grid > div {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
    background: #fffaf2 !important;
    border: 1px solid rgba(80, 60, 35, 0.16) !important;
    border-radius: 18px !important;
    padding: 26px 24px !important;
    box-shadow: 0 10px 28px rgba(50, 38, 25, 0.06) !important;
}

.housetory-guide-card h3,
.housetory-guide-grid > article h3,
.housetory-guide-grid > div h3 {
    font-family: Georgia, serif !important;
    font-size: 1.35rem !important;
    line-height: 1.22 !important;
    margin: 0 0 12px !important;
    color: #2f2923 !important;
}

.housetory-guide-card p,
.housetory-guide-grid > article p,
.housetory-guide-grid > div p {
    color: #5f564d !important;
    line-height: 1.58 !important;
    margin: 0 0 20px !important;
}

/* Buttons */
.housetory-guide-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-top: auto !important;
    min-height: 42px !important;
    padding: 0 16px !important;
    border-radius: 999px !important;
    background: #56766d !important;
    color: #fff !important;
    text-decoration: none !important;
    font-weight: 800 !important;
    font-size: 0.92rem !important;
    line-height: 1.2 !important;
    text-align: center !important;
}

.housetory-guide-btn:hover,
.housetory-guide-btn:focus {
    background: #45635b !important;
    color: #fff !important;
    text-decoration: none !important;
}

/* Bottom link row */
.housetory-guide-link-row {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 12px !important;
    margin-top: 18px !important;
}

.housetory-guide-link-row a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 42px !important;
    padding: 0 16px !important;
    border-radius: 999px !important;
    background: #fffaf2 !important;
    border: 1px solid rgba(80, 60, 35, 0.18) !important;
    color: #3d3125 !important;
    text-decoration: none !important;
    font-weight: 800 !important;
}

.housetory-guide-link-row a:hover,
.housetory-guide-link-row a:focus {
    color: #56766d !important;
    border-color: rgba(86, 118, 109, 0.34) !important;
    text-decoration: none !important;
}

/* Reduce default Joomla/Helix spacing only when this guide is present */
body:has(.housetory-user-guide-page) #sp-main-body {
    padding-top: 0 !important;
}

body:has(.housetory-user-guide-page) #sp-component,
body:has(.housetory-user-guide-page) .com-content-article,
body:has(.housetory-user-guide-page) .item-page,
body:has(.housetory-user-guide-page) .article-body,
body:has(.housetory-user-guide-page) .com-content-article__body,
body:has(.housetory-user-guide-page) .sp-module,
body:has(.housetory-user-guide-page) .custom,
body:has(.housetory-user-guide-page) .mod-custom {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

@media (max-width: 1000px) {
    .housetory-guide-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 620px) {
    .housetory-user-guide-page {
        padding: 24px 16px 64px !important;
    }

    .housetory-user-guide-hero {
        padding: 34px 24px !important;
    }

    .housetory-guide-grid {
        grid-template-columns: 1fr !important;
    }
}

/* =========================================================
   Housetory - Mobile offcanvas menu FINAL visibility fix v51
   Keep this as the LAST block in custom.css.
   Purpose:
   - Hide the Helix offcanvas menu on page load.
   - Do NOT treat body.offcanvas-init as an open state.
   - Show the menu only after the hamburger actually opens it.
   ========================================================= */

@media (max-width: 991px) {
    html,
    body {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    /*
       Helix commonly leaves body.offcanvas-init on the page at all times.
       That class only means the offcanvas system exists; it does NOT mean
       the menu is open.
    */
    body.offcanvas-init:not(.offcanvas-active):not(.offcanvas-open):not(.menu-open) .offcanvas-menu,
    body:not(.offcanvas-active):not(.offcanvas-open):not(.menu-open) .offcanvas-menu {
        transform: translateX(105%) !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /*
       Prevent the page canvas/header from being pushed sideways.
       This is safe both before and after the menu opens.
    */
    body.offcanvas-init .body-wrapper,
    body.offcanvas-init .body-innerwrapper,
    body.offcanvas-init .site,
    body.offcanvas-init #sp-page-builder,
    body.offcanvas-init #sp-main-body,
    body.offcanvas-init #sp-header,
    body.offcanvas-init #sp-top-bar,
    body.offcanvas-active .body-wrapper,
    body.offcanvas-active .body-innerwrapper,
    body.offcanvas-active .site,
    body.offcanvas-active #sp-page-builder,
    body.offcanvas-active #sp-main-body,
    body.offcanvas-active #sp-header,
    body.offcanvas-active #sp-top-bar,
    body.offcanvas-open .body-wrapper,
    body.offcanvas-open .body-innerwrapper,
    body.menu-open .body-wrapper,
    body.menu-open .body-innerwrapper {
        transform: none !important;
        translate: none !important;
        left: 0 !important;
        right: auto !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }

    /*
       Closed-by-default drawer.
       Width is still a drawer, but it is fully off screen until opened.
    */
    .offcanvas-menu {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        left: auto !important;
        bottom: 0 !important;
        width: min(82vw, 360px) !important;
        max-width: 360px !important;
        height: 100vh !important;
        min-height: 100vh !important;
        background: #fffaf2 !important;
        box-shadow: -18px 0 42px rgba(0, 0, 0, 0.26) !important;
        z-index: 1000000 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        transform: translateX(105%) !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        transition: transform 0.25s ease, opacity 0.2s ease, visibility 0.2s ease !important;
    }

    /*
       Open states only.
       IMPORTANT: do not include body.offcanvas-init here.
    */
    body.offcanvas-active .offcanvas-menu,
    body.offcanvas-open .offcanvas-menu,
    body.menu-open .offcanvas-menu,
    .offcanvas-menu.offcanvas-active,
    .offcanvas-menu.menu-open {
        transform: translateX(0) !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    body.offcanvas-active,
    body.offcanvas-open,
    body.menu-open {
        overflow: hidden !important;
        touch-action: pan-y !important;
    }

    .offcanvas-menu .offcanvas-inner {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 100% !important;
        padding: 88px 28px 36px !important;
        box-sizing: border-box !important;
        background: #fffaf2 !important;
    }

    /*
       Overlay should also be hidden unless the menu is genuinely open.
    */
    body.offcanvas-init:not(.offcanvas-active):not(.offcanvas-open):not(.menu-open) .offcanvas-overlay,
    body.offcanvas-init:not(.offcanvas-active):not(.offcanvas-open):not(.menu-open) .body-overlay,
    body.offcanvas-init:not(.offcanvas-active):not(.offcanvas-open):not(.menu-open) .offcanvas-backdrop,
    body:not(.offcanvas-active):not(.offcanvas-open):not(.menu-open) .offcanvas-overlay,
    body:not(.offcanvas-active):not(.offcanvas-open):not(.menu-open) .body-overlay,
    body:not(.offcanvas-active):not(.offcanvas-open):not(.menu-open) .offcanvas-backdrop {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    body.offcanvas-active .offcanvas-overlay,
    body.offcanvas-active .body-overlay,
    body.offcanvas-active .offcanvas-backdrop,
    body.offcanvas-open .offcanvas-overlay,
    body.offcanvas-open .body-overlay,
    body.offcanvas-open .offcanvas-backdrop,
    body.menu-open .offcanvas-overlay,
    body.menu-open .body-overlay,
    body.menu-open .offcanvas-backdrop {
        position: fixed !important;
        inset: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        background: rgba(0, 0, 0, 0.42) !important;
        z-index: 999999 !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    .offcanvas-menu .close-offcanvas,
    .offcanvas-menu .offcanvas-close {
        position: absolute !important;
        top: 22px !important;
        right: 24px !important;
        left: auto !important;
        width: 54px !important;
        height: 54px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border: 1px solid rgba(86, 118, 109, 0.25) !important;
        border-radius: 12px !important;
        background: #fffdfa !important;
        color: #111 !important;
        font-size: 30px !important;
        line-height: 1 !important;
        z-index: 1000001 !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .offcanvas-menu .offcanvas-inner ul.menu {
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }

    .offcanvas-menu .offcanvas-inner ul.menu > li,
    .offcanvas-menu .offcanvas-inner ul.menu > li:not(:last-child) {
        margin: 0 !important;
        padding: 0 !important;
        border-bottom: 1px solid rgba(80, 60, 35, 0.10) !important;
    }

    .offcanvas-menu .offcanvas-inner ul.menu > li > a,
    .offcanvas-menu .offcanvas-inner ul.menu > li > span {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        min-height: 64px !important;
        padding: 14px 0 !important;
        color: #5f564d !important;
        font-size: 1.35rem !important;
        font-weight: 800 !important;
        line-height: 1.25 !important;
        text-decoration: none !important;
        white-space: normal !important;
    }

    .offcanvas-menu .offcanvas-inner ul.menu > li > a:hover,
    .offcanvas-menu .offcanvas-inner ul.menu > li > span:hover {
        color: #56766d !important;
    }

    .offcanvas-menu .menu-parent > a,
    .offcanvas-menu .menu-parent > span,
    .offcanvas-menu .deeper > a,
    .offcanvas-menu .deeper > span {
        padding-right: 48px !important;
        position: relative !important;
    }

    .offcanvas-menu .menu-toggler {
        min-width: 42px !important;
        min-height: 42px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: #8a7f73 !important;
        font-size: 1.45rem !important;
    }

    .offcanvas-menu .offcanvas-inner ul.menu ul,
    .offcanvas-menu .offcanvas-inner ul.menu .nav-child,
    .offcanvas-menu .offcanvas-inner ul.menu .menu-child {
        margin: 0 0 12px 12px !important;
        padding: 6px 0 8px 16px !important;
        border-left: 2px solid rgba(86, 118, 109, 0.18) !important;
        background: rgba(255, 255, 255, 0.34) !important;
        border-radius: 0 10px 10px 0 !important;
    }

    .offcanvas-menu .offcanvas-inner ul.menu ul li a,
    .offcanvas-menu .offcanvas-inner ul.menu .nav-child li a,
    .offcanvas-menu .offcanvas-inner ul.menu .menu-child li a {
        display: block !important;
        padding: 10px 0 !important;
        color: #56766d !important;
        font-size: 1.02rem !important;
        font-weight: 750 !important;
        line-height: 1.3 !important;
        text-decoration: none !important;
        white-space: normal !important;
    }
}

/*
   Small-phone option:
   If you later decide you want the phone menu full-screen instead of a drawer,
   change the .offcanvas-menu width above to 100vw and max-width to 100vw.
*/
/* Housetory policy/legal pages */
.housetory-policy-page {
  max-width: 900px;
  margin: 0 auto;
  padding: 2rem 1rem 3rem;
  line-height: 1.7;
  color: #2f2a24;
}

.housetory-policy-page .housetory-policy-updated {
  font-size: 0.95rem;
  color: #7a6a58;
  margin-bottom: 1.5rem;
}

.housetory-policy-page h2 {
  margin-top: 2rem;
  margin-bottom: 0.6rem;
  font-size: 1.35rem;
  color: #5b3b25;
}

.housetory-policy-page p {
  margin-bottom: 1rem;
}

.housetory-policy-page ul {
  margin: 0.75rem 0 1.25rem 1.4rem;
}

.housetory-policy-page li {
  margin-bottom: 0.45rem;
}
/* Housetory policy/legal page cleanup */
body:has(.housetory-policy-page) .article-info,
body:has(.housetory-policy-page) .article-info-term,
body:has(.housetory-policy-page) dl.article-info,
body:has(.housetory-policy-page) .pagenavigation,
body:has(.housetory-policy-page) .pager,
body:has(.housetory-policy-page) nav.pagination {
  display: none !important;
}
.housetory-policy-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin: 1.25rem 0 2rem;
}

.housetory-policy-card {
  display: block;
  padding: 1.1rem 1.2rem;
  border: 1px solid rgba(80, 60, 35, 0.16);
  border-radius: 16px;
  background: #fffaf2;
  box-shadow: 0 8px 22px rgba(50, 38, 25, 0.06);
  text-decoration: none !important;
}

.housetory-policy-card strong {
  display: block;
  margin-bottom: 0.45rem;
  color: #3d3125;
  font-size: 1rem;
}

.housetory-policy-card span {
  display: block;
  color: #6f655a;
  font-size: 0.92rem;
  line-height: 1.45;
}

.housetory-policy-card:hover {
  transform: translateY(-2px);
  border-color: rgba(86, 118, 109, 0.35);
}
.housetory-footer-legal {
  text-align: center;
  padding: 18px 12px;
  font-size: 0.88rem;
  color: #d8d0c3;
}

.housetory-footer-legal a {
  color: #fffaf2;
  text-decoration: none;
  margin: 0 6px;
}

.housetory-footer-legal a:hover {
  color: #d6b36a;
  text-decoration: underline;
}

.housetory-footer-legal span {
  color: rgba(255,255,255,0.35);
}

@media (max-width: 600px) {
  .housetory-footer-legal {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .housetory-footer-legal span {
    display: none;
  }
}
.housetory-policy-back {
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(80, 60, 35, 0.14);
}

.housetory-policy-back a {
  color: #56766d;
  font-weight: 700;
  text-decoration: none;
}

.housetory-policy-back a:hover {
  text-decoration: underline;
}