/*
 * Calvary OPC site styles.
 *
 * Most styling is done with Tailwind utility classes and daisyUI components
 * directly in the HTML. This file only holds:
 *   1. The custom daisyUI theme ("calvary") - the site's colors.
 *   2. Font choices.
 *   3. A few small helpers that would be repetitive as utility classes.
 *
 * If you change the base or text colors below, also update the sermon embed
 * colors in the yetanothersermon.host dashboard (see the comment in sermons.html).
 */


/* ------------------------------------------------------------------
 * 1. daisyUI theme
 *    Applied by <html data-theme="calvary"> on every page.
 *    Docs: https://daisyui.com/docs/themes/
 * ------------------------------------------------------------------ */
[data-theme="calvary"] {
  color-scheme: light;

  /* Page backgrounds: soft parchment, getting slightly darker */
  --color-base-100: #f3eee5;
  --color-base-200: #e9e2d6;
  --color-base-300: #d9cfbe;
  --color-base-content: #33373e;

  /* Navy from the church logo */
  --color-primary: #263e6a;
  --color-primary-content: #ffffff;

  /* Lighter blue, used for links */
  --color-secondary: #285ab6;
  --color-secondary-content: #ffffff;

  /* Brass / gold accent */
  --color-accent: #b08d57;
  --color-accent-content: #1f1a12;

  /* Dark slate, used for the footer */
  --color-neutral: #1d2430;
  --color-neutral-content: #cfd6e1;

  --color-info: #285ab6;
  --color-info-content: #ffffff;
  --color-success: #2f7d4f;
  --color-success-content: #ffffff;
  --color-warning: #c08a1e;
  --color-warning-content: #1f1a12;
  --color-error: #a83232;
  --color-error-content: #ffffff;

  /* Shapes */
  --radius-selector: 0.375rem;
  --radius-field: 0.375rem;
  --radius-box: 0.5rem;
  --size-selector: 0.25rem;
  --size-field: 0.25rem;
  --border: 1px;
  --depth: 0;
  --noise: 0;
}

/* Dark version of the theme. Chosen automatically when the visitor's
   computer or phone is set to dark mode, or with the sun/moon button in
   the header (see js/components.js). */
[data-theme="calvary-dark"] {
  color-scheme: dark;

  --color-base-100: #131820;
  --color-base-200: #1a212c;
  --color-base-300: #2a3341;
  --color-base-content: #e3e6ea;

  /* Lighter blues so headings and buttons stand out on the dark background */
  --color-primary: #9db8e8;
  --color-primary-content: #0f1a2e;

  --color-secondary: #8fb3f0;
  --color-secondary-content: #0f1a2e;

  --color-accent: #c9a66b;
  --color-accent-content: #1f1a12;

  --color-neutral: #0c1016;
  --color-neutral-content: #b9c2cf;

  --color-info: #8fb3f0;
  --color-info-content: #0f1a2e;
  --color-success: #5fb383;
  --color-success-content: #0c1a12;
  --color-warning: #e0b04f;
  --color-warning-content: #1f1a12;
  --color-error: #e07070;
  --color-error-content: #1f0c0c;

  --radius-selector: 0.375rem;
  --radius-field: 0.375rem;
  --radius-box: 0.5rem;
  --size-selector: 0.25rem;
  --size-field: 0.25rem;
  --border: 1px;
  --depth: 0;
  --noise: 0;
}

/* The logo's gray text is a little dim on the dark header */
[data-theme="calvary-dark"] .site-logo {
  filter: brightness(1.7);
}

/* Highlight for the current page in menus: navy in light mode, light blue in dark mode
   (daisyUI's default dark-gray highlight is hard to see in dark mode). */
.menu {
  --menu-active-bg: var(--color-primary);
  --menu-active-fg: var(--color-primary-content);
}

/* Mobile menu drawer (the <dialog id="mobile-menu"> in js/components.js).
   Slides in from the right over a dimmed page. */
.mobile-drawer {
  position: fixed;
  inset: 0 0 0 auto;            /* pinned to the right edge */
  margin: 0;
  width: min(22rem, 88vw);
  max-width: none;
  height: 100dvh;
  max-height: none;
  padding: 0;
  border: 0;
  background: var(--color-base-100);
  color: var(--color-base-content);
  box-shadow: -8px 0 30px rgb(0 0 0 / 0.25);
  transform: translateX(100%);
  transition:
    transform 0.25s ease,
    overlay 0.25s allow-discrete,
    display 0.25s allow-discrete;
}
.mobile-drawer[open] {
  transform: translateX(0);
}
@starting-style {
  .mobile-drawer[open] {
    transform: translateX(100%);
  }
}
.mobile-drawer::backdrop {
  background: rgb(15 20 30 / 0);
  transition:
    background-color 0.25s ease,
    overlay 0.25s allow-discrete,
    display 0.25s allow-discrete;
}
.mobile-drawer[open]::backdrop {
  background: rgb(15 20 30 / 0.55);
}
@starting-style {
  .mobile-drawer[open]::backdrop {
    background: rgb(15 20 30 / 0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .mobile-drawer,
  .mobile-drawer::backdrop {
    transition: none;
  }
}
/* Stop the page behind from scrolling while the drawer is open */
html:has(.mobile-drawer[open]) {
  overflow: hidden;
}

/* <page-banner>: photo banner at the top of inner pages.
   Inside it: an <img> (the photo, stretched to fill), then the <h1> and an
   optional <p>, lined up with the page content over a navy tint that is the
   same in light and dark mode. These styles are here (not Tailwind classes)
   so the banner is laid out correctly the moment the page starts drawing. */
page-banner {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 14rem;
  padding: 0 max(1rem, calc((100% - 72rem) / 2 + 1rem)) 2rem;
  overflow: hidden;
  background-color: #1c2f52;
}
/* The home page hero (<section class="hero">) works the same way */
.hero {
  position: relative;
  overflow: hidden;
  background-color: #1c2f52;
}
page-banner > img,
.hero-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;          /* crop to fill; move the crop with style="object-position: ..." */
}
page-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgb(28 47 82 / 0.9), rgb(28 47 82 / 0.55) 50%, rgb(28 47 82 / 0.2));
}
page-banner > h1,
page-banner > p {
  position: relative;
  z-index: 2;                 /* above the photo and tint */
}
page-banner > h1 {
  color: #fff;
  font-size: 2.25rem;
}
page-banner > p {
  margin-top: 0.5rem;
  max-width: 42rem;
  font-size: 1.125rem;
  color: rgb(255 255 255 / 0.9);
}
@media (min-width: 640px) {
  page-banner { height: 18rem; }
  page-banner > h1 { font-size: 3rem; }
}

