@import "tailwindcss";

/* New consolidated site stylesheet */
:root{
  --font-playfair: "Playfair Display", serif;
  --font-arimo: "Arimo", sans-serif;
  --text-color: #333;
  --bg-color: #fdfdfd;
  --nav-indicator: #333;
  --container-max: 947px;
  --header-height: 210px; /* Desktop header height */
}

html,body{height:100%;}
body{
  padding-top: var(--header-height);
  font-family: "Inter", sans-serif;
  color:var(--text-color);
  background-color:var(--bg-color);
}

/* Mobile adjustment for header spacing */
@media (max-width: 767px) {
  :root {
    --header-height: 0px; /* Remove body padding on mobile, use margin instead */
  }
  
  body {
    padding-top: var(--header-height);
  }
  
  /* Add margin to main content instead of body padding */
  main {
    margin-top: 100px !important;
  }
  
  /* Specific fix for hero section */
  main > section:first-child {
    margin-top: 0 !important;
    padding-top: 100px;
  }
}

/* Site container used for centering header/nav */
.site-container{
  margin-left:auto;
  margin-right:auto;
  max-width:var(--container-max);
  padding-left:1rem;
  padding-right:1rem;
}

/* Logo */
.site-logo{
  width:119px;
  height:131px;
  object-fit:contain;
  display:block;
  margin-left:auto;
  margin-right:auto;
}

/* Nav typography */
nav a, .nav-link{
  font-family:var(--font-playfair);
  color:var(--text-color);
  text-decoration:none;
  font-size:10px;
  display:inline-block;
  padding:8px 0 12px;
  box-sizing:border-box;
}

/* Equal width nav items on desktop */
#nav-desktop ul{display:flex;width:100%;}
#nav-desktop li{flex:1;text-align:center;margin:0;padding:0;}
#nav-desktop .nav-link{display:block;}

/* Mobile list styles */
#nav-mobile ul{margin:0;padding:0;list-style:none}
#nav-mobile li a{display:block;padding:8px 0}

/* Top border indicator */
.nav-link{position:relative}
.nav-link::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:transparent;transition:background-color .18s ease}
.nav-link:hover::before,.nav-link:focus::before,.nav-link.active::before{background:var(--nav-indicator)}

/* Focus outline */
.nav-link:focus{outline:2px solid rgba(0,0,0,0.08);outline-offset:2px}

/* Fade-in sections */
.fade-in-section{opacity:0;transform:translateY(20px);transition:opacity .6s ease-out,transform .6s ease-out}
.fade-in-section.is-visible{opacity:1;transform:none}

/* Carousel */
.carousel-item{flex-shrink:0}

/* Utility tweaks */
.text-center{text-align:center}

/* Responsive tweaks */
@media (max-width:767px){
  /* smaller nav font on tiny screens if needed */
  nav a,.nav-link{font-size:10px}
}

/* Ensure header has spacing similar to before */
.site-header{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: var(--bg-color);
    z-index: 1000;
    padding-top: 1rem;
    padding-bottom: 0.5rem;
}

/* Mobile header - logo and burger in same row */
@media (max-width: 767px) {
  .site-header {
    padding: 0.75rem 0.5rem;
  }
  
  /* Create flex container for logo and nav */
  .site-header > .pb-6 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 0 !important;
    margin-bottom: 0.5rem;
  }
  
  .site-logo {
    width: 60px !important;
    height: 66px !important;
    margin: 0 !important;
  }
  
  /* Move burger button next to logo */
  #nav-toggle {
    position: static !important;
    order: 2;
    margin: 0 !important;
  }
  
  /* Hide the duplicate burger button container */
  .site-header nav .flex.items-center.justify-between {
    display: none;
  }
  
  /* Show only mobile nav menu */
  .site-header nav {
    display: block;
  }
}

/* Tablet adjustment */
@media (min-width: 768px) and (max-width: 1023px) {
  :root {
    --header-height: 190px;
  }
  
  body {
    padding-top: var(--header-height);
  }
  
  .site-logo {
    width: 100px !important;
    height: 110px !important;
  }
}

/* Ensure content images scale nicely */
img{max-width:100%;height:auto;}

/* Make carousel images clearly clickable */
.carousel-item img{cursor:pointer}

