/* ==========================================================================
   Chaim V'Shalom — shared stylesheet
   Mobile-first: the base styles are for phones; the @media block near the
   bottom adjusts the layout for wider screens (tablets and desktops).
   ========================================================================== */

/* ---------- Colors and fonts (change them here, and the whole site follows) ---------- */
:root {
  --color-bg: #faf8f2;         /* warm off-white, same as the logo background */
  --color-surface: #ffffff;    /* cards */
  --color-text: #1b2440;       /* body text: dark navy */
  --color-heading: #0f1f50;    /* headings: deep navy */
  --color-muted: #4a5470;      /* secondary text */

  --color-blush: #fad4d2;      /* pastel accents, from the logo */
  --color-rose: #e9b5af;
  --color-lavender: #e7e3f0;
  --color-sage: #dde7e1;
  --color-gold: #f4d3ad;

  --font-heading: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --max-width: 60rem;          /* widest the content gets on big screens */
  --radius: 0.75rem;
  --shadow: 0 0.5rem 1.5rem rgba(15, 31, 80, 0.15);  /* soft navy shadow for floating boxes */
  --shadow-soft: 0 0.25rem 1rem rgba(15, 31, 80, 0.06);      /* cards and boxes at rest */
  --shadow-lift: 0 0.6rem 1.5rem rgba(15, 31, 80, 0.12);     /* cards lifted on hover */
  --shadow-button: 0 0.4rem 1rem rgba(15, 31, 80, 0.15);     /* buttons lifted on hover */
  --radius-large: 1rem;        /* cards and boxes */
}

/* ---------- Basic reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

h1,
h2,
h3 {
  font-family: var(--font-heading);
  color: var(--color-heading);
  line-height: 1.25;
  margin: 0 0 0.75rem;
}

h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.2rem; }

p { margin: 0 0 1rem; }

a {
  color: var(--color-heading);
  text-underline-offset: 0.15em;
}

a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--color-rose);
  outline-offset: 2px;
}

/* Centers content and keeps a comfortable side margin on phones */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1rem;
}

/* Hidden visually but still read by screen readers */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -3rem;
  background: var(--color-heading);
  color: #fff;
  padding: 0.5rem 1rem;
  border-radius: var(--radius);
  z-index: 10;
}

.skip-link:focus {
  top: 0.5rem;
}

/* ---------- Header ---------- */
/* A thin pastel line (blush → lavender → sage) along the bottom of the header */
.site-header {
  background-color: var(--color-bg);
  background-image: linear-gradient(90deg, var(--color-blush), var(--color-lavender), var(--color-sage));
  background-size: 100% 3px;
  background-position: bottom;
  background-repeat: no-repeat;
}

.bsd {
  text-align: right;
  font-size: 0.8rem;
  color: var(--color-muted);
  padding-top: 0.25rem;
}

/* The round logo sits in the middle of the header. On phones the Menu button
   sits in the bottom-right corner, just above the header line, so it doesn't
   push the logo off-center and the menu box opens right under it. */
.header-bar {
  position: relative;
  display: flex;
  justify-content: center;
  padding-bottom: 0.75rem;
}

.brand {
  display: block;
}

.brand-logo {
  width: 8rem;
  height: auto;
}

.header-bar .menu-toggle {
  position: absolute;
  right: 0;
  bottom: 0.75rem;             /* same as the header's bottom padding */
}

/* "Menu" button — only shown on phones */
.menu-toggle {
  font: inherit;
  font-size: 0.95rem;
  background: var(--color-blush);
  color: var(--color-heading);
  border: 1px solid var(--color-rose);
  border-radius: var(--radius);
  padding: 0.5rem 0.9rem;
  cursor: pointer;
}

/* Navigation links. On phones they appear as a vertical list under the header. */
.site-nav ul {
  list-style: none;
  margin: 0;
  padding: 0 0 0.75rem;
}

