/* ============================================================
   SUSHRUTHA — mobile-fixes.css
   Supplemental mobile responsiveness loaded AFTER main.css (Tailwind)
   Targets institution pages across all three colleges/hospital
   ============================================================ */

/* ── General: prevent horizontal overflow ── */
html, body {
  overflow-x: hidden;
}

/* ═══════════════════════════════════════════════════════
   NAVBAR — Solid white, like group-of-institutions site
   Overrides Tailwind bg-surface/90 + backdrop-blur-md
   ═══════════════════════════════════════════════════════ */

/* 1. The <nav> bar itself — always solid white */
nav,
nav[class*="fixed"],
nav[class*="sticky"],
nav[class*="bg-surface"] {
  background-color: #ffffff !important;
  background: #ffffff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 2px solid #e8eeea !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important;
}

/* 2. Target Tailwind's specific bg-surface/90 class on nav */
nav.bg-surface\/90,
nav[class~="bg-surface\/90"],
nav[class*="bg-surface\/"] {
  --tw-bg-opacity: 1 !important;
  background-color: #ffffff !important;
  background: #ffffff !important;
}

/* 3. Kill backdrop blur on nav */
nav[class*="backdrop-blur"] {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ── Mobile Nav Overlay: solid white, group-of-institutions style ── */
@media (max-width: 1024px) {
  /* Nav bar on mobile */
  nav[class*="fixed"] {
    background-color: #ffffff !important;
    background: #ffffff !important;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.12) !important;
  }

  /* Hide desktop nav links on mobile */
  nav .hidden.lg\:flex {
    display: none !important;
  }

  /* ── Mobile overlay drawer ── */
  #mobile-menu-overlay {
    /* Kill Tailwind transparency */
    background: #ffffff !important;
    background-color: #ffffff !important;
    --tw-bg-opacity: 1 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    opacity: 1 !important;

    /* Layout */
    position: fixed !important;
    top: 80px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    z-index: 999 !important;
    overflow-y: auto !important;

    /* Group-of-institutions green accent border */
    border-top: 3px solid #3f6653 !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15) !important;

    /* Padding & layout */
    padding: 0 !important;
    flex-direction: column !important;
    gap: 0 !important;
  }

  /* When JS adds 'flex' class — keep solid */
  #mobile-menu-overlay.flex,
  #mobile-menu-overlay:not(.hidden) {
    background: #ffffff !important;
    background-color: #ffffff !important;
  }

  /* ── Nav link rows: group-of-institutions style ── */
  #mobile-menu-overlay a {
    display: flex !important;
    align-items: center !important;
    padding: 14px 24px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #1a2a1e !important;
    border-bottom: 1px solid #f0f4f1 !important;
    text-decoration: none !important;
    background: #ffffff !important;
    min-height: 52px !important;
    transition: color 0.15s, background 0.15s, padding-left 0.15s !important;
  }

  #mobile-menu-overlay a:hover,
  #mobile-menu-overlay a:active {
    color: #3f6653 !important;
    background: #f0f7f3 !important;
    padding-left: 32px !important;
  }

  /* Active page link: green left bar */
  #mobile-menu-overlay a.text-secondary,
  #mobile-menu-overlay a[class*="text-secondary"],
  #mobile-menu-overlay a.font-bold {
    color: #3f6653 !important;
    font-weight: 700 !important;
    border-left: 4px solid #3f6653 !important;
    padding-left: 20px !important;
    background: #f0f7f3 !important;
  }

  /* "More" accordion button */
  #mobile-menu-overlay button {
    padding: 14px 24px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #1a2a1e !important;
    background: #ffffff !important;
    width: 100% !important;
    text-align: left !important;
    border-bottom: 1px solid #f0f4f1 !important;
  }

  #mobile-menu-overlay button:hover {
    color: #3f6653 !important;
    background: #f0f7f3 !important;
  }

  /* Institution label at top of drawer */
  #mobile-menu-overlay::before {
    content: 'Sushrutha Ayurvedic Medical College & Hospital';
    display: block;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #3f6653;
    background: #f0f7f3;
    padding: 12px 24px 10px;
    border-bottom: 2px solid #d8eae0;
  }
}

