/* main.css - professional theme for Tote Collection
   All style files live in the top-level `style/` folder and are served via Flask's static endpoint.
*/

:root{
  --brand:#0d6efd; /* Bootstrap primary */
  --muted:#6c757d;
  --bg:rgba(226, 134, 131,0.8);
  --card-bg:#ffffff;
  --accent:#000000;
  /* Customize these to change navbar/footer colors (use hex values) */
  --nav-bg: rgba(228, 73, 68, 0.9); /* default dark (Bootstrap dark) */
  --nav-text: #000000;
  --footer-bg: rgba(228, 73, 68,0.9);
  --footer-text: #000000;
  --radius:0.5rem;
  --max-width:1100px;
}

/* Global resets / typography */
body{
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: linear-gradient(180deg, var(--bg), #ffffff 80%);
  color:#212529;
  -webkit-font-smoothing:antialiased;
}

.container{max-width:var(--max-width);} 

/* Layout: ensure footer stays at bottom on tall viewports */
html, body { height: 100%; }
body { display: flex; flex-direction: column; min-height: 100vh; }
main.page-main { flex: 1 0 auto; }

/* Hero / jumbotron look: transparent so page gradient shows through */
.p-5.mb-4{
  border-radius:var(--radius);
  background:transparent;
  padding:2.5rem !important;
}

/* Cards & sections */
.card, .shadow-sm{box-shadow:0 6px 18px rgba(33,37,41,0.06);} 

/* Navbar tweaks */
.navbar-brand{font-weight:700;letter-spacing:0.3px}

/* site-navbar: uses CSS variables so color can be changed in `main.css` */
.site-navbar{background:var(--nav-bg);}
.site-navbar .navbar-brand{color:var(--nav-text)}
.site-navbar .navbar-nav .nav-link{color:rgba(255,255,255,0.9)}
.site-navbar .navbar-nav .nav-link.active{color:var(--accent);font-weight:600}
.site-navbar .nav-link:hover{color:var(--accent)}
/* Ensure the toggler icon is visible on dark backgrounds */
.site-navbar .navbar-toggler-icon{filter:invert(1) opacity(0.9)}

/* Footer */
footer{font-size:0.95rem}
footer a{text-decoration:none}
footer a:hover{text-decoration:underline}

/* site-footer: background and text controlled by CSS variables */
.site-footer{background:var(--footer-bg);color:var(--footer-text)}
.site-footer a{color:var(--footer-text);text-decoration:none}
.site-footer a:hover{text-decoration:underline;opacity:0.9}

/* Forms: transparent background so page gradient shows through */
form.bg-white{background:transparent;} 
form .form-control, form .form-select, form textarea{border-radius:0.45rem;}

/* Buttons */
.btn-primary{
  background:linear-gradient(90deg,var(--brand),#0069d9);
  border:none;
  box-shadow:0 6px 12px rgba(13,110,253,0.12);
}

/* Responsive small helpers */
@media (max-width:767px){
  .container{padding-left:1rem;padding-right:1rem}
  footer .container{text-align:center}
}

/* Small utility */
.text-muted{color:var(--muted) !important}

/* Accessibility focus state */
a:focus, button:focus, input:focus, select:focus, textarea:focus{outline:3px solid rgba(13,110,253,0.12);outline-offset:2px}

/* Social links (footer) - make icons larger and easier to tap */
#social-links{display:flex;gap:0.5rem;align-items:center}
#social-links .social-link{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;background:#ffffff;border:0;color:var(--brand);text-decoration:none;box-shadow:0 6px 12px rgba(33,37,41,0.06);transition:transform .15s ease,box-shadow .15s ease}
#social-links .social-link i{font-size:1.25rem;line-height:1}
#social-links .social-link:hover{transform:translateY(-3px);box-shadow:0 10px 20px rgba(33,37,41,0.08)}

@media (max-width:767px){
  #social-links .social-link{width:40px;height:40px}
  #social-links .social-link i{font-size:1.1rem}
}

/* Under Construction page styles */
.under-construction{min-height:56vh;max-width:760px;margin:0 auto}
.under-construction .uc-icon{width:128px;height:128px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#ffffff;color:#222;margin:auto;box-shadow:0 12px 30px rgba(13,110,253,0.08);transform:translateY(0)}
.under-construction .uc-icon i{font-size:48px}

/* gentle bob + slow rotate for a GIF-like motion */
@keyframes uc-bob {
  0%{transform:translateY(0) rotate(0deg)}
  50%{transform:translateY(-8px) rotate(6deg)}
  100%{transform:translateY(0) rotate(0deg)}
}
.under-construction .uc-icon{animation:uc-bob 2.2s ease-in-out infinite}

/* Animated diagonal stripe 'gif' band */
.uc-strip{width:240px;height:14px;border-radius:999px;margin:auto;overflow:hidden;background:linear-gradient(90deg,rgba(0,0,0,0.06) 25%, rgba(255,255,255,0.0) 25%, rgba(0,0,0,0.06) 50%);background-size:48px 14px;}
@keyframes uc-stripes{from{background-position:0 0}to{background-position:48px 0}}
.uc-strip{animation:uc-stripes 0.8s linear infinite}

/* Make the icon and strip scale down a bit on small screens */
@media (max-width:480px){
  .under-construction .uc-icon{width:96px;height:96px}
  .under-construction .uc-icon i{font-size:36px}
  .uc-strip{width:180px}
}

/* About page specific styles */
.about-hero{max-width:var(--max-width);margin:0 auto;padding:2rem}
.about-hero h1{font-weight:700}
.about-hero .lead{font-size:1.05rem;color:rgba(33,37,41,0.87)}

/* Ensure any `.bg-white` applied by Bootstrap on these sections is transparent here */
.about-hero.bg-white,
form.bg-white {
  background-color: transparent !important;
}

.about-hero .values li{margin:0.35rem 0;padding-left:0.35rem}
.about-hero .values li::marker{font-size:1.1rem}

.product-figure{display:inline-block}
.product-placeholder{width:320px;height:220px;border-radius:0.75rem;border:2px dashed rgba(33,37,41,0.06);display:flex;align-items:center;justify-content:center;background:transparent;color:var(--muted);font-size:1rem}
.product-placeholder span{line-height:1.2}

.hashtag{color:var(--brand);font-weight:600}

@media (max-width:991px){
  .product-placeholder{width:260px;height:180px}
}

@media (max-width:576px){
  .about-hero{padding:1rem}
  .product-placeholder{width:200px;height:140px}
}

/* Carousel sizing: keep consistent height and use center-crop for images */
#carouselExampleIndicators.carousel {
  max-width: 100%;
  margin: 0 auto;
}

#carouselExampleIndicators .carousel-item {
  /* Use an aspect ratio for modern browsers to keep consistent height */
  /*aspect-ratio: 14 / 7;*/
  overflow: hidden;
  background: #f8f9fa;
}

#carouselExampleIndicators .carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* center-crop the image without distortion */
  object-position: center;
  display: block;
}

/* Fallback for browsers that don't support aspect-ratio */
@supports not (aspect-ratio: 1/1) {
  #carouselExampleIndicators .carousel-item { height: 360px; }
  @media (max-width: 991px) { #carouselExampleIndicators .carousel-item { height: 280px; } }
  @media (max-width: 576px) { #carouselExampleIndicators .carousel-item { height: 200px; } }
}

/* Optional helper: smaller carousel variant */
.carousel-sm .carousel-item { aspect-ratio: 8 / 5; }