/*
 * jsc-theme-base.css
 * Replaces the global CSS the Kadence parent theme used to print inline.
 * Values copied verbatim from Kadence's own output so nothing shifts.
 * Loaded before the child stylesheet, which references these variables 88 times.
 */

:root {
  /* palette */
  --global-palette1:#2B6CB0;
  --global-palette2:#215387;
  --global-palette3:#1A202C;
  --global-palette4:#2D3748;
  --global-palette5:#4A5568;
  --global-palette6:#718096;
  --global-palette7:#EDF2F7;
  --global-palette8:#F7FAFC;
  --global-palette9:#ffffff;
  --global-palette10:oklch(from var(--global-palette1) calc(l + 0.10 * (1 - l)) calc(c * 1.00) calc(h + 180) / 100%);
  --global-palette11:#13612e;
  --global-palette12:#1159af;
  --global-palette13:#b82105;
  --global-palette14:#f7630c;
  --global-palette15:#f5a524;
  --global-palette9rgb:255, 255, 255;

  --global-palette-highlight:var(--global-palette1);
  --global-palette-highlight-alt:var(--global-palette2);
  --global-palette-highlight-alt2:var(--global-palette9);
  --global-palette-btn-bg:var(--global-palette1);
  --global-palette-btn-bg-hover:var(--global-palette2);
  --global-palette-btn:var(--global-palette9);
  --global-palette-btn-hover:var(--global-palette9);
  --global-palette-btn-sec-bg:var(--global-palette7);
  --global-palette-btn-sec-bg-hover:var(--global-palette2);
  --global-palette-btn-sec:var(--global-palette3);
  --global-palette-btn-sec-hover:var(--global-palette9);

  /* typography */
  --global-body-font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
  --global-heading-font-family:inherit;
  --global-primary-nav-font-family:inherit;
  --global-fallback-font:sans-serif;
  --global-display-fallback-font:sans-serif;

  /* layout */
  --global-content-width:1290px;
  --global-content-wide-width:calc(1290px + 230px);
  --global-content-narrow-width:842px;
  --global-content-edge-padding:1.5rem;
  --global-content-boxed-padding:2rem;
  --global-calc-content-width:calc(1290px - var(--global-content-edge-padding) - var(--global-content-edge-padding));
  --wp--style--global--content-size:var(--global-calc-content-width);
}

/*
 * Heading scale. Kadence set line-height 1.5 on every heading; Hello Elementor
 * sets a much tighter one, which is what made hero headings collide with the
 * text beneath them. Sizes and colours are Kadence's values.
 */
h1, h2, h3, h4, h5, h6 { font-family: var(--global-heading-font-family); }
h1 { font-weight:700; font-size:32px; line-height:1.5; color:var(--global-palette3); }
h2 { font-weight:700; font-size:28px; line-height:1.5; color:var(--global-palette3); }
h3 { font-weight:700; font-size:24px; line-height:1.5; color:var(--global-palette3); }
h4 { font-weight:700; font-size:22px; line-height:1.5; color:var(--global-palette4); }
h5 { font-weight:700; font-size:20px; line-height:1.5; color:var(--global-palette4); }
h6 { font-weight:700; font-size:18px; line-height:1.5; color:var(--global-palette5); }

body { background: var(--global-palette8); }

/*
 * Heading spacing inside the content area.
 *
 * Kadence scoped these to its own ".single-content" wrapper, which Hello
 * Elementor does not render. Without them Elementor's own "margin: 0" on
 * heading widgets wins, and hero headings collide with the text beneath.
 * Scoped to .site-main so header and footer templates are unaffected,
 * matching Kadence's original scoping.
 */
.site-main h1:not(.elementor-heading-title),
.site-main h2:not(.elementor-heading-title),
.site-main h3:not(.elementor-heading-title),
.site-main h4:not(.elementor-heading-title),
.site-main h5:not(.elementor-heading-title),
.site-main h6:not(.elementor-heading-title) { margin: 1.5em 0 .5em; }

.site-main h1.elementor-heading-title,
.site-main h2.elementor-heading-title,
.site-main h3.elementor-heading-title,
.site-main h4.elementor-heading-title,
.site-main h5.elementor-heading-title,
.site-main h6.elementor-heading-title { margin-bottom: .5em; }

/*
 * Content container.
 *
 * Kadence wrapped non-Elementor content in .content-container.site-container,
 * which supplied the max width and the 1.5rem edge padding. Hello Elementor
 * has no equivalent, so templates that are not built in Elementor - the
 * Events Calendar views, WooCommerce pages - ran edge to edge.
 * Elementor-built pages are untouched; they manage their own widths.
 */
.tribe-events-view,
.site-main > .woocommerce,
.site-main > .page-content > .woocommerce {
  box-sizing: border-box;
  width: calc(100% - (2 * var(--global-content-edge-padding)));
  max-width: var(--global-content-width);
  margin-inline: auto;
}