/* Sermons page content area (centered, padded). Defined here rather than with
   Tailwind classes so the tall sermon player doesn't jump while the page loads. */
.sermons-content {
  max-width: 64rem;
  margin: 0 auto;
  padding: 3.5rem 1rem;
}
.sermons-intro {
  max-width: 48rem;
  margin-bottom: 2rem;
}
/* Light card around the sermon player (the player itself stays light in dark mode) */
.sermons-player {
  overflow: hidden;
  padding: 0.5rem;
  border: 1px solid var(--color-base-300);
  border-radius: var(--radius-box);
  background: #f3eee5;
}
@media (min-width: 640px) {
  .sermons-player { padding: 1rem; }
}
/* Hold the player's space (it starts 1000px tall) until its script adds it,
   so the footer doesn't jump down when the player appears. */
#yash-embed-sermons:empty {
  min-height: 1000px;
}

/* Light/dark toggle button: show the moon in light mode, the sun in dark mode */
[data-theme="calvary"] .theme-toggle .icon-sun,
[data-theme="calvary-dark"] .theme-toggle .icon-moon {
  display: none;
}


/*
 * Everything below is inside "@layer base" so that Tailwind utility classes
 * in the HTML (for example class="text-white" on a heading) always win
 * over these defaults.
 */
@layer base {

  /* ------------------------------------------------------------------
   * 2. Fonts (loaded from Google Fonts in each page's <head>)
   * ------------------------------------------------------------------ */
  :root {
    --font-body: "Source Sans 3", "Helvetica Neue", Arial, sans-serif;
    --font-display: "EB Garamond", Garamond, Georgia, serif;

    font-family: var(--font-body);
    font-size: 1.0625rem;
    line-height: 1.7;
  }

  /* Images scale down to fit, even before Tailwind's own styles load
     (prevents a large photo briefly pushing the layout around) */
  img {
    max-width: 100%;
    height: auto;
  }

  body :is(h1, h2, h3, h4),
  .font-display {
    font-family: var(--font-display);
    font-weight: 500;
    line-height: 1.2;
    color: var(--color-primary);
  }


  /* ------------------------------------------------------------------
   * 3. Helpers
   * ------------------------------------------------------------------ */

  /* Readable text content on inner pages: headings, paragraphs and lists
     inside <div class="prose-calvary"> get sensible spacing automatically. */
  .prose-calvary h2 {
    font-size: 1.875rem;
    margin-top: 2.5rem;
    margin-bottom: 0.75rem;
  }
  .prose-calvary h3 {
    font-size: 1.5rem;
    margin-top: 2rem;
    margin-bottom: 0.5rem;
  }
  .prose-calvary p {
    margin-bottom: 1.1rem;
  }
  /* (daisyUI lists and menus, class="list" / class="menu", keep their own styling) */
  .prose-calvary ul:not(.list, .menu) {
    list-style: disc;
    padding-left: 1.5rem;
    margin-bottom: 1.1rem;
  }
  .prose-calvary ul:not(.list, .menu) > li {
    margin-bottom: 0.35rem;
  }
  /* (daisyUI buttons, class="btn", are left alone so they never get underlined) */
  .prose-calvary a:not(.btn),
  a.text-link {
    color: var(--color-secondary);
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .prose-calvary a:not(.btn):hover,
  a.text-link:hover {
    color: var(--color-primary);
  }

  /* Small gold rule used under section headings */
  .gold-rule {
    width: 4rem;
    height: 2px;
    background: var(--color-accent);
    border: 0;
  }

  /* Scripture quotations */
  .scripture {
    border-left: 3px solid var(--color-accent);
    padding: 0.25rem 0 0.25rem 1rem;
    margin: 0.75rem 0;
    font-size: 0.95rem;
    color: color-mix(in oklab, var(--color-base-content) 80%, transparent);
  }
  .scripture cite {
    display: block;
    font-style: normal;
    font-weight: 600;
    color: var(--color-primary);
  }

}