/* Responsive Logo Override for Auvella */

/* System Font Families */
:root {
  --system-sans: ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
  --system-serif: Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
}

/* Apply system sans-serif to body and common elements */
*,
*::before,
*::after {
  font-family: var(--system-sans) !important;
}

body,
html,
button,
input,
select,
textarea,
.auvella-floating-btn {
  font-family: var(--system-sans) !important;
}

/* Custom background color */
.bg-auvella-light {
  background-color: #f3eaea !important;
}

/* Target the existing logo container */
a[aria-label="Auvella home"] {
  position: relative;
}

/* Show small logo by default (up to 320px and 768px-1024px) */
/* This covers: 0-320px and 768px-1024px ranges */

/* Wide logo for 321px to 767px */
@media (min-width: 321px) and (max-width: 767px) {
  a[aria-label="Auvella home"] picture {
    display: none;
  }
  
  a[aria-label="Auvella home"]::before {
    content: "";
    display: block;
    width: 160px;
    height: 44px;
    background-image: url('/logo-wide.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left center;
  }
  
  a[aria-label="Auvella home"] {
    width: 160px;
    height: 44px;
  }
}

/* Wide logo for desktop (1025px and above) */
@media (min-width: 1025px) {
  a[aria-label="Auvella home"] picture {
    display: none;
  }

  a[aria-label="Auvella home"]::before {
    content: "";
    display: block;
    width: 150px;
    height: 55px;
    background-image: url('/logo-wide.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left center;
  }

  a[aria-label="Auvella home"] {
    width: 150px;
    height: 55px;
  }
}

/* Side Tabs - Individually Positioned */
#tab-offers {
  position: fixed;
  right: 0;
  top: calc(50% - 7.8rem);
  background: #5a3463;
  color: white;
  border: none;
  border-radius: 0 6px 6px 0;
  padding: 12px 6px;
  font-weight: 600;
  font-size: 12px;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  writing-mode: vertical-lr;
  text-orientation: mixed;
  transform: rotate(180deg);
  width: 32px;
  box-shadow: -4px 0 12px rgba(26, 35, 50, 0.25), -2px 0 8px rgba(201, 168, 118, 0.3);
  text-shadow: 0 0 3px rgba(255, 255, 255, 0.3);
  cursor: pointer;
  white-space: nowrap;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  transition: width 0.2s ease, background 0.2s ease, color 0.2s ease;
  font-family: var(--system-sans);
  z-index: 1000;
}

#tab-pricing {
  position: fixed;
  right: 0;
  top: 50%;
  background: #5a3463;
  color: white;
  border: none;
  border-radius: 0 6px 6px 0;
  padding: 12px 6px;
  font-weight: 600;
  font-size: 12px;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  writing-mode: vertical-lr;
  text-orientation: mixed;
  transform: rotate(180deg);
  width: 32px;
  box-shadow: -4px 0 12px rgba(26, 35, 50, 0.25), -2px 0 8px rgba(201, 168, 118, 0.3);
  text-shadow: 0 0 3px rgba(255, 255, 255, 0.3);
  cursor: pointer;
  white-space: nowrap;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  transition: width 0.2s ease, background 0.2s ease, color 0.2s ease;
  font-family: var(--system-sans);
  z-index: 1100;
}

#tab-offers:hover {
  width: calc(32px + 0.35rem);
  background: #c9a876;
  color: white;
}

#tab-pricing:hover {
  width: calc(32px + 0.35rem);
  background: #c9a876;
  color: white;
}

/* Mobile Navigation Breakpoint Override - Show hamburger at 768px */
@media (max-width: 768px) {
  /* Force hide desktop navigation */
  nav .hidden.md\\:flex {
    display: none !important;
  }

  /* Force show hamburger button */
  nav .md\\:hidden {
    display: block !important;
  }
}

