/* Custom site styles for Janno's Bakery */
:root{
  --brand: #9a0f12; /* primary */
  --brand-900: #9a0f12;
  --brand-700: #c2171b;
  --brand-500: #ec1a25;
  --brand-300: #f49a9c;
  --brand-100: #fde6e7;
  --accent-1: linear-gradient(135deg,var(--brand-700),var(--brand-500));
  --soft-bg: linear-gradient(180deg, rgba(236,26,37,0.04) 0%, rgba(236,26,37,0.02) 100%);
  --glass: rgba(255,255,255,0.65);
  --black: #000;
  --muted:#6c757d;
  --font-body: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  --font-brand: 'Pacifico', cursive;
  --font-heading: 'Playfair Display', 'Times New Roman', serif;
}

/* Force custom colors on primary components */
.btn-primary, .btn.btn-primary{background:var(--accent-1);border:none;color:#fff}
.btn-primary:hover{filter:brightness(.96);transform:translateY(-2px)}
.btn-order{background:var(--accent-1);border:none;color:#fff}
.btn-outline-secondary{border-color:rgba(0,0,0,0.08);color:var(--brand-900)}
.navbar, .navbar .nav-link{background:transparent}
.nav-link{color:var(--brand-900);font-weight:600}

/* Header / Navbar should use Poppins for clarity */
header, .navbar, .navbar-brand, .nav-link, .order-btn-area, .brand-text {
  font-family: var(--font-body) !important;
}

/* Ensure navbar contents don't wrap and toggler stays visible on small screens */
.navbar .container-fluid{display:flex;align-items:center;flex-wrap:nowrap;gap:.5rem}
.navbar .logo-area{flex:0 0 auto}
.navbar .order-btn-area{flex:1 1 auto;justify-content:center;display:flex}
.navbar .navbar-toggler{flex:0 0 auto;align-self:center;z-index:1200}
@media(max-width:575.98px){
  .navbar .order-btn-area{justify-content:flex-start;gap:.5rem}
}

/* Logo sizing - keep navbar compact */
.logo-img{height:26px;max-height:26px;width:auto;display:inline-block}
@media(min-width:768px){.logo-img{height:44px;max-height:48px}}

/* Slightly reduce navbar vertical padding so logo doesn't stretch it */
.navbar{padding-top:0.01rem;padding-bottom:0.01rem}
.navbar .navbar-brand{padding:.05rem 0}

/* Center `Order now` button between logo and hamburger on large screens */
@media(min-width:992px){
  .navbar{position:relative}
  .order-btn-area{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:1050;pointer-events:auto}
  .order-btn-area .btn-order{padding:0.4rem 1.1rem;font-weight:700}
}

/* Page backgrounds and subtle patterns */
html, body{height:100%;}
body{min-height:100%;background:
    radial-gradient(circle at 10% 10%, rgba(236,26,37,0.06), transparent 8%),
    radial-gradient(circle at 90% 90%, rgba(236,26,37,0.04), transparent 8%),
    linear-gradient(180deg, var(--brand-100), rgba(255,249,246,0.9) 40%, #ffffff 100%);
  background-attachment:fixed;background-repeat:no-repeat;background-size:cover;color:var(--black);
    font-family: var(--font-body);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

/* Hero adjustments (ensure small height on mobile, centered video) */
.hero-video{height:200px;min-height:160px;max-height:280px;position:relative;z-index:0;overflow:hidden}
.hero-video video{width:100%;height:100%;object-fit:cover;filter:contrast(1.02) saturate(1.06);position:relative;z-index:0;display:block}
.hero-overlay{pointer-events:none;position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:0 1rem;z-index:3}

/* Remove older pseudo-element layering inconsistencies and use an explicit gradient element */
.hero-overlay::before{display:none}

/* Overlay placed above the video but below the title: single authoritative rule */
.hero-overlay .hero-gradient{
  position:absolute;
  left:0;right:0;bottom:0;
  /* increase visible block so bottom color is prominent */
  height:66%;
  z-index:1;
  pointer-events:none;
  /* Make the very bottom fully opaque (alpha=1) so color is visible to maximum,
     then fade upward to fully transparent. Use background-size to extend
     the transparency region beyond the element's top to avoid a visible hard edge. */
  background: linear-gradient(to top,
    rgba(146,25,25,1) 0%,
    rgba(146,25,25,1) 12%,
    rgba(146,25,25,0.8) 28%,
    rgba(146,25,25,0.45) 45%,
    rgba(146,25,25,0) 65%);
  background-size: 100% 160%;
  background-position: bottom center;
  background-repeat: no-repeat;
}

/* Ensure the heading sits above the overlay */
.hero-title{position:relative;z-index:4}
.hero-overlay h1{position:relative;z-index:2;margin:0;color:#fff;text-shadow:0 4px 12px rgba(0,0,0,0.55);line-height:1}
.hero-left{transform:none}
.hero-right{transform:none}

/* hero title (centered) uses brand script (Pacifico) */
.hero-title{font-family:'Bebas Neue', var(--font-heading);text-align:center;line-height:1;margin:0;color:#fff;text-shadow:0 4px 12px rgba(0,0,0,0.55);text-transform:uppercase}
.hero-title .brand-word-1,.hero-title .brand-word-2{display:inline-block}
.hero-title{font-weight:400;letter-spacing:0.6px}
.hero-title .brand-word-1{display:block;font-size:2.2rem;font-family:'Bebas Neue',var(--font-heading);text-transform:uppercase}
.hero-title .brand-word-2{display:block;font-size:1.4rem;margin-top:0.15rem;font-family:'Bebas Neue',var(--font-heading);text-transform:uppercase}
@media(min-width:768px){
  .hero-title .brand-word-1{font-size:4rem}
  .hero-title .brand-word-2{font-size:2.2rem}
}

/* Increase hero / header text on small devices for better legibility */
@media(max-width:767.98px){
  .hero-title .brand-word-1{font-size:4.4rem}
  .hero-title .brand-word-2{font-size:2.8rem}
}

/* Ensure hero title sits above any overlay */
.hero-title{position:relative;z-index:3}

/* Move hero title slightly down so it doesn't touch the navbar */
.hero-overlay{align-items:flex-end !important;padding-bottom:1.25rem}
.hero-overlay .hero-title{margin-bottom:0.6rem}

/* Explicit gradient overlay element (works reliably) */
.hero-overlay .hero-gradient{ /* fallback override removed to allow gradient to show */
  /* intentionally left empty so the linear-gradient is effective */
}

.brand-text{font-weight:500;font-family:var(--font-brand);letter-spacing:0.8px;font-size:1.04rem}
@media(min-width:768px){.brand-text{font-size:1.2rem;letter-spacing:1px}}

/* Headings use Playfair Display for a refined feel */
/* Use Bebas Neue for primary H1 headings for a bold, condensed brand headline */
h1{font-family:'Bebas Neue', var(--font-heading);letter-spacing:1px;font-weight:400;text-transform:uppercase}

h2,h3{font-family:var(--font-heading);letter-spacing:0.8px;font-weight:600}
@media(min-width:768px){h1{font-size:2.6rem}h2{font-size:1.9rem}h3{font-size:1.5rem}}

/* Decorative circular pattern in hero */
.hero-video::after{content:'';position:absolute;right:-10%;top:-10%;width:320px;height:320px;border-radius:50%;background:radial-gradient(circle at 30% 30%, rgba(236,26,37,0.12), rgba(236,26,37,0.04) 40%, transparent 50%);transform:translateZ(0);opacity:.95}

/* Card bento style with gradient border and curved side */
.bakery-card{background:linear-gradient(180deg, #ffffff 0%, #fffaf9 100%);border-radius:18px;position:relative;padding:0;overflow:visible;border:1px solid rgba(0,0,0,0.04)}
.bakery-card .card-body{padding:1rem}
.bakery-card::before{content:'';position:absolute;inset:0;padding:2px;border-radius:18px;background:linear-gradient(90deg, rgba(236,26,37,0.12), rgba(236,26,37,0.04));-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);mask-composite: exclude;pointer-events:none}
/* Curved side overlay to create bento look */
.bakery-card::after{content:'';position:absolute;right:-28px;top:18px;width:56px;height:80px;border-radius:24px 24px 24px 24px;background:linear-gradient(180deg, var(--brand-300), transparent);box-shadow: 0 10px 30px rgba(236,26,37,0.08);transform:rotate(8deg);opacity:.9}

/* Product grid: 2 cards per row on small, 3 on medium, 4 on large */
#productList, .product-grid {display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
@media(min-width:768px){#productList, .product-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:992px){#productList, .product-grid{grid-template-columns:repeat(4,1fr)}}

/* Buttons inside cards use brand gradient */
.bakery-card .btn{background:var(--accent-1);border:none;color:#fff}

/* Hover interactions and subtle parallax on scroll */
.bakery-card{transition:transform .36s cubic-bezier(.16,.8,.3,1),box-shadow .36s}
.bakery-card:hover{transform:translateY(-8px) rotateX(0.5deg);box-shadow:0 20px 40px rgba(0,0,0,0.08)}

/* Smooth reveal for items */
.fade-up{opacity:0;transform:translateY(10px);transition:opacity .5s ease,transform .5s ease}
.fade-up.in-view{opacity:1;transform:none}

/* Filters area styling */
.filters{background:linear-gradient(135deg, rgba(236,26,37,0.06), rgba(236,26,37,0.02));backdrop-filter:blur(4px);padding:1rem;border-radius:14px;margin:0.5rem 0}
.filters .form-select, .filters .btn{border-radius:999px}

/* Make the Clear button black to increase contrast */
#clearFilters{
  color:#ffffff;
  border-color:#ffffff;
  background:transparent;
}
#clearFilters:hover, #clearFilters:focus{
  background: rgba(0,0,0,0.06);
  color:#000;
  border-color:#000;
}

/* Items grid styling */
.items-grid{background:linear-gradient(135deg, rgba(236,26,37,0.035), rgba(236,26,37,0.01));padding:1.25rem 0}
.items-grid .container{background:linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0.5));border-radius:16px;padding:1rem;box-shadow:0 14px 35px rgba(0,0,0,0.06)}

/* Make cards slightly translucent so the background gradient is visible through them */
.bakery-card{background:linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.88));backdrop-filter: blur(6px)}

/* Footer tweaks - more SEO-friendly visual hierarchy */
.site-footer{background:linear-gradient(180deg, rgba(20,16,16,0.96), rgba(30,22,22,0.95));}
.themed-footer{background:linear-gradient(180deg, rgba(10,8,8,0.95), rgba(30,22,22,0.96));border-radius:0;margin-top:0}
.site-footer h4, .site-footer h5, .site-footer h6{color:#fff}
.site-footer p, .site-footer address, .site-footer .small{color:rgba(255,255,255,0.85)}
.site-footer .footer-link{color:rgba(255,255,255,0.9)}
.site-footer .footer-link:hover{color:var(--brand-300)}

.site-footer hr.border-200{border-color:rgba(255,255,255,0.06)}

/* Footer columns spacing */
.site-footer .row{gap:1rem}
.site-footer h4{font-family:var(--font-heading);font-size:1.4rem}

/* Make footer content readable on mobile */
@media(max-width:767.98px){
  .site-footer{padding-top:2rem;padding-bottom:2rem}
}

/* Center footer content: align rows and columns centrally */
.site-footer .row{justify-content:center;text-align:center}
.site-footer .row > [class*="col-"]{display:flex;flex-direction:column;align-items:center}
.site-footer .row.align-items-center{justify-content:center}
.site-footer address, .site-footer p, .site-footer ul{margin-bottom:0}

/* Utility: gradient outline for focused elements */
.gradient-outline{position:relative}
.gradient-outline:focus-within{outline:none}
.gradient-outline:focus-within::after{content:'';position:absolute;inset:-4px;border-radius:14px;background:linear-gradient(90deg,var(--brand-700),var(--brand-300));z-index:-1;filter:blur(6px);opacity:.85}

/* Ensure images and media are responsive */
img, video{max-width:100%;height:auto}

/* Accessibility: increase touch target sizes */
.btn, .form-select{min-height:40px}

/* Override Bootstrap default link hover colors to use brand */
a.footer-link:hover, .nav-link:hover{color:var(--brand-700);text-decoration:none}

/* Small JS-free parallax: background movement on hover for desktop */
@media (hover:hover) and (pointer:fine){
  .hero-video:hover video{transform:scale(1.02);transition:transform 8s cubic-bezier(.2,.8,.2,.99)}
}

/* Provide helpers for JS to add in-view class when elements enter viewport */

/* Themed sections (apply to sections after hero) - cake-inspired gradient */
.themed-section{
  /* Keep containers readable while allowing the site background image to show through */
  background: transparent;
  border-radius: 12px;
  padding-top: .75rem;
  padding-bottom: .75rem;
  transition: background .4s ease, transform .2s ease;
  position:relative;
}

/* subtle sprinkle pattern using radial gradients */
.themed-section::after{
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 60px;
  background-image: radial-gradient(circle at 10% 20%, rgba(236,26,37,0.06) 0 2px, transparent 2px),
                    radial-gradient(circle at 30% 60%, rgba(236,26,37,0.04) 0 2px, transparent 2px),
                    radial-gradient(circle at 70% 30%, rgba(236,26,37,0.03) 0 2px, transparent 2px),
                    radial-gradient(circle at 92% 70%, rgba(236,26,37,0.02) 0 2px, transparent 2px);
  background-size: 18% 100%, 12% 100%, 22% 100%, 10% 100%;
  opacity: .28;
  pointer-events: none;
}

/* Slightly lift themed sections on hover for desktop */
@media (hover:hover) and (pointer:fine){
  .themed-section:hover{transform:translateY(-4px)}
}

/* Ensure inner containers maintain contrast */
.themed-section .container{background:transparent;padding:0}

/* Shared background image used by main (applies to all site sections except the hero) */
main{
  background-image: var(--shared-bg);
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
}

/* Add a subtle translucent panel for readability inside sections */
main section .container{
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(6px);
  border-radius: 12px;
  padding: 1rem;
}

/* Remove white separation between the last content container and the footer
   by removing the bottom border-radius and extra margin on the final section. */
main section:last-of-type .container{
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  margin-bottom: 0;
  padding-bottom: 0.75rem; /* keep a little inner spacing */
}

/* Ensure footer sits flush with content */
.site-footer, .themed-footer{margin-top:0}

/* Product grid improvements for fully responsive cards */
.product-grid{display:grid;grid-template-columns:1fr;gap:1rem;width:100%}
@media(min-width:576px){.product-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:768px){.product-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1200px){.product-grid{grid-template-columns:repeat(4,1fr)}}

.product-item{display:block;width:100%}
.product-item .bakery-card{height:100%;display:flex;flex-direction:column}
.product-item .card-body{flex:1;display:flex;flex-direction:column;justify-content:space-between}
.product-item .card-title{margin-bottom:.5rem}

/* Ensure images inside cards expand and keep aspect */
.bakery-card img{width:100%;height:auto;border-radius:12px 12px 0 0}

.btn-cart { border-radius: 999px; padding:.35rem .8rem; font-weight:600; color:#fff; border:1px solid rgba(255,255,255,0.12); background:transparent }
#cartCount{font-weight:700}


/* Floating navbar styles when hero is present */
.navbar-floating{position:absolute;top:0;left:0;right:0;z-index:999;padding:0.5rem 0;background:rgba(255,255,255,0.04);border:none;backdrop-filter:blur(6px) saturate(1.02);-webkit-backdrop-filter:blur(6px) saturate(1.02)}
.navbar-floating .container-fluid{background:transparent}

/* When no hero is present ensure navbar participates in normal flow */
body:not(.hero-present) #mainNavbar{position:relative}

/* Prevent main content from sitting under fixed navbar when hero absent (desktop/tablet) */
@media(min-width:576px){
  body:not(.hero-present) main{padding-top:72px}
}

/* Small-screen translucent backdrop when navbar floats */
@media (max-width:767.98px){
  .navbar-floating{
    background: rgba(255,255,255,0.12);
    backdrop-filter: blur(6px) saturate(1.05);
    -webkit-backdrop-filter: blur(6px) saturate(1.05);
    border-bottom: 1px solid rgba(0,0,0,0.06);
  }
  .navbar-floating .brand-text{color:#fff}
}

/* Sticky navbar state when user scrolls past hero */
.navbar-sticky{position:fixed;top:0;left:0;right:0;z-index:1100;box-shadow:0 6px 18px rgba(0,0,0,0.12);transition:background .2s ease,transform .15s ease}
.navbar-sticky .container-fluid{background:inherit}
.navbar-sticky .btn-order{box-shadow:0 10px 30px rgba(236,26,37,0.12)}

/* Ensure links remain legible when sticky */
.navbar-sticky .nav-link{color:#111}

/* WhatsApp branded button for ordering */
.btn.btn-whatsapp{
  background: #25D366 !important;
  color: #fff !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .5rem !important;
  padding: .35rem .8rem !important;
  border-radius: .5rem !important;
  font-weight: 600 !important;
}
.btn.btn-whatsapp i{color:#fff;font-size:1rem}
.btn.btn-whatsapp:hover{filter:brightness(.95);transform:none}