/* Modal / Lightbox styles */
.image-modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:9999}
.image-modal.hidden{display:none}
.image-modal .modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,0.85);backdrop-filter:blur(1px)}
.image-modal .modal-inner{position:relative;z-index:2;display:flex;align-items:center;gap:1rem;padding:0;max-width:95vw;max-height:95vh}
.modal-media{display:flex;flex-direction:column;align-items:center;justify-content:center}
.modal-image{max-width:80vw;max-height:80vh;width:auto;height:auto;border-radius:6px;box-shadow:0 10px 30px rgba(0,0,0,0.6)}
.modal-caption{margin-top:0.75rem;color:#fff;text-align:center;min-width:20ch}
/* When the modal is opened (it removes the `hidden` class), hide the
  caption text under the image per UX request. This keeps the image
  visually focused while navigating the lightbox. */
.image-modal:not(.hidden) .modal-caption{display:none !important}
/* Close button fixed top-right, transparent/light */
/* Nav arrows fixed at sides, transparent background and light color */
.modal-prev{left:18px}
.modal-next{right:18px}
.modal-close{position:fixed;top:12px;right:12px;background:transparent;color:#fff;border:0;width:92px;height:92px;font-size:28px;line-height:56px;cursor:pointer;box-shadow:none;z-index:10001;display:flex;align-items:center;justify-content:center}
.modal-nav{position:fixed;top:50%;transform:translateY(-50%);background:transparent;border:0;color:#fff;font-size:40px;line-height:1;padding:0;cursor:pointer;z-index:10001;text-shadow:0 2px 8px rgba(0,0,0,0.6);width:92px;height:92px;display:flex;align-items:center;justify-content:center}
.modal-prev{left:12px}
.modal-next{right:12px}

@media (max-width:640px){
  .modal-image{max-width:92vw;max-height:72vh}
  .modal-close{width:48px;height:48px;font-size:24px;top:8px;right:8px}
  .modal-nav{font-size:28px;width:48px;height:48px}
  .modal-prev{left:8px}
  .modal-next{right:8px}
}

/* Section 2: use Arimo for paragraph text */
#paes-section p,
#pastelaria-section p,
#about-section p {
  font-family: var(--font-arimo);
}

/* Ensure all headings use Playfair Display */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-playfair);
}

/* Ensure body paragraphs use Arimo by default */
p {
  font-family: var(--font-arimo);
}

/* Section 4: services cards with bottom overlay label */
.service-card{position:relative;display:block}
.service-card img{display:block;width:100%;height:100%;object-fit:cover}
.service-card__label{
  position:absolute;
  left:0;right:0;bottom:0;
  padding:1rem 0;
  background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.45) 60%, rgba(0,0,0,0.65) 100%);
  color:#ffffff;
  text-align:center;
  font-family:var(--font-playfair);
  font-weight:700; /* Playfair Display Bold */
  text-transform:lowercase;
}

