/*
Theme Name: Mahmood Ali Hospital
Theme URI: https://mahmoodalihospital.com
Author: DoctorSmart
Author URI: https://doctorsmart.in
Description: A clean, modern marketing website theme for Mahmood Ali Hospital, Baludee, Lakhimpur Kheri. Built to showcase specialists, facilities, patient stories and a working appointment request form.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mah-hospital
Tags: custom-menu, featured-images, threaded-comments, translation-ready, one-column, healthcare
*/

/* ==========================================================================
   0. Design tokens
   ========================================================================== */
:root{
  --mah-blue: #2A7DE1;
  --mah-blue-dark: #1e5eb0;
  --mah-blue-darker: #1a5198;
  --mah-pink: #F48FB1;
  --mah-pink-dark: #e95e8b;
  --mah-slate-900: #0f172a;
  --mah-slate-950: #020617;
  --mah-slate-800: #1e293b;
  --mah-slate-700: #334155;
  --mah-slate-500: #64748b;
  --mah-slate-400: #94a3b8;
  --mah-slate-200: #e2e8f0;
  --mah-slate-100: #f1f5f9;
  --mah-slate-50: #f8fafc;
  --mah-radius-lg: 1.5rem;
  --mah-radius-xl: 2rem;
  --mah-shadow-lg: 0 20px 45px -15px rgba(15,23,42,.15);
  --mah-max: 1280px;
}

/* ==========================================================================
   1. Reset & base
   ========================================================================== */
*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--mah-slate-900);
  background: #fff;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
button, input, select, textarea{ font-family:inherit; font-size:inherit; }
h1,h2,h3,h4{ margin:0; font-weight:300; letter-spacing:-0.02em; }
p{ margin:0; }
.mah-container{ max-width:var(--mah-max); margin:0 auto; padding:0 1.5rem; }
@media(min-width:768px){ .mah-container{ padding:0 3rem; } }
.mah-visually-hidden{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.screen-reader-text{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); }

/* ==========================================================================
   2. Buttons
   ========================================================================== */
