/* =====================================================================
   Hello Mithila — hand-written site styles.

   Loaded AFTER the compiled app.css. Everything here is deliberately outside
   Tailwind, because app.css is a build artefact and there is no Node on the
   server: a class added to a template but not present when the build ran does
   nothing at all, silently. That has caught this project before (README §6).
   Anything in this file works the moment it is uploaded.
   ===================================================================== */

/* ------------------------------------------------------- scrollbars */
/* Firefox and modern Chromium. The track is the sand the page already sits
   on and the thumb is the gold from the border palette, so the bar reads as
   part of the page rather than as the operating system's grey slab. */
html {
  scrollbar-color: #C08A2E #F0E3CB;
  scrollbar-width: thin;
}

/* WebKit needs its own set; scrollbar-color is ignored there. */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track {
  background: #F0E3CB;
  border-inline-start: 1px solid #E6D8BE;
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #D3A24A 0%, #C08A2E 55%, #A87522 100%);
  border: 3px solid #F0E3CB;   /* inset, so the thumb reads as a rounded pill */
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: #7A1A16; }
::-webkit-scrollbar-corner { background: #F0E3CB; }

/* The maroon panels need a light thumb; a gold bar on maroon is invisible.
   Applied to the footer and to any element that opts in. */
.sb-dark {
  scrollbar-color: #E8B96A rgba(0, 0, 0, .28);
  scrollbar-width: thin;
}
.sb-dark::-webkit-scrollbar-track { background: rgba(0, 0, 0, .28); border: 0; }
.sb-dark::-webkit-scrollbar-thumb {
  background: #E8B96A; border: 3px solid transparent;
  background-clip: padding-box; border-radius: 999px;
}

/* ------------------------------------------- header / nav separation */
/* The top bar, the menu strip and the page hero were all bg-maroon, so the
   three ran together as one flat block of colour and the menu had no edge of
   its own. The menu strip now sits a shade deeper than both, which gives the
   hero somewhere to start. */
.hm-navbar {
  background: linear-gradient(180deg, #5E120F 0%, #55100D 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06),
              0 1px 0 rgba(0, 0, 0, .25);
}

/* A thin gold rule under the menu, matching the aripan borders used
   throughout the site. */
.hm-navbar::after {
  content: "";
  display: block;
  height: 2px;
  background: linear-gradient(90deg,
    rgba(192, 138, 46, 0) 0%,
    rgba(232, 185, 106, .75) 25%,
    rgba(232, 185, 106, .75) 75%,
    rgba(192, 138, 46, 0) 100%);
}

/* The hero keeps the lighter maroon and gains a gentle vertical lift, so the
   boundary between the two is a change of tone rather than a hard line. */
.hm-hero {
  background:
    radial-gradient(120% 90% at 78% -20%, rgba(232, 185, 106, .13) 0%, rgba(232, 185, 106, 0) 60%),
    linear-gradient(180deg, #85211C 0%, #7A1A16 45%, #6E1613 100%);
}

/* The mobile top bar sits above the nav, so it takes the lighter tone to
   match the hero rather than the menu. */
.hm-topbar { background: #7A1A16; }

@media (prefers-reduced-motion: reduce) {
  .hm-navbar::after { background: rgba(232, 185, 106, .6); }
}

/* =====================================================================
   Language switcher.

   The Google gadget is loaded but never shown. Its own select renders a
   Google logo, the words "Select Language" and a native scrollbar, in markup
   Google owns and changes without notice — the previous attempt to restyle it
   in place is what produced the broken-looking dropdown. Our list drives it
   instead, and the gadget lives off-screen.

   Off-screen, not display:none: a hidden container stops the widget
   initialising in some browsers, and then nothing translates at all.
   ===================================================================== */
.gt-offscreen {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; pointer-events: none;
}

/* Google injects a banner frame at the top of the document and pushes body
   down by its height. Both are suppressed; the switcher already says the page
   is machine translated. */
.goog-te-banner-frame, .skiptranslate iframe { display: none !important; }
body { top: 0 !important; }
.goog-text-highlight { background: none !important; box-shadow: none !important; }

/* --------------------------------------------------------- the menu */
.hm-langmenu {
  position: absolute; inset-inline-end: 0; top: calc(100% + 8px); z-index: 60;
  min-width: 208px; padding: 6px;
  background: #fff; color: #241612;
  border: 1px solid #E6D8BE; border-radius: 14px;
  box-shadow: 0 18px 40px -18px rgba(36, 22, 18, .5);
}
.hm-langmenu.hidden { display: none; }

.hm-langopt {
  display: flex; align-items: baseline; gap: 8px; width: 100%;
  padding: 9px 12px; border: 0; border-radius: 9px;
  background: none; color: inherit; font: inherit; font-size: 14.5px;
  text-align: start; cursor: pointer;
  transition: background .15s, color .15s;
}
.hm-langopt:hover { background: #F7EEDF; color: #7A1A16; }
.hm-langopt small { color: #8B7A5E; font-size: 11.5px; }

/* The active language is marked with a tick rather than only a colour, so it
   is still distinguishable without colour perception. */
.hm-langopt.on { color: #7A1A16; font-weight: 600; }
.hm-langopt.on::after {
  content: "✓"; margin-inline-start: auto; color: #C08A2E; font-weight: 700;
}
.hm-langopt.busy { opacity: .55; cursor: progress; }

.hm-langnote {
  margin: 6px 4px 2px; padding-top: 7px;
  border-top: 1px solid #F1E7D3;
  font-size: 11.5px; line-height: 1.5; color: #8B7A5E;
}

/* ------------------------------------------- decorative bleed containment */
/* The aripan mandalas are positioned to bleed past the edge of the section
   they decorate, which is the intent — but they extended the document 64px
   wider than the viewport, so every public page had a horizontal scrollbar and
   could be dragged sideways on a phone.

   `clip` rather than `hidden`: hidden makes the element a scroll container,
   which silently breaks `position: sticky` on any descendant. The `hidden`
   fallback is on <html> only, where there is nothing sticky to break. */
html { overflow-x: hidden; }
@supports (overflow-x: clip) {
  html { overflow-x: clip; }
  body { overflow-x: clip; }
}

/* ------------------------------------------------- homepage intro overlay */
/* The aripan-and-bell welcome. Markup is in app/Views/partials/intro.php,
   behaviour in assets/js/intro.js. Read the partial's header before changing
   anything here — the hidden-by-default rule below is a safety property, not a
   style choice.

   The whole sequence is CSS. intro.js adds sound, the skip button and cleanup,
   but the animation runs and, more importantly, FINISHES without it. A veil
   that needs JavaScript to lift is a veil that stays down the day the script
   fails to load. */

.hm-intro { display: none; }

html.hm-intro-on .hm-intro {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 120;
  align-items: center;
  justify-content: center;
  background: #F7EEDF;
  animation: hmIntroVeil .85s cubic-bezier(.66, 0, .34, 1) 2.05s forwards;
}

.hm-intro-art { width: min(72vw, 340px); }
.hm-intro-art svg { display: block; width: 100%; height: auto; }

/* Hidden until intro.js wires it up. A skip button that does nothing is worse
   than no skip button. */
.hm-intro-skip {
  position: absolute;
  inset-block-end: 28px;
  inset-inline-end: 24px;
  display: none;
  border: 1px solid rgba(122, 26, 22, .3);
  border-radius: 999px;
  background: rgba(255, 255, 255, .6);
  padding: 7px 18px;
  font-size: 13px;
  color: #7A1A16;
  cursor: pointer;
}
.hm-intro-js .hm-intro-skip { display: block; }
.hm-intro-skip:hover { background: #fff; border-color: #C08A2E; }

/* "Touch to ring the bell". Shown only when intro.js is running AND the bell
   is switched on — an invitation to tap that does nothing would be worse than
   silence. Browsers will not play audio without a gesture in the current page
   load, so this line is not decoration: it is the only route to sound. */
.hm-intro-hintline {
  position: absolute;
  inset-block-end: 78px;
  inset-inline: 0;
  display: none;
  text-align: center;
  margin: 0;
  font-size: 13px;
  letter-spacing: .04em;
  color: rgba(122, 26, 22, .62);
  animation: hmIntroRise .8s cubic-bezier(.22, .61, .36, 1) .9s backwards;
}
.hm-intro-js.hm-intro-hint .hm-intro-hintline { display: block; }

/* The bell keeps swinging gently once its entrance has finished, so the thing
   the hint line refers to is visibly the thing to touch. Only while sound is
   armed and unrung — after the strike it stops, because it has been answered. */
.hm-intro-js.hm-intro-hint .hm-i-bell {
  animation: hmIntroSwing 1.5s cubic-bezier(.36, .07, .19, .97) .95s backwards,
             hmIntroNudge 2.4s ease-in-out 2.45s infinite;
}
@keyframes hmIntroNudge {
  0%, 62%, 100% { transform: rotate(0deg); }
  70%  { transform: rotate(5deg); }
  78%  { transform: rotate(-4deg); }
  86%  { transform: rotate(2deg); }
}

.hm-i-ari  { opacity: 0; stroke-dasharray: 1400; }
.hm-i-bell { opacity: 0; transform-origin: 150px 92px; }
.hm-i-rip  { opacity: 0; transform-origin: 150px 150px; }
.hm-i-word { opacity: 0; }

html.hm-intro-on .hm-i-ari   { animation: hmIntroDraw 1.2s cubic-bezier(.35, .1, .25, 1) .15s backwards; }
html.hm-intro-on .hm-i-bell  { animation: hmIntroSwing 1.5s cubic-bezier(.36, .07, .19, .97) .95s backwards; }
html.hm-intro-on .hm-i-rip   { animation: hmIntroRipple 1.5s cubic-bezier(.2, .6, .3, 1) 1.15s backwards; }
html.hm-intro-on .hm-i-rip2  { animation-delay: 1.32s; }
html.hm-intro-on .hm-i-rip3  { animation-delay: 1.48s; }
html.hm-intro-on .hm-i-word  { animation: hmIntroRise .8s cubic-bezier(.22, .61, .36, 1) 1.3s backwards; }

@keyframes hmIntroDraw {
  0%   { opacity: 1; stroke-dashoffset: 1400; }
  100% { opacity: 1; stroke-dashoffset: 0; }
}
@keyframes hmIntroSwing {
  0%   { opacity: 1; transform: rotate(0deg); }
  16%  { transform: rotate(15deg); }
  40%  { transform: rotate(-11deg); }
  62%  { transform: rotate(7deg); }
  82%  { transform: rotate(-4deg); }
  100% { opacity: 1; transform: rotate(0deg); }
}
@keyframes hmIntroRipple {
  0%   { opacity: .85; transform: scale(.28); }
  100% { opacity: 0;   transform: scale(2.4); }
}
@keyframes hmIntroRise {
  0%   { opacity: 0; transform: translateY(14px); }
  100% { opacity: 1; transform: translateY(0); }
}
/* visibility, not just opacity: an invisible overlay still swallows taps. */
@keyframes hmIntroVeil {
  0%   { opacity: 1; transform: translateY(0);     visibility: visible; }
  99%  { opacity: 0; transform: translateY(-102%); visibility: visible; }
  100% { opacity: 0; transform: translateY(-102%); visibility: hidden; pointer-events: none; }
}

/* The gate script already refuses to show the overlay under reduced motion.
   This is the second lock on the same door: if a future edit adds the class
   unconditionally, the veil is still never painted rather than frozen on
   screen by app.css's blanket animation: none. */
@media (prefers-reduced-motion: reduce) {
  html.hm-intro-on .hm-intro { display: none; }
}

/* Audio player on a settings row. Full width so the scrub bar is usable on a
   phone, and height-capped so it does not tower over the fields around it. */
.audiofld {
  display: block;
  width: 100%;
  max-width: 420px;
  height: 36px;
  margin-bottom: 10px;
}