/*
 * My House of Wisdom colour scheme: indigo and coral (October 2026).
 *
 * Loaded after the theme's style.css and custom.css on every public page (front.layouts.top
 * and top2). The site's templates and custom stylesheets refer to these --mhow-* variables
 * instead of typing colours in, so changing a value here recolours the whole public site.
 * Fonts are not set here.
 */
:root {
    --mhow-primary: #3A3F8F;        /* indigo: header, headings, main buttons */
    --mhow-primary-dark: #262A63;   /* deep indigo: footer, card bands, dark panels */
    --mhow-primary-light: #5A60B8;  /* lighter indigo: hover states, links */
    --mhow-primary-tint: #ECEDF7;   /* pale indigo: soft panels and highlights */
    --mhow-primary-tint-2: #D6D8EE; /* light indigo: borders and dividers */
    --mhow-accent: #F07A5C;         /* coral: underlines, decorative marks, icons on dark */
    --mhow-accent-strong: #C24626;  /* deep coral: buttons and small text (readable on white) */
    --mhow-accent-tint: #FDEEEA;    /* pale coral: soft highlights */
    --mhow-soft: #F5F5FB;           /* section backgrounds */
    --mhow-ink-muted: #565B7E;      /* secondary text */

    /* The theme's own variables (style.css), pointed at the new colours. */
    --theme-color: var(--mhow-primary);
    --title-color: var(--mhow-primary);
    --smoke-color: var(--mhow-primary-dark);
    --smoke-color2: var(--mhow-primary-dark);
}

/* Rules where style.css types the old colours in directly. */
.header-layout3 .menu-area {
    background: var(--mhow-primary);
}

.sub-title {
    color: var(--mhow-accent-strong);
}

.box-title a:hover {
    color: var(--mhow-accent-strong);
}

.donate-two__form__amount:focus-within {
    border-color: var(--mhow-accent-strong);
    box-shadow: 0 0 0 0.2rem rgba(194, 70, 38, 0.12);
}

.donate-two__form__amount__sign {
    color: var(--mhow-accent-strong);
}

.donate-two__form__buttons__item:hover {
    border-color: var(--mhow-accent-strong);
    color: var(--mhow-accent-strong);
}

.donate-two__form__buttons__item.active {
    background: var(--mhow-accent-strong);
    border-color: var(--mhow-accent-strong);
}

.careox-btn {
    background: linear-gradient(135deg, var(--mhow-accent-strong) 0%, var(--mhow-accent) 100%);
    box-shadow: 0 5px 15px rgba(194, 70, 38, 0.3);
}

.careox-btn:hover {
    box-shadow: 0 8px 25px rgba(194, 70, 38, 0.4);
}

/* Buttons: indigo, filling with coral on hover. */
.th-btn:before {
    background-color: var(--mhow-accent-strong);
}

.th-btn:focus-visible {
    outline: 3px solid var(--mhow-accent);
    outline-offset: 3px;
}

/* Section underlines (the short bars under headings): rounded. */
.title-area > div[style*="height: 3px"],
.title-area > div[style*="height:3px"] {
    border-radius: 3px;
}

/* Breadcrumb banners and the home slider: an indigo tint instead of flat black. */
.breadcrumb-banner .bg-overlay {
    background-color: rgba(38, 42, 99, 0.72);
}

.new-mhow-title-box {
    background: rgba(38, 42, 99, 0.78);
    border-left-color: var(--mhow-accent);
    border-radius: 0 12px 12px 0;
}

.new-mhow-slide-button {
    border-radius: 999px;
}

.new-mhow-slide-button:hover {
    background: var(--mhow-primary-light);
}

/* Cards: softer corners and an indigo-tinted border and shadow. */
.tour-box {
    border-color: var(--mhow-primary-tint-2);
    box-shadow: 0 10px 28px rgba(38, 42, 99, 0.08);
}

.destination-item {
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(38, 42, 99, 0.12);
}

.new-mhow-image-container {
    border-radius: 16px;
    box-shadow: 0 12px 30px rgba(38, 42, 99, 0.12);
}

.new-mhow-text-overlay {
    background-color: rgba(38, 42, 99, 0.85);
    border-left: 3px solid var(--mhow-accent);
}

/* Text-and-photo panels on the home page. */
.story-quote {
    border-left-color: var(--mhow-accent);
    border-radius: 0 12px 12px 0;
}

.story-image {
    border-radius: 16px;
    box-shadow: 0 16px 36px rgba(38, 42, 99, 0.18);
}

