/* ================================================== */
/* Masa Madre Typography System */
/* ================================================== */

/* Import Google Fonts as fallbacks for Century fonts */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Sacramento&display=swap');

/* Century Old Style - For Titles/Headings */
/* Cinzel is a close Google Fonts alternative to Century Old Style */
@font-face {
    font-family: 'Century Old Style';
    src: local('Century Old Style'), local('CenturyOldStyle'), local('Century Oldstyle Std');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Century Old Style';
    src: local('Century Old Style Bold'), local('CenturyOldStyle-Bold');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Century Gothic - For Body Text */
/* Montserrat is a close Google Fonts alternative to Century Gothic */
@font-face {
    font-family: 'Century Gothic';
    src: local('Century Gothic'), local('CenturyGothic'), local('Century Gothic Std');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Century Gothic';
    src: local('Century Gothic Bold'), local('CenturyGothic-Bold');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* CSS Variables - Masa Madre Typography */
* {
    /* Typography */
    --title-font: 'Century Old Style', 'Cinzel', Georgia, serif;
    --body-font: 'Century Gothic', 'Montserrat', Arial, sans-serif;
    --deco-font-1: 'Sacramento', cursive;
    --century-old-style: 'Century Old Style', 'Cinzel', Georgia, serif;
    --century-gothic: 'Century Gothic', 'Montserrat', Arial, sans-serif;

    /* Font Sizes */
    --body-font-size: 15px;
    --title-font-size: 48px;

    /* Font Weights */
    --body-font-weight: 400;
    --title-font-weight: 700;

    /* Colors - Masa Madre Brand */
    --body-font-color: #707070;
    --body-font-color-dark: #bbbbbb;
    --title-font-color: #000000;
    --title-font-color-dark: #ffffff;

    /* Backgrounds */
    --bg-dark-1: #151c22;
    --bg-dark-1-rgb: 21, 28, 34;
    --bg-dark-2: #18212a;
    --bg-light-1: #ffffff;
    --bg-light-2: #f8f8f8;

    /* Layout */
    --page-border-size: 0;
    --page-border-color: #ffffff;
}

/* Typography Utility Classes */
.font-century-gothic {
    font-family: var(--century-gothic);
}

.font-century-old {
    font-family: var(--century-old-style);
}

/* Headings - Apply Century Old Style */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--title-font) !important;
    font-weight: var(--title-font-weight);
    letter-spacing: -0.015em;
}

h2 {
    font-size: 48px;
    letter-spacing: -0.015em;
    margin-bottom: 20px;
}

/* Body Text - Apply Century Gothic */
body {
    font-family: var(--body-font) !important;
    font-size: var(--body-font-size);
    font-weight: var(--body-font-weight);
}

p,
li,
span,
div {
    font-family: var(--body-font) !important;
}

/* Form Controls */
.form-control,
#contact_form input[type=text],
#contact_form textarea,
#contact_form input[type=email],
#contact_form textarea,
#search {
    border-radius: 3px !important;
    -moz-border-radius: 3px !important;
    -webkit-border-radius: 3px !important;
    font-family: var(--body-font);
}

/* Subheader Spacing */
@media only screen and (min-width: 992px) {
    #subheader {
        padding-top: 200px;
        padding-bottom: 60px;
    }
}