/* Make pricing modal bigger on mobile with reduced padding */
@media (max-width: 767px) {
  #pricingModal > div[style] {
    max-width: 82vw !important;
    width: 82vw !important;
    min-width: 82vw !important;
  }
  
  #pricingModal > div > div[style*="padding"] {
    padding: 1rem !important;
  }
  
  /* Ensure grid doesn't force width constraints */
  #pricingModal div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
}

@media (min-width: 769px) {
  /* Force show desktop navigation */
  nav .hidden.md\\:flex {
    display: flex !important;
  }

  /* Force hide hamburger button */
  nav .md\\:hidden {
    display: none !important;
  }
}

/* Side tabs are now visible on all breakpoints */

/* Override whitespace-nowrap for treatment links */
a[aria-label*="Learn more about"],
.whitespace-nowrap {
  white-space: normal !important;
}

/* Force white background on service/treatment cards */
.p-6.space-y-4 {
  background-color: #fff !important;
}

/* Force white background on all card containers */
.rounded-xl.text-card-foreground.shadow,
.group.hover\:shadow-xl,
[class*="min-h-[500px]"] {
  background: rgb(255, 255, 255) !important;
  background-color: rgb(255, 255, 255) !important;
  background-image: none !important;
}

/* Remove shadow from hero section */
#home-hero.shadow-sm {
  box-shadow: none !important;
}

/* Remove WebWorksDigital footer credit */
a[href="https://webworksdigital.co.uk"] {
  display: none !important;
}

/* Override hero h1 text to remove "Welcome to" */
#home-hero h1 {
  font-size: 0 !important;
}

#home-hero h1::after {
  content: "Auvella Clinic, Experts in Aesthetic & Wellbeing";
  font-size: 1.6875rem !important;
  line-height: 2rem !important;
  display: block;
}

@media (min-width: 1024px) {
  #home-hero h1::after {
    font-size: 2.025rem !important;
    line-height: 2.25rem !important;
  }
}

/* Hide "Our Popular Treatments" h2 and remove section padding when hero text is outside image */
@media (max-width: 1280px) {
  /* Target the h2 containing "Our Popular Treatments" more broadly */
  #home-hero ~ section h2:first-of-type,
  #home-hero + section h2:first-of-type,
  section h2.auvella-text-navy.mb-6,
  h2.auvella-text-navy.mb-6 {
    display: none !important;
  }
  
  /* Remove top padding from the popular treatments section */
  #home-hero ~ section,
  #home-hero + section {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
  
  /* Add 3rem padding to the description paragraph */
  #home-hero ~ section p.text-xl.text-gray-600,
  #home-hero + section p.text-xl.text-gray-600,
  p.text-xl.text-gray-600.max-w-3xl.mx-auto.leading-relaxed {
    padding-left: 3rem !important;
    padding-right: 3rem !important;
  }
}