.site-nav a {
  display: block;
  padding: 0.6rem 0.25rem;
  text-decoration: none;
  border-top: 1px solid var(--color-lavender);
}

.site-nav a[aria-current="page"] {
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--color-rose);
  text-decoration-thickness: 3px;
}

/* When JavaScript is running, the phone menu starts closed. The "Menu" button opens
   it as a small floating box on top of the page, so the page itself doesn't move.
   Without JavaScript, the "js" class is never added, so the menu simply stays visible. */
.site-header .container {
  position: relative;          /* the floating menu box is placed relative to this */
}

.js .site-nav {
  display: none;
}

.js .site-nav.is-open {
  display: block;
  position: absolute;
  top: 100%;                   /* just below the header */
  right: 1rem;
  z-index: 20;                 /* above the page content */
  width: 15rem;
  max-width: calc(100% - 2rem);
  background: var(--color-surface);
  border: 1px solid var(--color-gold);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 0.4rem;
}

.js .site-nav.is-open ul {
  padding: 0;
}

.js .site-nav.is-open a {
  padding: 0.6rem 0.75rem;
  border-radius: 0.5rem;
}

.js .site-nav.is-open li:first-child a {
  border-top: 0;
}

.js .site-nav.is-open a:hover {
  background: var(--color-blush);
}

/* Without JavaScript the button would do nothing, so hide it */
html:not(.js) .menu-toggle {
  display: none;
}

/* ---------- Main content ---------- */
main {
  padding: 2rem 0 3rem;
}

/* A small three-leaf flourish (like the leaves in the logo) under each page
   title, between two thin gold lines. It is a tiny drawing (SVG) written right
   here; its colors match the logo's leaves (they can't use the variables above,
   because the drawing is a separate image). Centered on the home page.
   The same flourish is used as a divider line (.leaf-divider) inside pages. */
main h1::after,
.leaf-divider {
  content: "";
  display: block;
  width: 11rem;
  height: 1.5rem;
  margin: 0.6rem 0 0.25rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 176 24'%3E%3Cline x1='0' y1='14' x2='64' y2='14' stroke='%23e5c08f' stroke-width='1.2'/%3E%3Cline x1='112' y1='14' x2='176' y2='14' stroke='%23e5c08f' stroke-width='1.2'/%3E%3Cpath d='M88 2 C94 8 94 16 88 22 C82 16 82 8 88 2Z' fill='%23e9b5af'/%3E%3Cpath d='M86 21 C80 20 74 15 72 9 C79 10 85 15 86 21Z' fill='%23bac9c1'/%3E%3Cpath d='M90 21 C96 20 102 15 104 9 C97 10 91 15 90 21Z' fill='%23c4bad3'/%3E%3C/svg%3E") no-repeat left center / contain;
}

.hero h1::after {
  margin-left: auto;
  margin-right: auto;
  background-position: center;
}

/* Divider between parts of a section, e.g. "Sign up" and "Have a question?"
   on the Classes page. Written as <hr class="leaf-divider">. */
.leaf-divider {
  border: 0;
  margin: 1.75rem 0 1.25rem;
}

.section {
  margin-bottom: 2.5rem;
}

/* A soft pastel band used to highlight a section */
.band {
  background: var(--color-blush);
  border-radius: var(--radius-large);
  box-shadow: var(--shadow-soft);
  padding: 1.5rem 1.25rem;
}

.band--lavender { background: var(--color-lavender); }
.band--sage { background: var(--color-sage); }

/* The small, centered "Share with a friend" box on the Classes page. It stays
   narrow on large screens instead of stretching across the whole page. */
.share-box {
  max-width: 24rem;
  margin: 3.5rem auto 2.5rem;
  padding: 1.1rem 1rem;
  text-align: center;
}

.share-box h2 { font-size: 1.15rem; margin-bottom: 0.25rem; }

.share-box .actions { justify-content: center; }