@font-face {
    font-family: 'Verilate';
    src: url('/fonts/verilate/Verilate-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Fancy heading for "visit our stores" on home */
.fancy-visit-heading {
    font-family: 'Verilate', var(--deco-font-1), var(--century-old-style), var(--century-gothic);
    font-weight: 700;
    font-size: clamp(28px, 5.5vw, 56px);
    line-height: 1.02;
    letter-spacing: -0.02em;
    text-transform: none;
    /* Platinum Gradient Effect */
    background-image: linear-gradient(135deg, #a7a7a7 0%, #ffffff 40%, #7d7d7d 60%, #e0e0e0 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    display: inline-block;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.3));
    transform: translateZ(0);

    /* Priority Overrides */
    color: transparent !important;
    font-family: 'Verilate', var(--deco-font-1), var(--century-old-style) !important;
    font-weight: 700 !important;

    /* Chrome, Safari, Edge */
    background-image: linear-gradient(135deg, #a7a7a7 0%, #ffffff 40%, #7d7d7d 60%, #e0e0e0 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;

    /* Simulate boldness with text stroke */
    -webkit-text-stroke: 1px #a7a7a7;

    /* Ensure no other color overrides */
    text-shadow: none !important;
}

/* Slight decorative underline */
.fancy-visit-heading::after {
    content: '';
    display: block;
    width: 40%;
    height: 4px;
    margin: .75rem auto 0;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.03));
    border-radius: 3px;
    opacity: 0.75;
}

/* Explicit logo-blue color (sampled from public/images/logo.png) */
.logo-blue {
    color: #004B9F !important;
}

.fancy-visit-heading.logo-blue::after {
    background: linear-gradient(90deg, rgba(0, 75, 159, 0.12), rgba(0, 75, 159, 0.06));
}

/* Navy heading variation for MasaMadre above hours */
.navy-heading {
    color: #001f3f !important;
    /* navy */
    font-weight: 700;
    font-size: 120px !important;
    text-shadow:
        0 1px 0 rgba(0, 0, 0, 0.9),
        0 2px 0 rgba(0, 0, 0, 0.85),
        0 3px 0 rgba(0, 0, 0, 0.8),
        0 4px 0 rgba(0, 0, 0, 0.75),
        0 5px 0 rgba(0, 0, 0, 0.7),
        0 6px 1px rgba(0, 0, 0, 0.65),
        0 0 5px rgba(0, 0, 0, 0.5),
        0 1px 3px rgba(0, 0, 0, 0.6),
        0 3px 5px rgba(0, 0, 0, 0.5),
        0 5px 10px rgba(0, 0, 0, 0.4),
        0 10px 20px rgba(0, 0, 0, 0.3),
        0 20px 40px rgba(0, 0, 0, 0.2);
}

/* Decorative yellow heading used on About page for "Cómo comenzamos" */
.how-it-begins {
    /* stronger, more saturated yellow */
    color: #FFB400 !important;
    /* site yellow */
    font-family: var(--deco-font-1), var(--century-old-style), var(--title-font);
    font-weight: 700;
    font-size: clamp(28px, 4.2vw, 48px);
    line-height: 1.02;
    letter-spacing: -0.012em;
    text-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
    margin-bottom: 0.75rem;
}

.how-it-begins::after {
    content: '';
    display: block;
    width: 36%;
    height: 3px;
    margin-top: 0.85rem;
    background: linear-gradient(90deg, rgba(255, 180, 0, 0.98), rgba(255, 180, 0, 0.55));
    border-radius: 2px;
    opacity: 0.95;
}

/* Utility: force black text for specific paragraphs */
.text-black {
    color: #000 !important;
}

/* Section-level utility: force black text for all content inside a column/section */
.text-black-section {
    color: #000 !important;
}

/* Decorative uppercase section title used for labels like "PAN DULCE" / "BEBIDAS" */
.section-deco-uppercase {
    font-family: var(--century-old-style);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    color: #000 !important;
    font-size: clamp(28px, 7.4vw, 86px);
    display: inline-block;
    position: relative;
    padding: 0 0.6rem 0.75rem 0.6rem;
    line-height: 0.95;
}

.section-deco-uppercase::after {
    /* bold underline that sits below the letters, centered with a slight inset */
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 8px;
    bottom: -2px;
    background: #000;
    border-radius: 2px;
    transform-origin: center;
}

.section-deco-uppercase.small-underline::after {
    height: 5px;
}

/* Product icons block added to menu-item: show small thumbnails (5) per category */
.menu-item .c0 {
    /* rounded-square card for thumbnail */
    display: flex !important;
    align-items: center;
    justify-content: center;
    margin-right: 14px;
    width: 85px !important;
    height: 85px !important;
    min-width: 85px !important;
    min-height: 85px !important;
    flex: 0 0 85px !important;
    /* fixed area for the card */
    padding: 10px;
    /* card inner padding */
    border-radius: 18px;
    /* rounded square card */
    background: #ffffff;
    /* white card like attachment */
    box-shadow: 0 26px 36px rgba(0, 0, 0, 0.12), 0 10px 14px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.04);
    vertical-align: top !important;
}

.menu-item .c0 img {
    width: 65px !important;
    height: 65px !important;
    max-width: 65px !important;
    max-height: 65px !important;
    min-width: 65px !important;
    min-height: 65px !important;
    object-fit: cover;
    border-radius: 14px;
    /* rounded square image */
    border: 0;
    /* card already has a border */
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06) inset;
}