/* Tablet/Small Screen Hero Layout (768px - 1280px) */
@media (min-width: 768px) and (max-width: 1280px) {
  /* Hero section gets proper height */
  #home-hero {
    position: relative !important;
    min-height: 500px !important;
  }
  
  /* Hero container */
  #home-hero .relative:has(> picture) {
    position: relative !important;
    min-height: 500px !important;
  }
  
  /* Picture element fills container */
  #home-hero .relative:has(> picture) > picture,
  #home-hero .relative:has(> picture) > picture > img {
    min-height: 500px !important;
    object-fit: cover !important;
  }
  
  /* Overlay div - static positioning to avoid conflicts */
  #home-hero .relative > .absolute.inset-0 {
    position: static !important;
    display: block !important;
  }
  
  /* Container - static to avoid conflicts */
  #home-hero .relative > .absolute.inset-0 > .container {
    position: static !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  
  /* Text container - absolutely position and center vertically */
  #home-hero .relative > .absolute.inset-0 > .container > .text-left {
    position: absolute !important;
    top: 35% !important;
    left: 0 !important;
    transform: translateY(-50%) !important;
    max-width: 80% !important;
    width: 80% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    margin: 0 !important;
    padding: 0 1.5rem !important;
    z-index: 10 !important;
  }
  
  /* H1 stays on image WITHOUT background */
  #home-hero .relative > .absolute.inset-0 h1 {
    position: relative !important;
    background: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin-top: 0 !important;
    margin-bottom: 1.5rem !important;
    max-width: 100% !important;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3) !important;
    text-align: left !important;
  }
  
  /* Buttons stay on image below h1 */
  #home-hero .relative > .absolute.inset-0 .flex.flex-col {
    position: relative !important;
    z-index: 10 !important;
    margin: 0 !important;
  }
  
  /* Hide paragraph from overlay, will show it below via ::after */
  .relative > .absolute.inset-0 p {
    display: none !important;
  }
  
  /* Display paragraph text below the hero image using ::after on hero container */
  .relative:has(> picture)::after {
    content: "At Auvella Clinic, your journey is personal to us. From consultation to aftercare, we're here to support you with treatments designed around your unique needs. Step into our Leominster clinic and discover where advanced medicine meets warmth, comfort, and care. We can't wait to welcome you into the Auvella family.";
    display: block;
    padding: 2rem 1.5rem;
    background: #f3eaea;
    font-size: 1.125rem;
    line-height: 1.75rem;
    color: #000;
    max-width: 775px;
    margin: 0 auto;
  }
}

/* Fix mobile hero section - keep h1 on image, move text/buttons below */
@media (max-width: 767px) {
  /* Hero container allows content to extend below image */
  .relative:has(> picture) {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
  }
  
  /* Keep the overlay absolute for h1 positioning */
  .relative > .absolute.inset-0 {
    position: static !important;
    display: contents !important;
  }
  
  /* Target the container that holds all content */
  .relative > .absolute.inset-0 > .container {
    display: contents !important;
  }
  
  /* Target the text-left div that contains h1, p, and buttons */
  .relative > .absolute.inset-0 > .container > .text-left {
    display: contents !important;
  }
  
  /* H1 stays absolutely positioned over the image */
  .relative > .absolute.inset-0 h1 {
    position: absolute !important;
    top: 18% !important;
    transform: translateY(-50%) !important;
    left: 1rem !important;
    right: 1rem !important;
    z-index: 10 !important;
    font-size: 1.5rem !important;
    line-height: 1.75rem !important;
    margin-bottom: 0 !important;
    padding: 0.75rem !important;
    border-radius: 0.5rem !important;
    max-width: 75% !important;
  }
  
  /* Paragraph and buttons flow below the image */
  .relative > .absolute.inset-0 p,
  .relative > .absolute.inset-0 .flex.flex-col {
    position: relative !important;
    order: 2 !important;
    padding: 1rem 3rem !important;
  }
  
  .relative > .absolute.inset-0 p {
    font-size: 1.1rem !important;
    line-height: 1.5 !important;
    margin-bottom: 0rem !important;
    max-width: 100% !important;
  }
  
  /* Add horizontal padding to text container on mobile to avoid side tab overlap */
  .relative > .absolute.inset-0 > .container > .text-left {
    padding-left: 3rem !important;
    padding-right: 3rem !important;
  }
  
  /* Add 3rem horizontal padding to all sections below hero on mobile */
  #home-hero ~ section,
  #home-hero + section {
    padding-left: 3rem !important;
    padding-right: 3rem !important;
  }
  
  /* Also target containers and divs inside sections */
  #home-hero ~ section > *,
  #home-hero + section > *,
  #home-hero ~ section .container,
  #home-hero + section .container {
    padding-left: 3rem !important;
    padding-right: 3rem !important;
  }
  
  /* Target all main sections on mobile */
  body > main > section {
    padding-left: 3rem !important;
    padding-right: 3rem !important;
  }
}