/* ============================================================
   MercyCooks - Main Stylesheet
   Colors below are placeholder fallbacks; real values are
   injected as CSS variables from the admin-controlled settings
   table in includes/header.php.
   ============================================================ */

:root {
    --theme-color: #c0392b;
    --secondary-color: #f6a821;
    --bg-color: #fffaf3;
    --text-color: #2b1c14;
}

* { box-sizing: border-box; }

body {
    font-family: 'Poppins', sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    overflow-x: hidden;
}

h1, h2, h3, .brand-name, .footer-brand {
    font-family: 'Playfair Display', serif;
}

a { text-decoration: none; }

/* ---------- Buttons ---------- */
.btn-mercy {
    background-color: var(--theme-color);
    border-color: var(--theme-color);
    color: #fff;
    font-weight: 600;
    padding: .65rem 1.6rem;
    border-radius: 50px;
    transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease;
}
.btn-mercy:hover {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0,0,0,.15);
}
.btn-outline-mercy {
    border: 2px solid var(--theme-color);
    color: var(--theme-color);
    font-weight: 600;
    border-radius: 50px;
    padding: .6rem 1.5rem;
    background: transparent;
    transition: all .25s ease;
}
.btn-outline-mercy:hover {
    background: var(--theme-color);
    color: #fff;
    transform: translateY(-3px);
}

/* ---------- Announcement bar (marquee loop) ---------- */
.announce-bar {
    background: var(--text-color);
    color: #fff;
    overflow: hidden;
    white-space: nowrap;
}
.marquee-track {
    display: inline-block;
    padding-left: 100%;
    animation: marquee 22s linear infinite;
}
.animations-off .marquee-track { animation: none; padding-left: 0; }

@keyframes marquee {
    0%   { transform: translate(0, 0); }
    100% { transform: translate(-100%, 0); }
}

/* ---------- Navbar ---------- */
.navbar-mercy {
    background: rgba(255,255,255,.95);
    backdrop-filter: blur(6px);
    box-shadow: 0 2px 14px rgba(0,0,0,.06);
    transition: box-shadow .3s ease;
}
.brand-logo { height: 42px; width: auto; object-fit: contain; }
.brand-name { font-weight: 700; font-size: 1.5rem; color: var(--theme-color); }
.navbar-nav .nav-link {
    font-weight: 500;
    color: var(--text-color) !important;
    position: relative;
    margin: 0 .35rem;
}
.navbar-nav .nav-link::after {
    content: '';
    position: absolute;
    left: 0; bottom: -2px;
    width: 0%; height: 2px;
    background: var(--theme-color);
    transition: width .3s ease;
}
.navbar-nav .nav-link:hover::after { width: 100%; }
.nav-icon-link { color: var(--text-color); font-size: 1.2rem; transition: color .2s ease, transform .2s ease; }
.nav-icon-link:hover { color: var(--theme-color); transform: scale(1.15); }

/* ---------- Hero ---------- */
/* Full-width photo up top, with the heading/subtext/button living in a
   solid-color band directly beneath the photo (no text overlaid on the
   image itself) - matches the gloriasshito.com reference layout. */