.mah-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding: .95rem 1.9rem;
  border-radius:999px;
  font-weight:700;
  font-size:.85rem;
  letter-spacing:.02em;
  border:1px solid transparent;
  cursor:pointer;
  transition:.2s ease;
  white-space:nowrap;
}
.mah-btn-primary{ background:var(--mah-blue); color:#fff; box-shadow:0 8px 30px rgba(42,125,225,.3); }
.mah-btn-primary:hover{ background:var(--mah-blue-darker); color:#fff; }
.mah-btn-outline{ background:#fff; color:var(--mah-slate-800); border-color:var(--mah-slate-200); }
.mah-btn-outline:hover{ background:var(--mah-slate-50); }
.mah-btn-dark{ background:var(--mah-slate-800); color:#fff; }
.mah-btn-dark:hover{ background:var(--mah-slate-900); }
.mah-btn-white{ background:#fff; color:var(--mah-blue); }
.mah-btn-white:hover{ background:var(--mah-slate-50); }
.mah-btn-block{ width:100%; }

/* ==========================================================================
   3. Header
   ========================================================================== */
.mah-header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--mah-slate-100);
}
.mah-header-inner{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding:.9rem 0; }
.mah-brand{ display:flex; align-items:center; gap:.75rem; }
.mah-brand img{ width:44px; height:44px; object-fit:contain; border-radius:12px; background:#fff; box-shadow:0 4px 14px rgba(42,125,225,.12); padding:2px; }
.mah-brand-name{ font-weight:800; font-size:.95rem; text-transform:uppercase; letter-spacing:.04em; color:var(--mah-slate-900); line-height:1.1; }
.mah-brand-sub{ font-size:.62rem; font-weight:700; color:var(--mah-blue); text-transform:uppercase; letter-spacing:.12em; }

.mah-nav{ display:none; }
.mah-nav ul{ display:flex; align-items:center; gap:2rem; }
.mah-nav a{ font-size:.87rem; font-weight:600; color:var(--mah-slate-700); transition:.2s; }
.mah-nav a:hover{ color:var(--mah-blue); }

.mah-header-actions{ display:flex; align-items:center; gap:.9rem; }
.mah-header-phone{ display:none; align-items:center; gap:.5rem; font-weight:700; font-size:.85rem; color:var(--mah-slate-800); }
.mah-header-phone svg{ color:var(--mah-pink-dark); width:18px; height:18px; }

.mah-menu-toggle{ display:inline-flex; background:none; border:1px solid var(--mah-slate-200); border-radius:12px; padding:.5rem; cursor:pointer; }
@media(min-width:1024px){
  .mah-nav{ display:block; }
  .mah-header-phone{ display:flex; }
  .mah-menu-toggle{ display:none; }
}

.mah-mobile-nav{ display:none; border-top:1px solid var(--mah-slate-100); background:#fff; }
.mah-mobile-nav.is-open{ display:block; }
.mah-mobile-nav ul{ display:flex; flex-direction:column; padding:1rem 1.5rem 1.5rem; gap:.25rem; }
.mah-mobile-nav a{ display:block; padding:.7rem 0; font-weight:600; color:var(--mah-slate-800); border-bottom:1px solid var(--mah-slate-100); }

/* ==========================================================================
   4. Hero
   ========================================================================== */
.mah-hero{
  position:relative; overflow:hidden;
  background:var(--mah-slate-50);
  padding:4.5rem 0;
}
.mah-hero-bg{ position:absolute; inset:0; z-index:0; }
.mah-hero-bg img{ width:100%; height:100%; object-fit:cover; opacity:.12; }
.mah-hero-bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg,var(--mah-slate-50) 20%, rgba(248,250,252,.9) 60%, rgba(248,250,252,.3)); }
.mah-hero-grid{ position:relative; z-index:1; display:grid; gap:3rem; align-items:center; }
@media(min-width:1024px){ .mah-hero-grid{ grid-template-columns:1fr 1fr; gap:5rem; } }

.mah-badge{ display:inline-flex; align-items:center; gap:.6rem; padding:.5rem 1.1rem; border-radius:999px; background:#fff; box-shadow:0 2px 10px rgba(15,23,42,.06); border:1px solid rgba(42,125,225,.12); font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.12em; color:var(--mah-slate-700); }
.mah-badge svg{ width:16px; height:16px; color:var(--mah-blue); }

.mah-h1{ font-size:2.75rem; line-height:1.05; margin:1.25rem 0 1.1rem; color:var(--mah-slate-900); }
.mah-h1 strong{ font-weight:800; color:var(--mah-blue); display:block; }
@media(min-width:768px){ .mah-h1{ font-size:4.25rem; } }

.mah-lede{ font-size:1.1rem; color:var(--mah-slate-500); max-width:34rem; font-weight:300; }

.mah-hero-ctas{ display:flex; flex-wrap:wrap; gap:1rem; margin:2rem 0; }

.mah-trust{ display:flex; align-items:center; gap:1.25rem; padding-top:1.5rem; border-top:1px solid var(--mah-slate-200); }
.mah-trust-avatars{ display:flex; }
.mah-trust-avatars img, .mah-trust-avatars span{ width:44px; height:44px; border-radius:999px; border:2px solid #fff; box-shadow:0 2px 6px rgba(15,23,42,.08); object-fit:cover; margin-left:-14px; }
.mah-trust-avatars img:first-child, .mah-trust-avatars span:first-child{ margin-left:0; }
.mah-trust-avatars span{ background:var(--mah-slate-100); display:flex; align-items:center; justify-content:center; font-size:.7rem; font-weight:800; color:var(--mah-slate-500); }
.mah-stars{ color:#eab308; display:flex; gap:.15rem; margin-bottom:.25rem; }
.mah-stars svg{ width:16px; height:16px; }
.mah-trust-text{ font-size:.78rem; font-weight:700; color:var(--mah-slate-600); }
.mah-trust-text b{ color:var(--mah-blue); }

.mah-hero-media{ position:relative; }
.mah-hero-photo{ position:relative; border-radius:var(--mah-radius-xl); overflow:hidden; aspect-ratio:4/5; box-shadow:var(--mah-shadow-lg); }
.mah-hero-photo img{ width:100%; height:100%; object-fit:cover; }
.mah-hero-photo-tag{ position:absolute; top:1rem; left:1rem; display:flex; align-items:center; gap:.5rem; background:rgba(15,23,42,.8); color:#fff; font-size:.7rem; font-weight:700; padding:.45rem .9rem; border-radius:999px; }
.mah-hero-photo-tag .dot{ width:7px; height:7px; border-radius:999px; background:#34d399; }
.mah-hero-float{ position:absolute; bottom:-1.5rem; right:-1rem; background:#fff; border-radius:var(--mah-radius-lg); box-shadow:var(--mah-shadow-lg); padding:1.25rem 1.5rem; display:flex; align-items:center; gap:1rem; max-width:240px; }
.mah-hero-float .icon{ width:48px; height:48px; border-radius:999px; background:rgba(244,143,177,.2); color:var(--mah-pink-dark); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.mah-hero-float strong{ display:block; font-size:.85rem; color:var(--mah-slate-900); }
.mah-hero-float span{ font-size:.72rem; color:var(--mah-slate-500); }

/* ==========================================================================
   5. Section shells
   ========================================================================== */
.mah-section{ padding:5.5rem 0; }
.mah-section-alt{ background:var(--mah-slate-50); }
.mah-eyebrow{ display:inline-flex; padding:.4rem 1rem; border-radius:999px; background:rgba(42,125,225,.1); color:var(--mah-blue); font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.12em; margin-bottom:1rem; }
.mah-h2{ font-size:2.1rem; color:var(--mah-slate-900); }
.mah-h2 strong{ font-weight:800; }
@media(min-width:768px){ .mah-h2{ font-size:3rem; } }
.mah-section-desc{ color:var(--mah-slate-500); font-size:1.05rem; max-width:38rem; }
.mah-section-head{ display:flex; flex-direction:column; gap:1rem; margin-bottom:3rem; }
@media(min-width:768px){ .mah-section-head{ flex-direction:row; align-items:flex-end; justify-content:space-between; } }

/* Why choose us */
.mah-choose-grid{ display:grid; gap:3rem; align-items:center; }
@media(min-width:1024px){ .mah-choose-grid{ grid-template-columns:1fr 1fr; } }
.mah-feature{ display:flex; gap:1rem; align-items:flex-start; margin-bottom:1.5rem; }
.mah-feature .icon{ width:32px; height:32px; border-radius:999px; background:rgba(42,125,225,.1); color:var(--mah-blue); display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:.15rem; }
.mah-feature h4{ font-size:1.05rem; font-weight:700; color:var(--mah-slate-900); margin-bottom:.2rem; }
.mah-feature p{ font-size:.9rem; color:var(--mah-slate-500); }

/* Specialists */
.mah-doctors-grid{ display:grid; gap:2rem; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); }
.mah-doctor-card{ background:#fff; border:1px solid var(--mah-slate-100); border-radius:var(--mah-radius-lg); overflow:hidden; transition:.25s; }
.mah-doctor-card:hover{ box-shadow:0 20px 45px -20px rgba(42,125,225,.25); transform:translateY(-3px); }
.mah-doctor-photo{ aspect-ratio:4/5; overflow:hidden; background:var(--mah-slate-100); }
.mah-doctor-photo img{ width:100%; height:100%; object-fit:cover; }
.mah-doctor-body{ padding:1.25rem 1.4rem 1.5rem; }
.mah-doctor-body h4{ font-size:1rem; font-weight:800; color:var(--mah-slate-900); margin-bottom:.2rem; }
.mah-doctor-body span{ font-size:.78rem; font-weight:700; color:var(--mah-blue); }

/* Gallery */
.mah-gallery-grid{ display:grid; gap:1.25rem; grid-template-columns:repeat(2,1fr); }
@media(min-width:768px){ .mah-gallery-grid{ grid-template-columns:repeat(4,1fr); grid-auto-rows:180px; } }
.mah-gallery-item{ position:relative; border-radius:1.5rem; overflow:hidden; }
.mah-gallery-item img{ width:100%; height:100%; object-fit:cover; transition:.5s; }
.mah-gallery-item:hover img{ transform:scale(1.06); }
.mah-gallery-item .cap{ position:absolute; inset:auto 0 0 0; padding:1rem; background:linear-gradient(to top, rgba(15,23,42,.85), transparent); color:#fff; opacity:0; transition:.25s; }
.mah-gallery-item:hover .cap{ opacity:1; }
.mah-gallery-item .cap strong{ display:block; font-size:.85rem; }
.mah-gallery-item .cap span{ font-size:.72rem; color:var(--mah-slate-200); }
@media(min-width:768px){
  .mah-gallery-item.tall{ grid-row:span 2; }
}

/* Testimonials */
.mah-testi-grid{ display:grid; gap:2rem; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.mah-testi-card{ background:#fff; border:1px solid var(--mah-slate-100); border-radius:var(--mah-radius-lg); padding:2rem; position:relative; box-shadow:0 2px 10px rgba(15,23,42,.03); }
.mah-testi-card p{ font-size:1.05rem; color:var(--mah-slate-600); margin:1.25rem 0; }
.mah-testi-card .name{ font-weight:800; color:var(--mah-slate-900); }

/* Locations */
.mah-location-grid{ display:grid; gap:3rem; align-items:center; }
@media(min-width:1024px){ .mah-location-grid{ grid-template-columns:1fr 1fr; } }
.mah-map-frame{ border-radius:var(--mah-radius-xl); overflow:hidden; border:1px solid var(--mah-slate-200); min-height:340px; }
.mah-map-frame iframe{ width:100%; height:100%; min-height:340px; border:0; display:block; }

/* CTA band */
.mah-cta{ background:var(--mah-blue); padding:5.5rem 0; text-align:center; color:#fff; }
.mah-cta h2{ font-size:2.2rem; color:#fff; margin-bottom:1.25rem; }
.mah-cta h2 strong{ font-weight:800; }
@media(min-width:768px){ .mah-cta h2{ font-size:3.4rem; } }
.mah-cta p{ color:#dbeafe; font-size:1.05rem; max-width:34rem; margin:0 auto 2rem; }
.mah-cta .mah-hero-ctas{ justify-content:center; }

/* ==========================================================================
   6. Appointment form
   ========================================================================== */
.mah-appt-card{ background:#fff; border:1px solid var(--mah-slate-100); border-radius:var(--mah-radius-xl); box-shadow:var(--mah-shadow-lg); padding:2.5rem; }
.mah-appt-card .icon-badge{ width:56px; height:56px; border-radius:1rem; background:rgba(42,125,225,.1); color:var(--mah-blue); display:flex; align-items:center; justify-content:center; margin-bottom:1.5rem; }
.mah-appt-card h3{ font-size:1.4rem; font-weight:800; color:var(--mah-slate-900); margin-bottom:1.5rem; }
.mah-field{ width:100%; background:var(--mah-slate-50); border:1px solid var(--mah-slate-200); border-radius:.85rem; padding:.95rem 1.1rem; margin-bottom:1rem; font-size:.9rem; color:var(--mah-slate-800); }
.mah-field:focus{ outline:none; border-color:var(--mah-blue); box-shadow:0 0 0 3px rgba(42,125,225,.15); }
textarea.mah-field{ resize:vertical; min-height:100px; }
.mah-notice{ padding:.9rem 1.1rem; border-radius:.85rem; font-size:.85rem; font-weight:600; margin-bottom:1.25rem; }
.mah-notice-success{ background:#ecfdf5; color:#047857; border:1px solid #a7f3d0; }
.mah-notice-error{ background:#fef2f2; color:#b91c1c; border:1px solid #fecaca; }

/* ==========================================================================
   7. Footer
   ========================================================================== */
.mah-footer{ background:var(--mah-slate-900); color:var(--mah-slate-400); }
.mah-footer-top{ padding:4.5rem 0; display:grid; gap:3rem; grid-template-columns:1fr; }
@media(min-width:768px){ .mah-footer-top{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:1024px){ .mah-footer-top{ grid-template-columns:repeat(4,1fr); } }
.mah-footer h3{ color:#fff; font-size:.85rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; }
.mah-footer h4{ color:#fff; font-size:.82rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; margin-bottom:1.5rem; }
.mah-footer-brand{ display:flex; align-items:center; gap:.75rem; margin-bottom:1.25rem; }
.mah-footer-brand img{ width:40px; height:40px; border-radius:.85rem; background:#fff; padding:2px; object-fit:contain; }
.mah-footer-brand span{ display:block; font-size:.68rem; color:var(--mah-blue); font-weight:700; text-transform:uppercase; letter-spacing:.12em; }
.mah-footer p.desc{ font-size:.88rem; line-height:1.7; padding-right:1rem; }
.mah-social{ display:flex; gap:.75rem; margin-top:1.25rem; }
.mah-social a{ width:34px; height:34px; border-radius:999px; background:var(--mah-slate-800); display:flex; align-items:center; justify-content:center; transition:.2s; }
.mah-social a:hover{ background:var(--mah-blue); color:#fff; }
.mah-footer ul li{ margin-bottom:.75rem; font-size:.88rem; }
.mah-footer ul li a{ display:flex; align-items:center; gap:.5rem; transition:.2s; }
.mah-footer ul li a:hover{ color:#fff; }
.mah-footer ul li a .dot{ width:5px; height:5px; border-radius:999px; background:var(--mah-slate-700); flex-shrink:0; }
.mah-footer .contact-list li{ display:flex; align-items:flex-start; gap:.75rem; }
.mah-footer .contact-list svg{ width:18px; height:18px; color:var(--mah-blue); flex-shrink:0; margin-top:.15rem; }
.mah-footer-bottom{ border-top:1px solid var(--mah-slate-800); background:var(--mah-slate-950); padding:1.4rem 0; }
.mah-footer-bottom .mah-container{ display:flex; flex-direction:column; gap:1rem; align-items:center; justify-content:space-between; font-size:.75rem; color:#64748b; }
@media(min-width:768px){ .mah-footer-bottom .mah-container{ flex-direction:row; } }
.mah-footer-bottom .legal{ display:flex; gap:1.5rem; }
.mah-footer-bottom .legal a:hover{ color:var(--mah-slate-200); }

/* Sticky mobile CTA */
.mah-sticky-cta{ position:fixed; left:1.25rem; right:1.25rem; bottom:1.25rem; z-index:60; display:flex; gap:.6rem; }
.mah-sticky-cta .mah-btn-primary{ flex:1; box-shadow:0 15px 35px -10px rgba(42,125,225,.5); }
.mah-sticky-cta .call{ width:56px; height:56px; border-radius:1rem; background:#fff; color:var(--mah-pink-dark); display:flex; align-items:center; justify-content:center; box-shadow:0 15px 35px -10px rgba(15,23,42,.3); border:1px solid var(--mah-slate-200); flex-shrink:0; }
@media(min-width:1024px){ .mah-sticky-cta{ display:none; } }

/* Basic page/post content */
.mah-page-content{ padding:5rem 0; max-width:800px; margin:0 auto; }
.mah-page-content h1{ font-size:2.5rem; font-weight:700; margin-bottom:1.5rem; }
.mah-page-content h2{ font-size:1.6rem; font-weight:700; margin:2rem 0 1rem; }
.mah-page-content p{ margin-bottom:1.25rem; color:var(--mah-slate-600); line-height:1.8; }
.mah-page-content img{ border-radius:1rem; margin:1.5rem 0; }
.mah-page-content ul{ list-style:disc; padding-left:1.5rem; margin-bottom:1.25rem; color:var(--mah-slate-600); }

/* WP core alignment helpers */
.alignleft{ float:left; margin:.3rem 1.5rem 1rem 0; }
.alignright{ float:right; margin:.3rem 0 1rem 1.5rem; }
.aligncenter{ display:block; margin:1rem auto; }