.menu-item .c0 .product-icons-row {
    display: inline-flex;
    gap: 6px;
}

/* Slightly larger icon for the home hero lists */
.menu-item.home-hero .c0 img {
    width: 36px;
    height: 36px;
}

.text-black-section p,
.text-black-section span,
.text-black-section div,
.text-black-section li {
    color: #000 !important;
}

/* Mobile adjustments for rounded-square thumbnail cards */
@media only screen and (max-width: 768px) {
    .menu-item .c0 {
        width: 72px !important;
        height: 72px !important;
        min-width: 72px !important;
        min-height: 72px !important;
        flex: 0 0 72px !important;
        padding: 10px;
        border-radius: 15px;
        margin-right: 14px;
    }

    .menu-item .c0 img {
        width: 52px !important;
        height: 52px !important;
        max-width: 52px !important;
        max-height: 52px !important;
        min-width: 52px !important;
        min-height: 52px !important;
        border-radius: 12px;
    }
}

/* Section title 1 - MasaMadre hours section with background image */
#section-title-1 {
    text-shadow:
        0 1px 0 rgba(0, 0, 0, 0.9),
        0 2px 0 rgba(0, 0, 0, 0.85),
        0 3px 0 rgba(0, 0, 0, 0.8),
        0 4px 0 rgba(0, 0, 0, 0.75),
        0 5px 0 rgba(0, 0, 0, 0.7),
        0 6px 1px rgba(0, 0, 0, 0.65),
        0 0 5px rgba(0, 0, 0, 0.5),
        0 1px 3px rgba(0, 0, 0, 0.6),
        0 3px 5px rgba(0, 0, 0, 0.5),
        0 5px 10px rgba(0, 0, 0, 0.4),
        0 10px 20px rgba(0, 0, 0, 0.3),
        0 20px 40px rgba(0, 0, 0, 0.2);
}

#section-title-1 .fs20,
#section-title-1 span {
    font-size: 28px !important;
    font-weight: 600;
    text-shadow:
        0 1px 0 rgba(0, 0, 0, 0.85),
        0 2px 0 rgba(0, 0, 0, 0.8),
        0 3px 0 rgba(0, 0, 0, 0.75),
        0 4px 0 rgba(0, 0, 0, 0.7),
        0 5px 1px rgba(0, 0, 0, 0.65),
        0 0 5px rgba(0, 0, 0, 0.5),
        0 2px 4px rgba(0, 0, 0, 0.6),
        0 4px 8px rgba(0, 0, 0, 0.4),
        0 8px 16px rgba(0, 0, 0, 0.3),
        0 16px 32px rgba(0, 0, 0, 0.2);
}

/* Ensure all table cells in menu-item align to top */
.menu-item .c1,
.menu-item .c2,
.menu-item .c3 {
    vertical-align: top !important;
}

/* Styling for 'Precio' header to align with left text and look attractive */
.menu-item.thead .c3 {
    font-family: var(--title-font) !important;
    font-size: 32px !important;
    font-weight: 500 !important;
    color: var(--secondary-color) !important;
    vertical-align: bottom !important;
    text-align: right;
    line-height: 1.2;
    padding-bottom: 5px;
    /* Visual adjustment to align baselines with the larger 48px text on left */
}

/* Styling for 'Precio' header to align with left text and look attractive */
.menu-item.thead .c3.price-header {
    font-family: var(--title-font) !important;
    font-size: 32px !important;
    font-weight: 500 !important;
    color: var(--secondary-color) !important;
    vertical-align: bottom !important;
    text-align: right;
    line-height: 1.2;
    padding-bottom: 5px;
    /* Visual adjustment to align baselines with the larger 48px text on left */
}