/* The home page welcome, on a soft watercolor-style pastel background
   (like the wash in the logo) */
.hero {
  text-align: center;
  padding: 2.25rem 1.25rem 2rem;
  margin-bottom: 2.5rem;
  border-radius: 1.5rem;
  background:
    radial-gradient(circle at 15% 20%, var(--color-blush) 0, transparent 55%),
    radial-gradient(circle at 85% 25%, var(--color-lavender) 0, transparent 55%),
    radial-gradient(circle at 50% 100%, var(--color-sage) 0, transparent 60%),
    var(--color-surface);
}

/* Cards: stacked on phones, side by side on wider screens */
.card-grid {
  display: grid;
  gap: 1rem;
}

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-gold);
  border-radius: var(--radius-large);
  box-shadow: var(--shadow-soft);
  padding: 1.25rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card p:last-child { margin-bottom: 0; }

/* Buttons (used on links) */
.button {
  display: inline-block;
  background: var(--color-heading);
  color: #fff;
  text-decoration: none;
  padding: 0.7rem 1.3rem;
  border-radius: 2rem;
  margin: 0.25rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.button--soft {
  background: var(--color-blush);
  color: var(--color-heading);
  border: 1px solid var(--color-rose);
}

/* The main "Sign up here" button on the Classes page: a little larger, with a
   soft pastel glow around it so it stands out */
.button--signup {
  font-size: 1.1rem;
  padding: 0.85rem 1.6rem;
  box-shadow: 0 0 0 4px var(--color-blush), 0 0 0 6px var(--color-lavender);
}

/* More room between the "Registration" heading and the Sign up button, so it
   matches the space around the leaf divider below it */
.actions.actions--signup {
  margin-top: 2.25rem;
}

/* A gentle "press" when a button is tapped or clicked */
.button:active {
  transform: scale(0.97);
}

/* On devices with a mouse, cards and buttons lift a little on hover */
@media (hover: hover) {
  .card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lift);
  }
  .button:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-button);
  }
}

/* No movement for visitors who asked their device to reduce motion */
@media (prefers-reduced-motion: reduce) {
  .card,
  .button {
    transition: none;
  }
  .card:hover,
  .button:hover,
  .button:active {
    transform: none;
  }
}

/* A row of buttons (e.g. Add to calendar, Register, Share). Wraps onto more
   lines on narrow screens. */
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.75rem 0 0;
}

.actions .button {
  margin: 0;
}

/* Simple label/value list (used for class details) */
.details {
  margin: 0;
}

.details dt {
  font-weight: 700;
  color: var(--color-heading);
}

.details dd {
  margin: 0 0 0.75rem;
}

/* A small emoji before each detail label (When, Time, Where, Price) */
.details-icon {
  margin-right: 0.4rem;
}

/* An emoji in a pastel circle at the top of a card */
.card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: 0.75rem;
  border-radius: 50%;
  background: var(--color-blush);
  font-size: 1.35rem;
}

.card-icon--lavender { background: var(--color-lavender); }
.card-icon--sage { background: var(--color-sage); }

/* Short extra notes (e.g. "Wheelchair accessible"), one per line in an elegant italic */
.highlights {
  list-style: none;
  margin: 1rem 0 0;
  padding: 1rem 0 0;
  border-top: 1px solid var(--color-gold);
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 400;            /* a light italic (downloaded in _layouts/default.html) */
  font-size: 1.1rem;
  color: var(--color-heading);
}

/* The emoji sits to the left, so a line that wraps lines up with the text above it */
.highlights li {
  position: relative;
  padding-left: 2rem;
  margin-bottom: 0.5rem;
}

.highlight-icon {
  position: absolute;
  left: 0;
  font-style: normal;
}

