/*
 Theme Name:   Magsoul Child
 Theme URI:    http://example.com/magsoul-child/
 Description:  Magsoul Child Theme for Superprezzo Flyers
 Author:       Antigravity
 Author URI:   http://example.com
 Template:     magsoul
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  magsoul-child
*/

:root {
    --sp-font-family: 'Nunito', sans-serif;

    /* Soft & feminine color palette */
    --sp-color-primary: #ff6b81;
    /* Soft pinkish-red */
    --sp-color-secondary: #7bed9f;
    /* Soft mint */
    --sp-color-text-main: #2f3542;
    --sp-color-text-muted: #747d8c;
    --sp-color-bg: #fdfdfd;
    --sp-color-card-bg: #ffffff;

    /* Badges */
    --sp-badge-active-bg: #2ed573;
    --sp-badge-active-text: #ffffff;

    --sp-badge-preview-bg: #ffa502;
    --sp-badge-preview-text: #ffffff;

    --sp-badge-expired-bg: #ff4757;
    --sp-badge-expired-text: #ffffff;

    /* Card Geometry */
    --sp-radius-card: 16px;
    --sp-radius-img: 10px;
    --sp-radius-badge: 20px;
    --sp-shadow-soft: 0 8px 24px rgba(0, 0, 0, 0.06);
    --sp-shadow-hover: 0 12px 32px rgba(0, 0, 0, 0.1);
    --sp-transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* --- Typography Overrides --- */
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
span:not(.material-symbols-outlined),
a,
div {
    font-family: var(--sp-font-family) !important;
}

/* Material Symbols Rendering Fix */
.material-symbols-outlined {
    font-family: 'Material Symbols Outlined' !important;
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    /* Preferred icon size */
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
}

/* Add padding to bottom of page on mobile to prevent footer overlap */
@media (max-width: 768px) {
    body {
        padding-bottom: 80px !important;
    }
}

/* --- Flyer Card Redesign (Reference Match) --- */
.flyer-card {
    background: var(--sp-color-card-bg) !important;
    border: 2px solid var(--sp-color-primary) !important;
    border-radius: var(--sp-radius-card) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08) !important;
    padding: 0 !important;
    /* Reset padding to 0 so backgrounds fill to edges */
    transition: all 0.3s ease !important;
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: visible !important;
    /* Allow badge to overlap top boundary */
    margin-top: 15px;
    /* Leave space for the top badge */
}

.flyer-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12) !important;
}

/* Badge Positioning - Overlapping top edge */
.flyer-card-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    width: 100%;
    text-align: center;
}

.flyer-badge.flyer-badge-center {
    display: inline-block;
    padding: 5px 20px;
    font-size: 13px;
    font-weight: 700;
    border-radius: 20px;
    text-transform: none;
    /* Reference image is Normal Case */
    letter-spacing: normal;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    white-space: nowrap;
}

.flyer-badge.badge-active {
    background-color: #4caf50;
    /* A slightly more pastel green to match reference */
    color: #ffffff;
}

.flyer-badge.badge-preview {
    background-color: var(--sp-badge-preview-bg);
    color: var(--sp-badge-preview-text);
}

.flyer-badge.badge-expired {
    background-color: var(--sp-badge-expired-bg);
    color: var(--sp-badge-expired-text);
}

/* Top half (Pale pink wrapper with image) */
.flyer-card-thumbnail-wrapper {
    background-color: #faeaea;
    /* Pale pinkish-grey from reference */
    padding: 24px 15px 15px 15px;
    /* Extra top padding so image doesn't touch top */
    border-top-left-radius: var(--sp-radius-card);
    border-top-right-radius: var(--sp-radius-card);
    text-align: center;
    flex-shrink: 0;
}

.flyer-card-thumbnail {
    position: relative;
    margin-bottom: 0 !important;
    border-radius: 0;
    overflow: hidden;
}

.flyer-card-thumbnail img {
    border-radius: 0 !important;
    /* Crisp rectangle */
    width: 100%;
    height: auto;
    object-fit: contain;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12) !important;
    /* Shadow on the flyer image itself */
    transition: transform 0.4s ease;
}

.flyer-card:hover .flyer-card-thumbnail img {
    transform: scale(1.02);
    /* Very subtle zoom */
}

/* Bottom half (White with text) */
.flyer-card-details {
    background-color: #ffffff;
    padding: 15px;
    border-bottom-left-radius: var(--sp-radius-card);
    border-bottom-right-radius: var(--sp-radius-card);
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    text-align: left;
    /* Image has left-aligned text */
}

.flyer-card-title {
    font-size: 16px !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
    color: #000000 !important;
    margin: 0 0 6px 0 !important;
}

.flyer-card-title a {
    color: inherit !important;
    text-decoration: none !important;
}

/* Date Range formatted like the reference: 19/02 - 04/03/2026 */
.flyer-card-date {
    font-size: 13px !important;
    color: #333333 !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    margin-top: auto;
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .flyer-card-thumbnail-wrapper {
        padding: 20px 10px 10px 10px;
    }

    .flyer-card-details {
        padding: 12px !important;
    }

    .flyer-card-title {
        font-size: 15px !important;
    }

    .flyer-badge.flyer-badge-center {
        font-size: 12px;
        padding: 4px 16px;
    }
}