/* Footer white box improvements */
.footer-contact-box{
  background: linear-gradient(180deg, rgba(255,255,255,0.98), #ffffff);
  border: 1px solid rgba(16,24,40,0.06); /* faint border */
  box-shadow: 0 20px 40px rgba(15,23,42,0.08), 0 2px 8px rgba(15,23,42,0.04);
  border-radius: 14px;
  padding: 2.5rem; /* fallback for non-tailwind aware clients */
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: transform 240ms ease, box-shadow 240ms ease;
}

.footer-contact-box:hover{
  transform: translateY(-4px);
  box-shadow: 0 28px 50px rgba(15,23,42,0.12), 0 6px 18px rgba(15,23,42,0.06);
}

.footer-contact-box h2{font-family:var(--font-playfair);color:#111827;margin-bottom:1.25rem}
.footer-contact-box .grid > div{align-items:center;display:flex;flex-direction:column}
.footer-contact-box svg{color: #6b7280; /* gray-600 */}
.footer-contact-box .text-lg{color:#374151}

/* Make the white box more compact on small screens */
@media (max-width: 767px){
  .footer-contact-box{padding:1.5rem}
  .footer-contact-box h2{font-size:1.5rem;margin-bottom:0.75rem}
  .footer-contact-box .grid{gap:1.5rem}
  .footer-contact-box .text-lg{font-size:0.875rem}
}

/* Ensure image column matches the height of the text column in two-column rows */
@media (min-width: 768px) {
  .match-height-row { align-items: stretch; }
  /* image-col is the wrapper around the img */
  .match-height-row .image-col { display: block; }
  .match-height-row .image-col img {
    display: block; /* avoid inline gaps */
    width: 100%;
    height: 100%;
    object-fit: cover;
    max-width: none; /* override global max-width if present */
  }
}

/* Mobile responsive improvements */
@media (max-width: 767px) {
  /* Stack two-column layouts on mobile */
  .match-height-row {
    flex-direction: column;
  }
  
  .match-height-row .image-col img {
    height: auto;
    max-height: 400px;
  }
  
  /* Better hero section sizing on mobile */
  main > section:first-child {
    min-height: 60vh !important;
    height: auto !important;
  }
  
  /* Reduce large text on mobile */
  .text-4xl {
    font-size: 1.875rem !important;
  }
  
  .text-6xl {
    font-size: 2.25rem !important;
  }
  
  /* Better spacing for image galleries */
  #family-grid {
    gap: 1.5rem !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}

/* Gallery overflow handling for o-nosso-espaco page */
.gallery-row {
  display: flex;
  width: 100%;
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.gallery-row::-webkit-scrollbar {
  height: 8px;
}

.gallery-row::-webkit-scrollbar-track {
  background: rgba(0,0,0,0.05);
  border-radius: 4px;
}

.gallery-row::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.2);
  border-radius: 4px;
}

.gallery-row::-webkit-scrollbar-thumb:hover {
  background: rgba(0,0,0,0.3);
}

.gallery-row img {
  scroll-snap-align: center;
  flex-shrink: 0;
}

@media (max-width: 767px) {
  .gallery-row {
    gap: 1rem;
    scroll-padding: 1rem;
  }
  
  .gallery-row img {
    max-width: 85vw;
    height: auto !important;
  }
  
  /* Better carousel button sizing on mobile */
  .carousel-prev,
  .carousel-next {
    width: 36px !important;
    height: 36px !important;
    padding: 0.5rem !important;
  }
  
  .carousel-prev svg,
  .carousel-next svg {
    width: 18px !important;
    height: 18px !important;
  }
  
  /* Better touch targets for nav toggle */
  #nav-toggle {
    padding: 0.75rem !important;
  }
  
  /* Improve mobile text readability */
  .text-base {
    font-size: 0.9375rem !important;
    line-height: 1.6 !important;
  }
  
  /* Better service card labels on mobile */
  .service-card__label {
    font-size: 2rem !important;
    padding: 0.75rem 0 !important;
  }
  
  /* Improve footer spacing on mobile */
  footer .grid {
    gap: 1.5rem !important;
  }
  
  footer .w-14 {
    width: 3rem !important;
    height: 3rem !important;
  }
  
  footer .w-14 svg {
    width: 1.25rem !important;
    height: 1.25rem !important;
  }
}

/* Extra small devices (phones in portrait, less than 376px) */
@media (max-width: 375px) {
  :root {
    --header-height: 0px;
  }
  
  body {
    padding-top: var(--header-height);
  }
  
  main {
    margin-top: 95px !important;
  }
  
  main > section:first-child {
    margin-top: 0 !important;
    padding-top: 95px;
  }
  
  .site-logo {
    width: 55px !important;
    height: 60px !important;
  }
  
  .nav-link {
    font-size: 9px !important;
    padding: 6px 0 10px !important;
  }
  
  h1, .text-4xl {
    font-size: 1.5rem !important;
  }
  
  h2, .text-3xl {
    font-size: 1.375rem !important;
  }
  
  .text-xl {
    font-size: 1.125rem !important;
  }
  
  /* Ensure containers don't cause horizontal scroll */
  .container,
  .site-container,
  .max-w-7xl,
  .max-w-6xl,
  .max-w-5xl,
  .max-w-4xl {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }
}

/* Ensure no horizontal overflow anywhere */
html {
  overflow-x: hidden;
}

body {
  overflow-x: hidden;
  width: 100%;
  position: relative;
}

/* Fix potential overflow from carousel */
.carousel-track {
  touch-action: pan-x;
}

/* Ensure images don't cause layout shift */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Prevent text overflow */
h1, h2, h3, h4, h5, h6, p {
  word-wrap: break-word;
  overflow-wrap: break-word;
}