/* Page content fades in gradually as you scroll (js/main.js sets each item's
   fade as the page scrolls; items are sections, or headings and cards). Items
   start faded; when the page opens, the ones on screen glide into place (the
   transition below). After that the fade follows the scrolling directly
   ("is-scroll-linked" turns the transition off). Items only fade in, never out.
   Only when JavaScript runs and the visitor hasn't asked their device to reduce
   motion; printing always shows everything. */
@media screen and (prefers-reduced-motion: no-preference) {
  .js .reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }
  .js .reveal.is-scroll-linked {
    transition: none;
  }
}

@media print {
  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Text that still needs to be written — easy to spot while building */
.placeholder {
  color: var(--color-muted);
  font-style: italic;
}

/* ---------- Footer ---------- */
/* On phones and tablets the footer sections are stacked, so they are centered
   to use the full width. Wider screens switch to three columns (see below). */
.site-footer {
  position: relative;
  overflow-x: clip;            /* hidden pop-ups never make the page scroll sideways on narrow phones */
  background: var(--color-lavender);
  padding: 2rem 0 1.5rem;
  font-size: 0.95rem;
  text-align: center;
}

/* A soft wave along the top edge of the footer. The wave drawing is used only
   as a shape (a "mask"); its color comes from --color-lavender, so it always
   matches the footer. It sits in the empty space at the bottom of the page. */
.site-footer::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 2rem;
  background: var(--color-lavender);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'%3E%3Cpath d='M0 40 V22 C150 0 300 0 450 18 S750 40 900 20 S1100 2 1200 16 V40Z'/%3E%3C/svg%3E") no-repeat bottom / 100% 100%;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'%3E%3Cpath d='M0 40 V22 C150 0 300 0 450 18 S750 40 900 20 S1100 2 1200 16 V40Z'/%3E%3C/svg%3E") no-repeat bottom / 100% 100%;
}

.footer-columns {
  display: grid;
  gap: 1.25rem 2rem;
}

/* On phones and tablets (except very narrow phones), the name goes on top and
   Contact and Pages sit side by side underneath, so the footer stays short.
   The two columns are always the same width ("1fr 1fr" inside a box that is
   only as wide as its contents, centered), so they mirror each other
   around the middle of the screen. */
@media (min-width: 22.5rem) {
  .footer-columns {
    grid-template-columns: 1fr 1fr;
    width: fit-content;
    margin: 0 auto;
  }

  .footer-columns > :first-child {
    grid-column: 1 / -1;
  }

  /* Keep each link on one line; the columns size themselves to fit */
  .footer-columns li {
    white-space: nowrap;
  }
}

.site-footer h2 {
  font-size: 1.1rem;
}

.footer-columns p {
  margin-bottom: 0;
}

.site-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer li {
  margin-bottom: 0.35rem;
}

/* A small box that pops up above a link to show extra details, e.g. the phone
   number above "Call us" on computers. The details are always in the page
   (screen readers read them as part of the link); they are only shown as a
   pop-up when hovering with a mouse or tabbing to the link with the keyboard. */
.has-tooltip {
  position: relative;
}

.tooltip {
  position: absolute;
  bottom: calc(100% + 0.6rem);
  left: 50%;
  z-index: 10;
  padding: 0.4rem 0.75rem;
  background: var(--color-surface);
  border: 1px solid var(--color-gold);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  color: var(--color-heading);
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

/* The little pointer under the box */
.tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -0.4rem;
  border: 0.4rem solid transparent;
  border-top-color: var(--color-gold);
}