/*
 * The Events Calendar's own page gutter.
 *
 * Kadence shipped "#primary .tribe-common .tribe-common-l-container
 * { max-width: none; padding: 0 }" - #primary being its content-area
 * wrapper - because it already supplied the page padding itself.
 * Hello Elementor renders no #primary, so that rule stopped matching and
 * TEC's own 42px gutter came back on top of the container above,
 * shifting the calendar right and narrowing the event column by 84px.
 *
 * Kadence's selector led with an ID, which outranked TEC's own
 * ".tribe-common--breakpoint-medium.tribe-common .tribe-common-l-container".
 * Leading with "body" restores that edge without resorting to !important.
 */
body .tribe-common .tribe-common-l-container,
body .tribe-common--breakpoint-medium.tribe-common .tribe-common-l-container {
  max-width: none;
  padding-inline: 0;
}

/*
 * My Account layout.
 *
 * The child theme lays this page out with CSS grid:
 *   .woocommerce-account .woocommerce { display:grid }
 *   grid-template-columns: minmax(260px, 320px) minmax(0, 1fr)
 *
 * Kadence dequeued WooCommerce's own stylesheets, so woocommerce-layout.css
 * never loaded. Hello Elementor does not, which puts float declarations back
 * on both grid items. Floats are ignored on grid items, but the measured
 * layout ends up with the two items in the wrong tracks: the navigation lands
 * in the wide track and the content in the 320px one. YITH then sizes the
 * content with an ID-specificity rule,
 *   #my-account-menu ~ .woocommerce-MyAccount-content { width: 67% }
 * so it becomes 67% of 320px - about 214px - and the dashboard text wraps one
 * word per line.
 *
 * Placing both items explicitly removes the ambiguity. The 67% width is left
 * alone because it is correct once the content is in the wide track, and it is
 * what production renders.
 */
body.woocommerce-account .woocommerce > .yith-wcmap {
  grid-column: 1;
  grid-row: 1;
}

body.woocommerce-account .woocommerce > .woocommerce-MyAccount-content {
  grid-column: 2;
  grid-row: 1;
}

/* Floats are inert on grid items, but clear them so the layout does not
   depend on that being true if the grid is ever disabled. */
body.woocommerce-account .woocommerce > .yith-wcmap,
body.woocommerce-account .woocommerce > .woocommerce-MyAccount-content {
  float: none;
}

/*
 * alignwide on narrow viewports.
 *
 * Hello Elementor ships a bare, unguarded rule:
 *
 *   .alignwide { margin-inline: -80px }
 *
 * On a wide screen that pull is harmless - there is slack either side. Below
 * about 1024px the parent is narrower than the 160px being pulled, so the
 * block lands off-screen: measured left edge -3px at 768 and -70px at 375,
 * which clipped the cart's "Add coupons" and "Estimated total" rows.
 * Kadence constrained alignwide itself, so this never surfaced before.
 *
 * Keep the pull only where there is room for it. Verified unchanged at
 * 1024 (left 25) and 1440 (left 63).
 *
 * Led with "body": this stylesheet is enqueued at priority 5, so Hello's
 * rule comes later in the cascade and a bare .alignwide would tie on
 * specificity and lose. A media query adds no specificity of its own.
 */
@media (max-width: 1023px) {
  body .alignwide { margin-inline: 0; }
}

/*
 * Link underlines.
 *
 * Hello Elementor ships two rules Kadence did not have:
 *
 *   a, a:visited                        { text-decoration: underline }
 *   .comments-area a, .page-content a   { text-decoration: underline }
 *
 * The second is the damaging one. ".page-content" is Hello's content wrapper,
 * which Kadence never rendered, so at (0,1,1) it now outranks the child
 * theme's own ".jsc-event-card__link { text-decoration: none }" at (0,1,0).
 * The result was every event card - title, date, venue, organiser - rendered
 * underlined on /shabbat/ and anywhere else cards appear.
 *
 * Kadence's body class was "link-style-standard", whose base behaviour was no
 * underline; its only underline rules were scoped to ".entry-content", which
 * Hello also does not render. So restoring "no underline" matches what the
 * site did before the migration.
 *
 * Led with "body" to outrank Hello on both counts. Inline text-decoration in
 * the event templates still wins over this, as it did before.
 */
body a,
body a:visited { text-decoration: none; }

body .page-content a,
body .comments-area a { text-decoration: none; }

/*
 * Content width on non-Elementor pages.
 *
 * Hello Elementor caps its content wrapper with a breakpoint ladder:
 *
 *   body:not([class*=elementor-page-]) .site-main {
 *     max-width: 500px / 600px / 800px / 1140px
 *   }
 *
 * Kadence used a flat 1290px (--global-content-width). Elementor-built pages
 * are exempt from Hello's rule, so this only bites on everything else -
 * cart, checkout, My Account, login, 404, blog. The 992-1199px band is the
 * worst of it: measured 800px against roughly 1052px under Kadence, a 252px
 * narrowing on an ordinary laptop. Above 1200px it is 1140 against 1290.
 *
 * Restore Kadence's width. Hello's selector scores (0,2,1); leading with
 * "html" and keeping the :not() takes this to (0,2,2) so it wins regardless
 * of load order, without !important.
 */
html body:not([class*="elementor-page-"]) .site-main {
  max-width: var(--global-content-width);
}