/* Event page cards ("Who it is for"). */
.hijrah-modern-card {
    border-radius: 16px;
}

/* ===================================================================================
 * Home page layout (Part 13). Scoped to the home page (<body class="mhow-home">).
 * One spacing rhythm: the theme's section space (80px; 50px below 992px) above and
 * below every section.
 * =================================================================================== */
.mhow-home .donate-page.py-5,
.mhow-home .destination-area13,
.mhow-home .destination-area,
.mhow-home .new-mhow-section,
.mhow-home .mhow-story-block {
    padding-top: var(--section-space) !important;
    padding-bottom: var(--section-space) !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

@media (max-width: 991px) {
    .mhow-home .donate-page.py-5,
    .mhow-home .destination-area13,
    .mhow-home .destination-area,
    .mhow-home .new-mhow-section,
    .mhow-home .mhow-story-block {
        padding-top: var(--section-space-mobile) !important;
        padding-bottom: var(--section-space-mobile) !important;
    }
}

/* The tables' cards carry their own 3rem bottom margin; don't add it to the section's. */
.mhow-home .new-mhow-section .row > [class*="col-"] {
    margin-bottom: 0 !important;
}

.mhow-home .new-mhow-section .row {
    row-gap: 1.5rem;
}

/* "Building a Better World Together": its inner container added a second bottom padding. */
.mhow-home .destination-area > .container.pb-5 {
    padding-bottom: 0 !important;
}

/* Projects carousel: the image fills the whole card at every screen size. The theme capped
   it at 636px tall, so on tall screens the card's dark fade showed as a grey box under it. */
.mhow-home .destination-area .papu-destination-img {
    height: clamp(420px, 68vh, 620px);
}

.mhow-home .destination-area .papu-destination-img img {
    max-height: none;
    max-width: 100%;
    height: 100%;
}

/* Global Events carousel arrows: indigo chevrons in a coral ring, centred. */
.mhow-home .destination-area13 .icon-box {
    margin-top: 40px;
}

.mhow-home .destination-area13 .slider-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    background: #fff;
    border: 2px solid var(--mhow-accent);
    box-shadow: 0 8px 20px rgba(38, 42, 99, 0.12);
}

.mhow-home .destination-area13 .slider-arrow i {
    color: var(--mhow-primary) !important;
    margin-bottom: 0 !important;
    font-size: 1.1rem !important;
}

.mhow-home .destination-area13 .slider-arrow:hover {
    background: var(--mhow-primary);
    border-color: var(--mhow-primary);
}

.mhow-home .destination-area13 .slider-arrow:hover i {
    color: #fff !important;
}

/* Photo tiles: the band's own padding is the only space around them (Part 18 took the
   text panels above and below them off the page). */
.mhow-home .mhow-story-block .new-mhow-grid {
    margin: 0;
}

/* Global Events & Workshops (front.partials.events.event-2, the design that was "Upcoming
   Programs & Workshops" until Part 18): every card's picture has the same portrait shape
   (3:4, the shape of the event posters), so titles and links line up. */
.mhow-home .category-area3 .category-card .box-img {
    overflow: hidden;
}

.mhow-home .category-area3 .category-card .box-img img {
    width: 100%;
    aspect-ratio: 3 / 4;
    height: auto;
    object-fit: cover;
}

/* Global Events carousel: the same 3:4 frame for every picture (Part 14). */
.mhow-home .destination-area13 .destination-img img {
    width: 100%;
    aspect-ratio: 3 / 4;
    height: auto;
    object-fit: cover;
}

.mhow-home .category-area3 .category-card {
    margin-bottom: 24px;
}

/* No white strip between the last section and the footer. */
.mhow-home #service-sec + .footer-wrapper {
    margin-top: 0 !important;
}

/* ===================================================================================
 * Event listing cards (Part 14): /events, /all-events, /charity-pages, /landing-pages
 * (front.partials.events.event-4, <section class="... mhow-event-cards">).
 * Every picture has the same tall 3:4 frame (the event posters' shape) and the cards in
 * a row are the same height, with the Detail buttons on one line at the bottom.
 * =================================================================================== */
.mhow-event-cards .row > [class*="col-"] {
    display: flex;
}

.mhow-event-cards .destination-item {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.mhow-event-cards .destination-item_img img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    height: auto;
    object-fit: cover;
}

.mhow-event-cards .destination-content {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.mhow-event-cards .destination-content .th-btn {
    margin-top: auto;
}