@media (hover: hover) {
  .has-tooltip:hover .tooltip {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

.has-tooltip:focus-visible .tooltip {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* A pop-up you can click inside, e.g. the email address with a Copy button
   above "Email us" on computers. It looks like the tooltip above, and stays
   open while the mouse moves from the link up into the box. */
.has-popover {
  position: relative;
  display: inline-block;
}

.popover {
  position: absolute;
  bottom: calc(100% + 0.6rem);
  left: 50%;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0.45rem 0.4rem 0.8rem;
  background: var(--color-surface);
  border: 1px solid var(--color-gold);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  color: var(--color-heading);
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

/* An invisible strip under the box that covers the gap down to the link,
   so the box doesn't close while the mouse moves up to it */
.popover::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 0.8rem;
}

/* The little pointer under the box */
.popover::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -0.4rem;
  border: 0.4rem solid transparent;
  border-top-color: var(--color-gold);
}

@media (hover: hover) {
  .has-popover:hover .popover {
    opacity: 1;
    transform: translate(-50%, 0);
    pointer-events: auto;
  }
}

.has-popover:focus-within .popover {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}

.copy-button {
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-heading);
  background: var(--color-blush);
  border: 1px solid var(--color-rose);
  border-radius: 2rem;
  padding: 0.25rem 0.7rem;
  min-width: 6.25rem;          /* fits "Copied!" too, so the box doesn't change size */
  cursor: pointer;
}

.copy-button:hover {
  background: var(--color-rose);
}

/* After copying: a soft green "Copied!" */
.copy-button.is-copied {
  background: var(--color-sage);
  border-color: var(--color-sage);
}

/* Without JavaScript the Copy button can't work, so hide it */
html:not(.js) .copy-button {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .tooltip,
  .popover {
    transition: none;
  }
}

.dedication {
  text-align: center;
  border-top: 1px solid var(--color-gold);
  margin-top: 1.5rem;
  padding-top: 1.25rem;
}

.dedication p {
  margin-bottom: 0.25rem;
}

.dedication-title {
  font-family: var(--font-heading);
  font-style: italic;
  color: var(--color-heading);
}

.copyright {
  text-align: center;
  color: var(--color-muted);
  font-size: 0.85rem;
  margin-top: 1rem;
}

/* ---------- Floating "Register for classes" button ----------
   A soft pastel bubble that stays in the bottom-right corner while scrolling,
   on every page. */
.register-float {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 15;                 /* above the page, below the open phone menu */
  padding: 0.65rem 1.1rem;
  border: 1px solid var(--color-rose);
  border-radius: 2rem;
  background:
    radial-gradient(circle at 90% 90%, var(--color-lavender) 0, transparent 80%),
    var(--color-blush);
  box-shadow: var(--shadow);
  color: var(--color-heading);
  font-family: var(--font-heading);
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.register-float:active {
  transform: scale(0.97);
}

@media (hover: hover) {
  .register-float:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lift);
  }
}

/* When the button jumps to a section (e.g. #registration), leave a little
   room above its heading, also while the section is still fading in */
.section[id] {
  scroll-margin-top: 2rem;
}

@media print {
  .register-float { display: none; }
}

/* ==========================================================================
   Wider screens (tablets and desktops): 768px and up
   ========================================================================== */
@media (min-width: 48rem) {
  h1 { font-size: 2.5rem; }

  .brand-logo { width: 10rem; }

  .header-bar {
    padding-bottom: 0;
  }

  /* On wide screens the menu is always visible, and the button is hidden */
  .menu-toggle,
  html:not(.js) .menu-toggle {
    display: none;
  }

  /* Show the menu as a normal row, undoing the phone's floating box */
  .js .site-nav,
  .js .site-nav.is-open,
  .site-nav {
    display: block;
    position: static;
    width: auto;
    max-width: none;
    background: none;
    border: 0;
    box-shadow: none;
    padding: 0;
  }

  .site-nav ul,
  .js .site-nav.is-open ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.25rem 1.25rem;
    padding: 0.5rem 0 0.75rem;
  }

  .site-nav a,
  .js .site-nav.is-open a {
    border-top: 0;
    padding: 0.35rem 0.25rem;
  }

  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* For a row of three cards (e.g. the Contact page) */
  .card-grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .footer-columns {
    grid-template-columns: repeat(3, 1fr);
    width: auto;
    margin: 0;
    text-align: left;
  }

  .footer-columns > :first-child {
    grid-column: auto;
  }
}