/* Header Styles */
.header {
    position: sticky;
    top: 0;
    background-color: #f8f9fa; /* Light gray background */
    padding: 15px 0;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    z-index: 999; /* Always stay on top */
}

.header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Branding */
.brand-title {
    font-size: 1.5rem;
    font-weight: bold;
    font-family: 'Mukta', 'Poppins', sans-serif;
    background: linear-gradient(90deg, #7b2cbf, #c792e9);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-decoration: none;
    margin: 0;
    text-align: center;
    margin-bottom: .25rem !important;
}

/* Trademark superscript next to brand */
.brand-title .tm {
  font-size: 0.88em;        /* larger, more legible */
  vertical-align: text-top; /* align closer to the x-height for balance */
  margin-left: 0.12rem;     /* slight gap */
  color: var(--brand-primary);  /* brand-colored TM for clarity */
  font-weight: 600;
  line-height: 1;

  -webkit-font-smoothing: antialiased;
}

/* Keep an explicit sr-only label for accessibility */
.brand-title .sr-only{
  position:absolute !important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

.text-decoration-none:hover {
    text-decoration: none;
}

.header-logo {
    height: 40px;
    width: auto;
}

.header a:hover {
    opacity: 0.85;
}

.spiritual-subline {
    margin-top: 0px !important;
    font-size: 0.6rem;
    color: #6a1b9a;
    text-align: center;
    line-height: 1.1;
}


.header h3 {
    font-size: 1.2rem;
    font-weight: bold;
    color: #6a1b9a; /* Deep Purple */
    text-decoration: none;
    font-family: 'Mukta', 'Poppins', sans-serif;
}

.header h3:hover {
    color: #4a148c; /* Darker purple */
}

/* Hamburger Menu */
.hamburger-menu {
    font-size: 1.8rem;
    background: none;
    border: none;
    cursor: pointer;
    color: #7b2cbf;
    margin-right: 12px;
    vertical-align: middle;
}

.hamburger-menu:hover {
    opacity: 0.7;
}

/* Right-Side Logo */
.header-logo {
    height: 32px;
    width: auto;
    margin-left: 12px;
    vertical-align: middle;
}

/* Mobile Menu (Refined) */
.mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 250px;
    height: 100vh;
    background: #fff;
    box-shadow: 2px 0px 10px rgba(0, 0, 0, 0.2);
    padding-top: 45px;
    transform: translateX(-100%);
    transition: transform 0.3s ease-in-out;
    z-index: 1000;
}

.mobile-menu.show {
    transform: translateX(0);
}

.mobile-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mobile-menu ul li {
    padding: 15px;
    border-bottom: 1px solid #ddd;
}

.mobile-menu ul li a {
  text-decoration: none;
  font-size: 1.02rem; /* slightly smaller for compact menu */
  color: var(--brand-primary, #7b2cbf); /* brand purple */
  display: block;
  line-height: 1.2;
  padding-left: 18px; /* keep a consistent left inset */
}

.mobile-menu ul li a:hover,
.mobile-menu ul li a:focus {
  background: #f1f1f1;
  color: var(--brand-primary-600, #6925a6);
  outline: none;
}

.close-button {
    position: absolute; /* Absolute to .mobile-menu, not fixed to screen */
    top: 15px;
    right: 15px;
    width: 36px;
    height: 36px;
    font-size: 20px;
    background-color: #f2e9fb; /* Light purple background */
    border: none;
    border-radius: 50%;
    cursor: pointer;
    color: #7b2cbf; /* Brand purple */
    z-index: 1001;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease-in-out, background-color 0.2s;
}

.close-button:hover {
    transform: scale(1.15);
    background-color: #e3d0f7;
}

.header .container {
  max-width: 760px;      /* match main content */
  margin: 0 auto;        /* center it */
  padding-left: 12px;    /* optional breathing */
  padding-right: 12px;
}

:root{
  --page-max: 760px;
  --page-pad: 12px;
}

.header{
  position: sticky;
  top: 0;
  width: 100%;                 /* full-bleed bar */
  background-color: #f8f9fa;
  padding: 12px 0;
  box-shadow: 0 2px 5px rgba(0,0,0,.1);
  z-index: 999;
}

.header .container{
  max-width: var(--page-max);  /* match page width */
  margin: 0 auto;              /* center content */
  padding: 0 var(--page-pad);  /* side breathing */
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Full-bleed bar (no rounded “card” look) */
.header{
  position: sticky;
  top: 0;
  left: 0; right: 0;
  width: 100%;
  margin: 0 !important;
  border-radius: 0 !important;
}

/* Inner content width = your page width */
:root{ --page-max: 760px; --page-pad: 12px; }   /* keep with your home value */
.header .container{
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--page-pad);
}

/* Optional: tone down the card-y shadow on phones */
@media (max-width: 600px){
  .header{ box-shadow: 0 1px 3px rgba(0,0,0,.06); }
}

/* Make TM slightly larger on smaller screens so it's legible */
@media (max-width: 600px) {
  .brand-title .tm { font-size: 0.98em; margin-left: 0.12rem; color: var(--brand-primary); }
}



/* Import Web Font */
@import url('https://fonts.googleapis.com/css2?family=Mukta:wght@500;700&family=Poppins:wght@500&display=swap');


/* ==== Global header + language selector styles ==== */

/* Brand tokens (tweak to your palette) */
:root{
  --brand-primary: #7b2cbf;     /* Jathagam purple */
  --brand-primary-600:#6925a6;
  --brand-bg: #f7f2fb;
  --brand-ring: rgba(123,44,191,.35);
  --text-high: #2a2342;
  --text-mid: #5c5470;
  --border-soft:#e8daf7;
  --white:#fff;
}

/* Utility for accessible hidden labels */
.sr-only{
  position:absolute !important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* Wrapper aligns selector neatly with header/breadcrumb bars */
.language-toggle-wrapper{
  display:flex; justify-content:flex-end; align-items:center;
  gap:.5rem; margin: .5rem 0 1rem 0;
}

/* Pretty native <select> (no JS) */
.language-toggle{
  -webkit-appearance:none; appearance:none;
  background: var(--brand-bg);
  border: 1px solid var(--border-soft);
  border-radius: 9999px;               /* pill */
  padding: .45rem 2.25rem .45rem .85rem;
  font-weight: 600;
  color: var(--text-high);
  outline: none;
  line-height: 1.2;
  box-shadow: 0 1px 0 rgba(0,0,0,.03), inset 0 0 0 1px #fff;
  transition: .18s ease;
  border: #7b2cbf 1px solid; /* brand purple */
}

/* arrow caret */
.language-toggle-wrapper {
  position: relative;
}
.language-toggle-wrapper::after{
  content: "▾";
  position:absolute; right: .75rem; top: 50%; transform: translateY(-50%);
  pointer-events:none; color: var(--brand-primary);
  font-size: .9rem;
}

/* Styling for the native select to match brand */
.language-toggle {
  -webkit-appearance:none; appearance:none;
  background: linear-gradient(90deg, var(--brand-bg), #fff);
  border: 1px solid var(--border-soft);
  color: var(--text-high);
  padding: .42rem 2.2rem .42rem .85rem;
  border-radius: 9999px; /* pill */
  font-weight: 600;
  cursor: pointer;
}

.language-toggle option{
  font-weight: 500;
}

.language-toggle:focus{
  outline: none;
  box-shadow: 0 0 0 4px var(--brand-ring);
  border-color: var(--brand-primary-600);
}

/* Small variant already exists but ensure consistent sizing */
.language-toggle--sm{ padding:.32rem 1.6rem .32rem .65rem; font-size:.95rem; }

/* Hover / focus */
.language-toggle:hover{
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px var(--brand-ring);
}
.language-toggle:focus{
  border-color: var(--brand-primary-600);
  box-shadow: 0 0 0 3px var(--brand-ring);
}

/* Compact on very small screens */
@media (max-width: 420px){
  .language-toggle{ padding:.4rem 2.1rem .4rem .7rem; font-size:.95rem; }
}

/* High-contrast / forced-colors support */
@media (forced-colors: active){
  .language-toggle{ border: 1px solid ButtonText; }
  .language-toggle-wrapper::after{ color: ButtonText; }
}

/* (Optional) dark mode token swap if you add dark theme later)
@media (prefers-color-scheme: dark){
  :root{
    --brand-bg: #2c2140;
    --border-soft:#3f2d63;
    --text-high:#f7f4fb;
    --text-mid:#cfc5e8;
  }
}

/* ==== Language selector: compact + top-right placement ==== */

/* Smaller pill */
.language-toggle--sm{
  padding: .30rem 1rem .30rem .65rem;   /* tighter than default */
  font-size: .75rem;
  color: #7b2cbf;               /* brand purple */
  font-weight: 500;
}

/* Put the selector right-aligned under the site header */
.lang-top-right{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  margin: .2rem 0 .35rem; 
  position: relative;                      /* keeps caret "::after" positioned */
}

/* Keep the caret aligned for the new wrapper too */
.lang-top-right::after{
  content: "▾";
  position:absolute;
  right: .55rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events:none;
  color: var(--brand-primary);
  font-size: 1.9rem;
}