.hero-section {
    position: relative;
    overflow: hidden;
}
.hero-photo {
    width: 100%;
    min-height: 60vh;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.hero-text-band {
    background: color-mix(in srgb, var(--theme-color) 12%, #fff8f2);
    padding: 3rem 1rem;
}
.hero-text-band h1 {
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    font-weight: 700;
    line-height: 1.3;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}
.hero-text-band p {
    font-size: 1.1rem;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
    opacity: .9;
}

.animations-on .hero-text-band h1 { animation: fadeUpIn 1s ease both; }
.animations-on .hero-text-band p { animation: fadeUpIn 1s .2s ease both; }
.animations-on .hero-text-band .btn { animation: fadeUpIn 1s .4s ease both; }

@keyframes fadeUpIn {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Badge strip (infinite loop) ---------- */
.badge-strip { overflow: hidden; background: #fff; border-top: 1px solid #f0e6da; border-bottom: 1px solid #f0e6da; }
.badge-track {
    display: flex;
    width: max-content;
    gap: 3rem;
    padding: 1.1rem 0;
    animation: scrollLeft 26s linear infinite;
}
.animations-off .badge-track { animation: none; }
.badge-track:hover { animation-play-state: paused; }
.badge-item { display: flex; align-items: center; gap: .5rem; white-space: nowrap; font-weight: 600; color: var(--theme-color); }
.badge-item i { font-size: 1.3rem; }

@keyframes scrollLeft {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* ---------- Section titles ---------- */
.section-title { position: relative; font-weight: 800; margin-bottom: .5rem; }
.section-subtitle { color: #8a7768; max-width: 560px; margin: 0 auto; }
.section-divider {
    width: 70px; height: 4px; background: var(--theme-color);
    border-radius: 4px; margin: .75rem auto 1.5rem;
}

/* ---------- Product cards ---------- */
.product-card {
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(0,0,0,.06);
    transition: transform .35s ease, box-shadow .35s ease;
    height: 100%;
    position: relative;
}
.product-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 36px rgba(0,0,0,.14);
}
.product-card .img-wrap {
    overflow: hidden;
    position: relative;
    aspect-ratio: 1 / 1;
    background: #f7f0e6;
    display: flex;
    align-items: center;
    justify-content: center;
}
.product-card .img-wrap img {
    width: 100%; height: 100%; object-fit: contain;
    transition: transform .5s ease;
}
.product-card:hover .img-wrap img { transform: scale(1.06); }
.product-card .body { padding: 1.25rem; }
.badge-pill {
    position: absolute; top: 14px; left: 14px; z-index: 2;
    background: var(--theme-color); color: #fff;
    font-size: .72rem; font-weight: 700; letter-spacing: .5px;
    padding: .3rem .7rem; border-radius: 30px; text-transform: uppercase;
}
.badge-sale { background: var(--secondary-color); }
.badge-soldout { background: #6c757d; }
.price-old { text-decoration: line-through; color: #aaa; font-size: .9rem; margin-right: .4rem; }
.price-new { color: var(--theme-color); font-weight: 700; font-size: 1.15rem; }
.stars-row i { color: var(--secondary-color); font-size: .85rem; }

/* ---------- Feature badges (yes/no comparison) ---------- */
.compare-table td, .compare-table th { text-align: center; vertical-align: middle; padding: 1rem; }
.compare-table i.bi-check-circle-fill { color: #2ecc71; font-size: 1.4rem; }
.compare-table i.bi-x-circle-fill { color: #e74c3c; font-size: 1.4rem; }

/* ---------- Instagram photo grid ---------- */
.insta-tile {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 14px;
    box-shadow: 0 6px 16px rgba(0,0,0,.08);
}
.insta-tile img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .5s ease;
}
.insta-tile:hover img { transform: scale(1.12); }
.insta-overlay {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(192,57,43,0);
    color: #fff; font-size: 1.6rem;
    opacity: 0;
    transition: background .3s ease, opacity .3s ease;
}
.insta-tile:hover .insta-overlay {
    background: rgba(192,57,43,.55);
    opacity: 1;
}

/* ---------- Testimonials ---------- */
.testimonial-card {
    background: #fff; border-radius: 18px; padding: 2rem;
    box-shadow: 0 6px 20px rgba(0,0,0,.06);
    height: 100%;
}
.testimonial-card .quote-icon { color: var(--secondary-color); font-size: 2rem; }

/* ---------- Newsletter ---------- */
.newsletter-section { background: var(--theme-color); color: #fff; }
.newsletter-section h3 { font-weight: 700; }
.newsletter-form { max-width: 480px; }
.newsletter-form .btn { border-radius: 0 50px 50px 0 !important; }
.newsletter-form .form-control { border-radius: 50px 0 0 50px !important; border: none; padding: .8rem 1.2rem; }

/* ---------- Footer ---------- */
.site-footer { background: var(--text-color); color: #e8dfd6; }
.footer-brand, .footer-heading { color: #fff; }
.footer-links a { color: #cdbfb2; transition: color .2s ease, padding-left .2s ease; display: inline-block; }
.footer-links a:hover { color: var(--secondary-color); padding-left: 4px; }
/* Bootstrap's .text-muted is a dark gray meant for light backgrounds;
   on the dark footer it's nearly invisible, so override it here. */
.site-footer .text-muted { color: #cdbfb2 !important; }
.site-footer hr.border-secondary-subtle { border-color: rgba(232, 223, 214, .25) !important; opacity: 1; }
.footer-social {
    color: #fff; background: rgba(255,255,255,.1);
    width: 40px; height: 40px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    transition: background .25s ease, transform .25s ease;
}
.footer-social:hover { background: var(--theme-color); transform: translateY(-4px); }

/* ---------- Back to top ---------- */
.back-to-top {
    position: fixed; right: 22px; bottom: 22px; z-index: 999;
    width: 46px; height: 46px; border-radius: 50%;
    background: var(--theme-color); color: #fff;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 8px 18px rgba(0,0,0,.2);
    opacity: 0; visibility: hidden; transform: translateY(15px);
    transition: all .3s ease;
}
.back-to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { background: var(--secondary-color); color: #fff; }

/* ---------- Misc ---------- */
.rounded-xl { border-radius: 20px; }
.shadow-soft { box-shadow: 0 10px 30px rgba(0,0,0,.08); }
.bg-soft { background: #fff7ec; }

/* ---------- Admin panel shared bits also reuse variables ---------- */
.admin-sidebar { min-height: 100vh; background: #1f1510; }
.admin-sidebar a { color: #d8c9bb; }
.admin-sidebar a.active, .admin-sidebar a:hover { color: #fff; background: rgba(255,255,255,.08); }

/* ---------- Responsive tweaks ---------- */
@media (max-width: 991px) {
    .hero-photo { min-height: 45vh; }
    .hero-text-band { padding: 2.25rem 1rem; }
}

/* ---------- Phone-specific fixes ----------
   1) Show the FULL photo (no cropping) on the hero banner and the
      product-detail main image by switching to background-size/
      object-fit: contain on small screens.
   2) Tighten up product/recipe cards so two comfortably fit per row.
---------------------------------------------- */
@media (max-width: 576px) {
    .hero-photo {
        min-height: 32vh;
        background-size: contain;
        background-color: var(--theme-color);
    }
    .hero-text-band h1 { font-size: 1.5rem; }
    .hero-text-band p { font-size: .95rem; }

    #mainProductImage {
        object-fit: contain !important;
        background: #f7f0e6;
        max-height: 320px !important;
    }
    .recipe-hero-img {
        object-fit: contain !important;
        background: #f7f0e6;
        max-height: 280px !important;
    }
    .product-card .body { padding: .75rem; }
    .product-card h6 { font-size: .85rem; }
    .product-card .price-new { font-size: .95rem; }
    .product-card .price-old { font-size: .75rem; }
    .product-card .btn { font-size: .78rem; padding: .5rem .8rem; }
    .badge-pill { font-size: .62rem; padding: .22rem .55rem; top: 8px; left: 8px; }
    .stars-row i { font-size: .72rem; }
    .section-title { font-size: 1.5rem; }
}