/* ══════════════════════════════════════════════════════════════
   FIX: "Back to Departments" button — invisible text bug
   
   Root cause: .static-page-shell a { color: #3f6653 } in main.css
   overrides Tailwind's text-on-secondary (white), making dark-green
   text invisible on a dark-green (bg-secondary) button background.
   On hover, bg-secondary-container (light green) reveals the dark text.
   
   Fix: restore correct text color for colored-background buttons.
   ══════════════════════════════════════════════════════════════ */

/* text-on-secondary = white — restore when overridden by .static-page-shell a */
a.text-on-secondary,
a[class*="text-on-secondary"],
.text-on-secondary a,
a.bg-secondary,
a[class*="bg-secondary"] {
  color: #ffffff !important;
}
a.bg-secondary:hover,
a[class*="bg-secondary"]:hover {
  color: #002114 !important; /* dark text on light secondary-container bg */
}

/* text-on-primary = white — restore for dark navy bg buttons */
a.text-on-primary,
a[class*="text-on-primary"],
.text-on-primary a,
a.bg-primary,
a[class*="bg-primary"]:not([class*="bg-primary-fixed"]):not([class*="bg-primary-container"]) {
  color: #ffffff !important;
}

/* inline-flex links with colored backgrounds: ensure text stays visible */
a.inline-flex.bg-secondary { color: #ffffff !important; }
a.inline-flex.bg-secondary:hover { color: #002114 !important; }
a.inline-flex.bg-primary { color: #ffffff !important; }

/* Material symbols icon inside these buttons */
a.bg-secondary .material-symbols-outlined,
a[class*="bg-secondary"] .material-symbols-outlined {
  color: inherit !important;
}


/* ── Fix "More" dropdown hover gap ── */
nav .group > div[class*="top-full"] {
  padding-top: 0 !important;
}
nav .group:hover > div[class*="top-full"] {
  display: block !important;
}
nav .group > div[class*="top-full"]::before {
  content: '';
  position: absolute;
  top: -12px;
  left: 0;
  right: 0;
  height: 12px;
}

/* ── Pre / code blocks: allow wrapping ── */
pre,
.wp-block-verse {
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* ── Enhanced styling for WordPress-imported content pages ── */
/* Make h6 headings look like proper section headings */
.generated-wp-content h6,
.generated-wp-content h6 strong {
  font-family: 'Newsreader', serif !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #001840 !important;
  line-height: 1.3 !important;
  margin-top: 32px !important;
  margin-bottom: 12px !important;
  padding-bottom: 8px;
  border-bottom: 2px solid rgba(63,102,83,0.15);
}
.generated-wp-content h6:first-child {
  margin-top: 0 !important;
}

/* Better paragraph and list styling */
.generated-wp-content p {
  font-size: 16px !important;
  line-height: 1.75 !important;
  color: #44474f;
  margin-bottom: 12px;
}
.generated-wp-content ul,
.generated-wp-content ol {
  margin-bottom: 16px;
}
.generated-wp-content li {
  font-size: 15px !important;
  line-height: 1.7 !important;
  margin-bottom: 4px;
}

/* Faculty card-like layout */
.generated-wp-content figure img {
  border-radius: 12px !important;
  box-shadow: 0 4px 16px rgba(0,24,64,0.1);
  transition: transform 0.3s;
}
.generated-wp-content figure img:hover {
  transform: scale(1.02);
}

/* Better table styling */
.generated-wp-content table {
  border-radius: 12px !important;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,24,64,0.06);
}
.generated-wp-content th {
  background: #001840 !important;
  color: #fff !important;
  font-weight: 600;
  font-size: 14px;
}
.generated-wp-content td {
  font-size: 14px;
}
.generated-wp-content tr:nth-child(even) td {
  background: #f8f9fa;
}

/* Article card: remove border, add shadow */
.static-page-shell article {
  border: none !important;
  box-shadow: 0 4px 24px rgba(0,24,64,0.08) !important;
  border-radius: 16px !important;
}

/* ── Reduce hero space on WP content pages ── */
.static-page-shell > section:first-child {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}
/* Reduce gap between navbar and hero */
main.static-page-shell {
  padding-top: 5rem !important;
}

/* ── Make article full-width (remove empty sidebar gap) ── */
.static-page-shell article[class*="lg:col-span-8"] {
  grid-column: 1 / -1 !important;
}
/* Also reduce the section gap above/below content */
.static-page-shell > section:nth-child(2) {
  padding-top: 2rem !important;
  padding-bottom: 2rem !important;
}
/* Remove min-height constraint */
.static-page-shell article {
  min-height: auto !important;
}

/* ── Tables: scrollable on mobile ── */
@media (max-width: 768px) {
  .static-page-shell table,
  .generated-wp-content table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    font-size: 14px;
  }
  .static-page-shell table th,
  .static-page-shell table td,
  .generated-wp-content table th,
  .generated-wp-content table td {
    padding: 8px 10px;
    font-size: 13px;
  }
}

/* ── Hero sections: tame extreme heights on mobile ── */
@media (max-width: 768px) {
  [class*="h-[819px]"],
  [class*="h-[870px]"],
  [class*="h-[716px]"],
  [class*="h-[600px]"] {
    height: clamp(350px, 65vh, 500px) !important;
  }

  [class*="min-h-[600px]"],
  [class*="min-h-[614px]"],
  [class*="min-h-[716px]"] {
    min-height: 350px !important;
  }

  /* Hero title sizing */
  .text-display-lg-mobile {
    font-size: 32px !important;
    line-height: 38px !important;
  }

  /* Hero body text */
  .text-body-lg {
    font-size: 15px !important;
    line-height: 23px !important;
  }

  /* Hero CTA buttons: stack on mobile */
  section .flex.gap-gutter {
    flex-direction: column;
    gap: 12px;
  }
  section .flex.gap-gutter button,
  section .flex.gap-gutter a {
    width: 100%;
    text-align: center;
    justify-content: center;
    padding: 14px 20px;
  }
}

@media (max-width: 480px) {
  .text-display-lg-mobile {
    font-size: 26px !important;
    line-height: 32px !important;
  }

  .text-headline-lg {
    font-size: 24px !important;
    line-height: 30px !important;
  }

  .text-headline-md {
    font-size: 20px !important;
    line-height: 26px !important;
  }
}

/* ── WP Content: scale down for mobile ── */
@media (max-width: 768px) {
  .static-page-shell .generated-wp-content p,
  .static-page-shell .generated-wp-content li {
    font-size: 15px;
    line-height: 1.65;
  }

  .static-page-shell .generated-wp-content h1 {
    font-size: 26px;
    margin: 20px 0 10px;
  }
  .static-page-shell .generated-wp-content h2 {
    font-size: 22px;
    margin: 20px 0 10px;
  }
  .static-page-shell .generated-wp-content h3 {
    font-size: 18px;
    margin: 18px 0 8px;
  }

  /* WP Columns: stack on mobile */
  .static-page-shell .generated-wp-content .wp-block-columns,
  .static-page-shell .wp-block-columns {
    grid-template-columns: 1fr !important;
    gap: 16px;
  }

  /* WP Cover blocks */
  .static-page-shell .generated-wp-content .wp-block-cover {
    padding: 20px;
  }

  /* Images in WP content */
  .static-page-shell .generated-wp-content img,
  .generated-wp-content img {
    max-width: 100%;
    height: auto;
  }
}

/* ── Contact page: stack flex-basis columns ── */
@media (max-width: 768px) {
  .wp-block-column[style*="flex-basis"] {
    flex-basis: 100% !important;
    width: 100% !important;
  }

  .wp-block-columns.is-layout-flex {
    flex-direction: column !important;
    gap: 16px !important;
  }

  .wp-block-image.size-medium img,
  .wp-block-image.size-full img {
    max-width: 100%;
    height: auto;
  }
}

/* ── Footer: single column on mobile ── */
@media (max-width: 768px) {
  footer .grid[class*="grid-cols-12"],
  footer .grid.grid-cols-2 {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  footer [class*="col-span-"] {
    grid-column: span 1 !important;
  }

  footer .flex.flex-col.md\\:flex-row {
    flex-direction: column;
    text-align: center;
  }
}

/* ── Navbar: better brand text on mobile ── */
@media (max-width: 640px) {
  .site-title-clamp {
    display: none !important;
  }
}
@media (min-width: 641px) and (max-width: 767px) {
  .site-title-clamp {
    max-width: 120px !important;
    font-size: 14px !important;
  }
}

/* ── Section padding reduction on mobile ── */
@media (max-width: 768px) {
  .py-section-gap {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }

  .mb-section-gap {
    margin-bottom: 40px !important;
  }

  .gap-section-gap {
    gap: 40px !important;
  }

  .px-margin-mobile {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Bento grids: stack on mobile */
  .grid.grid-cols-2 {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 480px) {
  .py-section-gap {
    padding-top: 28px !important;
    padding-bottom: 28px !important;
  }

  /* Reduce padding on cards */
  .p-stack-lg {
    padding: 20px !important;
  }

  /* Smaller label text */
  .text-label-md {
    font-size: 13px !important;
  }

  /* Auto-rows for bento */
  .auto-rows-\[300px\] {
    grid-auto-rows: 220px !important;
  }
}

/* ── Images: constrain oversized images ── */
img {
  max-width: 100%;
  height: auto;
}

/* ── Fix for inline styles with fixed heights on mobile ── */
@media (max-width: 768px) {
  [style*="height:819px"],
  [style*="height:870px"],
  [style*="height:716px"],
  [style*="height: 819px"],
  [style*="height: 870px"],
  [style*="height: 716px"] {
    height: clamp(350px, 65vh, 500px) !important;
  }
}

/* ── Smooth scroll offset for fixed nav ── */
@media (max-width: 768px) {
  .scroll-mt-24 {
    scroll-margin-top: 5rem;
  }
}

/* ── Touch-friendly tap targets ── */
@media (max-width: 768px) {
  a, button {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* Exception for inline text links and figure/image links */
  p a, li a, span a, td a, th a,
  figure a, .wp-block-image a,
  .text-on-primary\/80 {
    min-height: unset;
    display: block;
  }
}

/* ══════════════════════════════════════════════════════════════
   FACULTY CARDS — Consistent photo height & grid alignment
   ══════════════════════════════════════════════════════════════ */

/* Faculty photo anchor — MUST be block, not inline-flex */
/* This prevents the text overlap / content merge bug */
figure a,
.wp-block-image a,
.wp-block-image a:hover {
  display: block !important;
  min-height: unset !important;
  width: 100% !important;
}

/* Faculty profile photos — uniform card height, face centered */
.generated-wp-content .wp-block-image img,
.static-page-shell .wp-block-image.has-custom-border img {
  width: 100% !important;
  height: 220px !important;
  object-fit: cover !important;
  object-position: center 20% !important; /* show face, not just top of head */
  border-radius: 14px !important;
  display: block !important;
}

/* Figure wrapper — no extra margin that breaks grid */
.generated-wp-content .wp-block-image.size-full {
  margin: 0 0 12px 0 !important;
}

/* Faculty name / designation labels */
.generated-wp-content .font-body-md strong:first-child {
  display: block;
  font-size: 15px;
  color: #001840;
}