/*
Theme Name: GLP1 PCOS Basic Theme
Description: A modern WordPress theme using Tailwind CSS with PCOS-specific styling
Version: 2.3.0
Author: PCOS Creative Team
*/

/* Custom styles for GLP1 PCOS theme */

@keyframes slide-up {
  0% {
    opacity: 0;
    transform: translateY(100px);
  }
  60% {
    transform: translateY(-10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-slide-up {
  animation: slide-up 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes bigBounce {
  0%, 100% {
    transform: translateY(0);
    backgroundColor: #ffffff;
    easing: cubic-bezier(0.8, 0, 1, 1);
  }
  50% {
    transform: translateY(-2rem);
    backgroundColor: #ffffff;
    easing: cubic-bezier(0, 0, 0.2, 1);
  }
}

.animate-bounce-delay-1 {
  animation: bigBounce 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.animate-bounce-delay-2 {
  animation: bigBounce 2s cubic-bezier(0.4, 0, 0.6, 1) infinite 0.7s;
}

.animate-bounce-delay-3 {
  animation: bigBounce 2s cubic-bezier(0.4, 0, 0.6, 1) infinite 1.4s;
}

/*
  The default border color has changed to `currentColor` in Tailwind CSS v4,
  so we've added these compatibility styles to make sure everything still
  looks the same as it did with Tailwind CSS v3.

  If we ever want to remove these styles, we need to add an explicit border
  color utility to any element that depends on these defaults.
*/
@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-gray-200, currentColor);
  }
}

/* Custom Utilities */
.no-scrollbar {
  /* Scrollbar Hiding */
  &::-webkit-scrollbar {
    display: none;
  }
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

/* Animations */
@keyframes bounce-around {
  0%, 100% {
    transform: translate(var(--start-x), var(--start-y)) scale(var(--scale-start));
  }
  50% {
    transform: translate(var(--end-x), var(--end-y)) scale(var(--scale-end));
  }
}

.animate-bounce-around {
  animation: bounce-around 10s ease-in-out infinite alternate;
}

/* PCOS-specific custom styles */
.pcos-gradient-bg {
  background: linear-gradient(135deg, #F5F7FA 0%, #E6F3FF 100%);
}

.pcos-card-hover {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.pcos-card-hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 25px -5px rgba(32, 81, 164, 0.1), 0 10px 10px -5px rgba(32, 81, 164, 0.04);
}

.pcos-button-primary {
  background: linear-gradient(135deg, #2051A4 0%, #2B6CB0 100%);
  color: white;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 4px 6px -1px rgba(32, 81, 164, 0.1);
}

.pcos-button-primary:hover {
  background: linear-gradient(135deg, #2B6CB0 0%, #2051A4 100%);
  transform: translateY(-2px);
  box-shadow: 0 10px 15px -3px rgba(32, 81, 164, 0.2);
}

.pcos-button-secondary {
  background: white;
  color: #2051A4;
  border: 2px solid #2051A4;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  font-weight: 600;
  transition: all 0.3s ease;
}

.pcos-button-secondary:hover {
  background: #2051A4;
  color: white;
  transform: translateY(-2px);
}

/* Custom focus styles */
.pcos-focus-ring:focus {
  outline: 2px solid #2051A4;
  outline-offset: 2px;
}

/* Logo Styling */
.custom-logo-link {
    display: block;
    height: 100%;
    width: 100%;
}

.custom-logo-link img {
    height: 100%;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

/* Responsive logo sizing */
@media (max-width: 640px) {
    .custom-logo-link {
        max-width: 140px;
    }
}

@media (min-width: 641px) and (max-width: 1024px) {
    .custom-logo-link {
        max-width: 160px;
    }
}

@media (min-width: 1025px) {
    .custom-logo-link {
        max-width: 180px;
    }
}

/* Custom scrollbar */
.pcos-scrollbar::-webkit-scrollbar {
    width: 8px;
}

.pcos-scrollbar::-webkit-scrollbar-track {
  background: #F5F7FA;
  border-radius: 4px;
}

.pcos-scrollbar::-webkit-scrollbar-thumb {
  background: #2051A4;
  border-radius: 4px;
}

.pcos-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #2B6CB0;
}

/* Responsive typography */
@media (max-width: 640px) {
  .pcos-hero-title {
    font-size: 2rem;
    line-height: 2.5rem;
  }
}

@media (min-width: 641px) and (max-width: 1024px) {
  .pcos-hero-title {
    font-size: 3rem;
    line-height: 3.5rem;
  }
}

@media (min-width: 1025px) {
  .pcos-hero-title {
    font-size: 4rem;
    line-height: 4.5rem;
  }
}

/* Loading states */
.pcos-loading {
  position: relative;
  overflow: hidden;
}

.pcos-loading::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  animation: pcos-shimmer 1.5s infinite;
}

@keyframes pcos-shimmer {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

/* WordPress Admin Bar Support - High Specificity */
body.admin-bar header.fixed {
  top: 32px !important;
}

@media screen and (max-width: 782px) {
  body.admin-bar header.fixed {
    top: 46px !important;
  }
}

/* Adjust main content padding when admin bar is present */
body.admin-bar main {
  padding-top: calc(8rem + 32px) !important;
}

@media screen and (max-width: 782px) {
  body.admin-bar main {
    padding-top: calc(8rem + 46px) !important;
  }
}

/* Override any Tailwind classes when admin bar is present */
body.admin-bar .pt-32 {
  padding-top: calc(8rem + 32px) !important;
}

@media screen and (max-width: 782px) {
  body.admin-bar .pt-32 {
    padding-top: calc(8rem + 46px) !important;
  }
}

/* Ensure smooth transitions when admin bar appears/disappears */
header.fixed {
  transition: top 0.3s ease;
}

/* Fix for potential z-index conflicts with admin bar */
body.admin-bar header.fixed {
  z-index: 9999;
}

/* Force admin bar positioning with maximum specificity */
body.admin-bar header.fixed.top-0 {
  top: 32px !important;
}

@media screen and (max-width: 782px) {
  body.admin-bar header.fixed.top-0 {
    top: 46px !important;
  }
}

/* Target specific Tailwind positioning classes */
body.admin-bar header.fixed.top-0,
body.admin-bar header.fixed.top-\[0px\],
body.admin-bar header.fixed.top-0px {
  top: 32px !important;
}

@media screen and (max-width: 782px) {
  body.admin-bar header.fixed.top-0,
  body.admin-bar header.fixed.top-\[0px\],
  body.admin-bar header.fixed.top-0px {
    top: 46px !important;
  }
}

/* Ensure inline styles are overridden */
body.admin-bar header.fixed[style*="top: 0"],
body.admin-bar header.fixed[style*="top:0"] {
  top: 32px !important;
}

@media screen and (max-width: 782px) {
  body.admin-bar header.fixed[style*="top: 0"],
  body.admin-bar header.fixed[style*="top:0"] {
    top: 46px !important;
  }
}

/* Custom animations for PCOS elements */
.pcos-fade-in {
  animation: pcos-fade-in 0.6s ease-out forwards;
}

@keyframes pcos-fade-in {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.pcos-scale-in {
  animation: pcos-scale-in 0.4s ease-out forwards;
}

@keyframes pcos-scale-in {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}




