/* Master stylesheet: extracted shared styles and overrides for AyurDatta site */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root{
  --brand-green: #107569;
  --brand-green-2: #1a9e8f;
  --muted-ink: #344054;
}

html,body{
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  color: var(--muted-ink);
  background-color: #f8f9fa; /* match original pages' soft background */
}

/* Global container */
.container{ width: 100%; max-width: 1100px; margin-left: auto; margin-right: auto; padding-left: 1rem; padding-right: 1rem; }

/* Header / Nav */
.site-header{ background: #fff; border-bottom: 1px solid #eef2f7; position: sticky; top: 0; z-index: 40; }
.site-header .site-brand{ display: flex; align-items: center; gap: .75rem; padding: 1rem 0; }
.site-brand img{ height: 38px; width: auto; }
.nav{ display: flex; gap: 1rem; align-items: center; }
.nav a{ color: var(--muted-ink); padding: 0.5rem .6rem; border-radius: 6px; text-decoration: none; }
.nav a:hover{ background: #f8fafb; color: var(--brand-green); }

/* Mobile menu */
.mobile-menu-button{ display: none; background: transparent; border: none; padding: .5rem; }
.mobile-menu{ display: none; }

/* Hero */
.hero{ padding: 3.5rem 0; }
.hero h1{ font-size: 2rem; line-height: 1.05; }
.hero p.lead{ color: #475569; margin-top: .5rem; max-width: 72ch; }

/* Buttons */
.btn{ display: inline-flex; align-items: center; gap: .6rem; padding: .6rem 1rem; border-radius: 8px; font-weight: 600; text-decoration: none; }
.btn-primary{ background: linear-gradient(90deg,var(--brand-green),var(--brand-green-2)); color: #fff; box-shadow: 0 6px 18px rgba(16,117,105,0.12); }
.btn-outline{ border: 1px solid #e6eef0; background: #fff; color: var(--muted-ink); }

/* CTA section used on about page */
.cta-section{ margin-top: 1.75rem; background: linear-gradient(180deg, rgba(16,117,105,0.03), rgba(255,255,255,0.01)); border: 1px solid rgba(16,117,105,0.04); border-radius: 12px; }
.cta-section .cta-inner{ display:flex; align-items:center; justify-content:space-between; }
.cta-section .cta-text p{ margin:0; }
.cta-section .cta-btn{ padding: .6rem .95rem; }

/* Equalize CTA button heights without changing padding: use an inline-grid so buttons stretch to the
   tallest button while preserving their internal padding and allowing text to wrap naturally. On
   small screens fall back to the previous flex stacking for alignment parity. */
.cta-section .cta-actions{
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  grid-auto-rows: 1fr; /* make each row consume the same available height */
  gap: .75rem;
  align-items: stretch; /* ensure children stretch to fill the row height */
}
.cta-section .cta-actions .cta-btn{
  /* allow long labels to wrap to multiple lines */
  white-space: normal;
  align-self: stretch; /* explicit stretch on grid children */
}

@media(max-width:640px){
  .cta-section .cta-inner{ flex-direction:column; gap: .75rem; align-items:stretch; }
  /* restore original mobile behavior (stacked actions, right-aligned) */
  .cta-section .cta-actions{ display:flex; justify-content:flex-end; gap: .75rem; }
}

/* Forms */
.form-field{ display: flex; flex-direction: column; gap: .4rem; }
.form-field input, .form-field textarea, .form-field select{ padding: .6rem .75rem; border: 1px solid #e6eef0; border-radius: 8px; }

/* Footer */
.site-footer{ background: #fff; border-top: 1px solid #eef2f7; padding: 2rem 0; color: #475569; }


.text-gradient{
  background: linear-gradient(90deg, #0ea5a1, #107569 40%, #1a9e8f 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

/* Hero visual: full-bleed background, overlay, and slow zoom for subtle motion */
.hero-bg{
  /* background-image intentionally removed so hero slideshow ( .hero-slide ) controls visuals */
  background-color: #08332f; /* subtle fallback color */
  padding: 5.5rem 0;
  position: relative;
}
.hero-overlay{
  position: absolute; inset: 0; z-index: 2; /* sit above slides to provide consistent tint */
  /* Overlay alpha is configurable via the CSS variable `--hero-overlay-alpha` so pages can
     request a light or high tint. Default is 0.25 (light). Set on the page or body like:
     <section id="hero" style="--hero-overlay-alpha:0.79"> */
  background: linear-gradient(180deg, rgba(2,6,23,var(--hero-overlay-alpha,0.25)), rgba(2,6,23,var(--hero-overlay-alpha,0.25)));
}
.hero-inner .text-gradient{
  /* Headline color is configurable via --hero-headline-color (use brand green or white).
     Example: <section id="hero" style="--hero-headline-color:#107569"> */
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: unset !important;
  color: var(--hero-headline-color, #ffffff) !important;
}

.hero-inner h1, .hero-inner p{
  text-shadow: 0 8px 22px rgba(2,6,23,0.6);
}
.hero-inner{ position: relative; z-index: 10; }

/* Slow zoom animation on the background (visual interest) */
@keyframes slow-zoom {
  from { transform: scale(1); }
  to { transform: scale(1.04); }
}
.hero-bg::after{
  /* decorative layer to enable GPU-accelerated transform */
  content: '';
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  transform-origin: center center;
  animation: slow-zoom 18s ease-in-out infinite alternate;
}

/* Hero slideshow slides (crossfade) */
.hero-slide{
  position: absolute; inset: 0; z-index: 1; background-size: cover; background-position: center center; background-repeat: no-repeat; opacity: 0; transition: opacity 1s ease; will-change: opacity, transform;
}
.hero-slide.active{ opacity: 1; z-index: 1; }

.cta-button{
  transition: transform .18s ease, box-shadow .18s ease;
}
.cta-button:hover{
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(16,117,105,0.12);
}

.service-tab{
  transition: color .15s ease, background-color .15s ease, transform .12s ease;
}
.service-tab.active{
  color: var(--brand-green);
  border-bottom: 3px solid rgba(163,233,225,0.9);
}

.chart-container{
  position: relative;
  width: 100%;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  height: 400px;
  max-height: 50vh;
}

/* Improve responsiveness of chart canvas */
.chart-container canvas{ width:100% !important; height:100% !important; }

/* Layout and section helpers used across pages */
.section-header{
  border-left: 4px solid var(--brand-green);
  padding-left: 1.5rem;
}

.indication-list{
  columns: 2;
  -webkit-columns: 2;
  -moz-columns: 2;
}

.service-pillar{ border-left: 4px solid var(--brand-green); }
.service-category{ border-top: 1px solid #e5e7eb; padding-top: 1.5rem; margin-top: 2rem; }

/* Larger, more photographic service images to increase visual impact */
.service-image{ max-width:320px; width:100%; height:auto; display:block; margin:0 auto 1rem; border-radius:12px; object-fit:cover; box-shadow: none; border: 0; background: transparent; }

/* Small responsive tweaks */
@media (max-width:640px){
  .chart-container{ height: 300px; }
  .indication-list{ columns: 1; }
  .nav{ display: none; }
  .mobile-menu-button{ display: inline-flex; }
  .mobile-menu{ display: block; padding: 1rem 0; }
  .site-header .container{ display:flex; justify-content:space-between; align-items:center; }
}

/* Responsive typography scale */
@media (min-width: 768px){
  .hero h1{ font-size: 3.25rem; }
  .hero p.lead{ font-size: 1.125rem; }
}

@media (min-width: 1024px){
  .hero h1{ font-size: 4rem; }
}

/* Card grid responsive helpers */
.cards{ display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media(min-width: 640px){ .cards{ grid-template-columns: repeat(2, 1fr); } }
@media(min-width: 1024px){ .cards{ grid-template-columns: repeat(3, 1fr); } }

/* Card visual treatment */
.card{ background: #fff; border: 1px solid #eef2f7; padding: 1.25rem; border-radius: 12px; box-shadow: 0 6px 18px rgba(16,117,105,0.04); }

/* Core values: icon cards */
.value-card{ display:flex; gap:1rem; align-items:flex-start; transition: transform .12s ease, box-shadow .12s ease; }
.value-card:focus, .value-card:hover{ transform: translateY(-6px); box-shadow: 0 14px 30px rgba(16,117,105,0.08); }
.value-icon{ width:56px; height:56px; border-radius:12px; display:flex; align-items:center; justify-content:center; background: linear-gradient(180deg, rgba(16,117,105,0.06), rgba(26,158,143,0.03)); color: var(--brand-green); flex-shrink:0; }
.value-icon svg{ width:28px; height:28px; }

@media (max-width:640px){
  .value-card{ flex-direction:row; }
}


/* Responsive tables */
.responsive-table{ width:100%; overflow-x:auto; -webkit-overflow-scrolling: touch; }
.responsive-table table{ width: 100%; border-collapse: collapse; }
.responsive-table th, .responsive-table td{ padding: .75rem; border-bottom: 1px solid #eef2f7; text-align: left; }

/* Images */
img{ max-width: 100%; height: auto; display: block; }
/* Increase avatar size by ~50% (72px -> 108px) for index and about pages. Keep a smaller size on small screens. */
.avatar{
  /* Responsive avatar size: increase minimum so mobile keeps visual weight */
  width: clamp(108px, 12vw, 140px);
  height: clamp(108px, 12vw, 140px);
  border-radius: 9999px;
  object-fit: cover;
}

/* Removed small-screen avatar override so avatars keep their responsive clamp() sizing on mobile */

/* Name + credentials layout helper
   - On wide screens: horizontal (name + credentials on same line)
   - On medium and smaller screens: stack vertically to avoid awkward wrapping
*/
.name-credentials{ display:flex; align-items:center; gap:0.75rem; justify-content:center; }
@media (max-width:1000px){
  .name-credentials{ flex-direction:column; gap:0.25rem; }
  .name-credentials h4, .name-credentials h3{ margin:0; }
}

/* Small helpers */
.muted{ color: #646e78; }
.kbd{ background: #f1f5f9; border: 1px solid #e6eef0; padding: .1rem .4rem; border-radius: 6px; font-size: .9rem; }

/* Improve link focus and hover for accessibility */
a:hover{ text-decoration: none; }

/* Reduce hero padding on small screens */
@media(max-width:420px){ .hero{ padding: 2rem 0; } }


/* Focus styles for accessibility */
a:focus, button:focus, input:focus, textarea:focus{
  outline: 3px solid rgba(16,117,105,0.18);
  outline-offset: 2px;
}

/* Profile page tweaks */
.avatar--lg{ display: inline-block; }
@media (max-width:640px){
  /* Make avatar larger on small screens (overrides Tailwind when present) */
  .avatar--lg{ width: 14rem !important; height: 14rem !important; }
}

/* Compact definition-list styling for profile highlights */
.compact-dl{ display:block; }
.compact-dl .compact-row{ display:grid; grid-template-columns: 160px 1fr; gap: 0.75rem; align-items:baseline; margin-bottom: .5rem; }
.compact-dl dt{ color: #0f766e; font-weight:600; }
.compact-dl dd{ margin:0; color: #475569; }
/* Increase label column on medium+ and large screens to prevent wrapping for longer dt labels */
@media (min-width: 768px){
  .compact-dl .compact-row{ grid-template-columns: 200px 1fr; }
  .compact-dl dt{ white-space: nowrap; }
}
@media (min-width: 1024px){
  .compact-dl .compact-row{ grid-template-columns: 240px 1fr; }
}
@media (max-width:768px){
  .compact-dl .compact-row{ grid-template-columns: 1fr; }
  .compact-dl dt{ white-space: normal; }
}

/* Slight visual divider between header and content card when card uses border-top */
.page-card-divider{ border-top: 1px solid #eef2f7; padding-top: 1rem; }

/* Modal overlay and container (team member modal) */
.modal-overlay{
  position: fixed;
  inset: 0;
  display: none; /* hidden by default; JS will toggle */
  align-items: center;
  justify-content: center;
  background: rgba(2,6,23,0.55);
  z-index: 1100;
  padding: 1.25rem;
}
.modal-overlay.show{
  display: flex;
}
.modal-container{
  width: 100%;
  max-width: 980px;
  background: linear-gradient(180deg, #ffffff 0%, #fbfcfd 100%);
  border-radius: 12px;
  box-shadow: 0 30px 60px rgba(2,6,23,0.28);
  overflow: hidden;
  transform: translateY(-20px);
  opacity: 0;
  transition: transform .28s cubic-bezier(.2,.9,.2,1), opacity .28s ease;
  display: flex;
  flex-direction: column;
}
.modal-overlay.show .modal-container{
  transform: translateY(0);
  opacity: 1;
}
.modal-container .modal-header{ border-bottom: 1px solid #eef2f7; }
.modal-container .modal-footer{ border-top: 1px solid #eef2f7; }
.modal-close{
  background: #fff;
  border: 1px solid #e6eef0;
  font-size: 1.2rem;
  line-height: 1;
  padding: 0; /* square button */
  cursor: pointer;
  color: #475569;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 14px rgba(2,6,23,0.12);
  position: absolute;
  top: 6px;
  right: 12px;
  z-index: 1200;
}
.modal-content{ position: relative; display:flex; flex-direction:column; flex:1; min-height:0; }
.modal-container img.img-fluid{ width: 170px; height: 170px; object-fit: cover; border-radius: 9999px; border: 6px solid rgba(16,117,105,0.06); box-shadow: 0 8px 18px rgba(16,117,105,0.06); }

@media (max-width: 640px){
  .modal-container{ max-width: 95%; }
  .modal-container img.img-fluid{ width: 120px; height: 120px; }
}

/* Modal layout: left column image, right column content */
.modal-body > .row{ display: grid; grid-template-columns: 220px 1fr; gap: 1rem; align-items: start; }
.modal-body > .row .col-md-4, .modal-body > .row .left-col{ display:flex; flex-direction:column; align-items:center; padding: 0.5rem 0.75rem; }
.modal-body > .row .col-md-8, .modal-body > .row .right-col{ padding: 0.5rem 0.75rem; }

/* Constrain modal max height and make content scrollable on small screens */
.modal-container{ max-height: calc(100vh - 64px); }
.modal-body{ overflow: auto; padding: 0; }
.modal-body .modal-inner-content{ padding: 0.75rem 1rem; }

@media (max-width: 880px){
  .modal-body > .row{ grid-template-columns: 1fr; }
  .modal-body > .row .col-md-4, .modal-body > .row .left-col{ order: 0; padding-bottom: .5rem; }
  .modal-body > .row .col-md-8, .modal-body > .row .right-col{ order: 1; }
  .modal-container{ max-width: 96%; }
}

/* When content is tall, ensure modal body scrolls but header/footer stay visible */
.modal-container .modal-header{ flex: 0 0 auto; }
.modal-container .modal-footer{ flex: 0 0 auto; }
.modal-container .modal-body{ flex: 1 1 auto; min-height:0; }

/* Modal header styling */
.modal-container .modal-header{ display:flex; align-items:center; justify-content:space-between; padding: .75rem 1rem; }
.modal-container .modal-header h5{ margin:0; font-weight:600; color: #0f766e; }

/* Typography inside modal */
.modal-container h4{ margin: .25rem 0 .5rem 0; font-size: 1.05rem; }
.modal-container p{ color: #374151; line-height:1.6; }

/* Footer buttons */
.modal-container .modal-footer{ display:flex; gap: .5rem; align-items:center; justify-content:space-between; padding: .75rem 1rem; background: linear-gradient(180deg,#fbfcfd,#fff); }
.modal-container .modal-footer .btn{ padding: .45rem .9rem; border-radius: 8px; }
.modal-container .modal-footer .btn.btn-primary{ background: linear-gradient(90deg,var(--brand-green),var(--brand-green-2)); color: #fff; }
.modal-container .modal-footer .btn.btn-link{ color: #475569; }

/* Make sure list sections have spacing */
.modal-container .experience-section, .modal-container .education-section{ margin-top: 1rem; }
.modal-container .experience-section h5, .modal-container .education-section h5{ margin-bottom: .5rem; color: #0f766e; }

/* Social buttons inside modal (LinkedIn / Email) */
.member-social-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:8px; border:1px solid #e6eef0; background:#fff; color:var(--muted-ink); margin-right:.5rem; text-decoration:none;
}
.member-social-btn i{ font-size:14px; }
.member-social-btn:hover{ background: linear-gradient(90deg, rgba(16,117,105,0.04), #fff); color: var(--brand-green); border-color: rgba(16,117,105,0.08); }

/* Headings inside modal body (About / Experience / Education) */
.modal-body h5{ color: var(--brand-green); font-weight:600; margin-top: .6rem; margin-bottom: .35rem; font-size: 1rem; }

/* Slightly reduce the top padding of header area so close button sits visually closer to edge */
.modal-container .modal-header{ padding-top: .6rem; padding-bottom: .5rem; }

/* Small screens: ensure modal content scrolls internally rather than growing beyond viewport */
@media (max-height: 700px){
  .modal-container{ max-height: calc(100vh - 40px); }
}

/* Floating back-to-top button */
.back-to-top{
  position: fixed;
  right: 1rem;
  bottom: 1.25rem;
  width: 44px;
  height: 44px;
  border-radius: 9999px;
  background: var(--brand-green);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px rgba(16,117,105,0.16);
  z-index: 1200;
  transform: translateY(8px);
  opacity: 0;
  transition: opacity .18s ease, transform .18s ease;
}
.back-to-top.show{
  transform: translateY(0);
  opacity: 1;
}
.back-to-top:focus{ outline: 3px solid rgba(255,255,255,0.18); outline-offset: 2px; }
.back-to-top svg{ width:18px; height:18px; }

/* Article listing tweaks */
.article-card img { transition: transform .25s ease; }
.article-card:hover img { transform: scale(1.03); }

.prose img { max-width: 100%; height: auto; }

/* Make links inside article/news bodies clearly visible: green and underlined */
.prose a {
  color: var(--brand-green);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  font-weight: 600;
}
.prose a:hover,
.prose a:focus {
  color: var(--brand-green-2);
  text-decoration-color: var(--brand-green-2);
}
.prose a:visited {
  color: #0e6b5f; /* slightly darker green for visited links */
}

/* Reveal on scroll utility */
.reveal{ opacity:0; transform: translateY(12px); transition: opacity .64s ease, transform .64s ease; will-change: opacity, transform; }
.reveal.visible{ opacity:1; transform: none; }