/*
Theme Name:     Safety Center
Theme URI:      n/a
Template:       kadence
Author:         Three29 LLC
Author URI:     https://three29.com/
Description:    A Kadence custom child theme for Safety Center site
Version:        1.0
License:        GNU General Public License v3.0 (or later)
License URI:    https://www.gnu.org/licenses/gpl-3.0.html
*/

.current-menu-item .kb-link-wrap > a {
  font-weight: 900;
}

/*
 * Desktop content edge padding: instead of Kadence's fixed 7.13rem, scale linearly from the tablet
 * padding (24px) at 1025px up to Figma's 114px side padding at its 1728px frame (1500px content),
 * then stay at 114px. Tablet/mobile keep Kadence's own values.
 */
@media (min-width: 1025px) {
  :root {
    --global-content-edge-padding: clamp(1.5rem, -6.7015rem + 12.8023vw, 7.125rem);
  }
}

/*
 * Desktop header (shown above 1024px): keep the logo, the program menu (navigation 36, five items since
 * Traffic Safety was added) and the About/Contact menu (navigation 51) on one line. Instead of letting the
 * menu wrap, space is reclaimed progressively on narrower desktop widths.
 */
.wp-block-kadence-header-desktop .kb-identity {
  flex-shrink: 0;
}

/* Dropdown chevrons in Figma's navy (Primary/navy blue), the link text stays dark navy */
.wp-block-kadence-header-desktop .wp-block-kadence-navigation .menu > .wp-block-kadence-navigation-link > .kb-link-wrap > .kb-nav-dropdown-toggle-btn {
  color: var(--global-palette1);
}

/* Figma's chevron is 12 x 7 with a ~2px stroke, 4px after the text and centered on it. Kadence has no setting for the
   dropdown icon: its arrow is 1em (8 x 4 visible at 14px), thin, and nudged 0.125em down. Here the icon area is 20px
   wide (Kadence's own --kb-nav-drop-icon-width, also used for the link padding) and the arrow is scaled, outlined and centered on the text. */
.wp-block-kadence-header-desktop .wp-block-kadence-navigation .menu > .wp-block-kadence-navigation-link > .kb-link-wrap {
  --kb-nav-drop-icon-width: 20px;
}

.wp-block-kadence-header-desktop .wp-block-kadence-navigation .menu > .wp-block-kadence-navigation-link > .kb-link-wrap > .kb-nav-dropdown-toggle-btn .kb-nav-arrow-svg {
  top: 0.5px;
  width: 19.5px;
  height: 19.5px;
  stroke: currentColor;
  stroke-width: 0.8;
}

.wp-block-kadence-header-desktop .wp-block-kadence-navigation36-cpt-id > .navigation > .menu-container > .menu,
.wp-block-kadence-header-desktop .wp-block-kadence-navigation51-cpt-id > .navigation > .menu-container > .menu {
  flex-wrap: nowrap;
}

/* top-level items only: submenu items must keep wrapping inside their dropdown */
.wp-block-kadence-header-desktop .wp-block-kadence-navigation36-cpt-id > .navigation > .menu-container > .menu > .wp-block-kadence-navigation-link > .kb-link-wrap,
.wp-block-kadence-header-desktop .wp-block-kadence-navigation51-cpt-id > .navigation > .menu-container > .menu > .wp-block-kadence-navigation-link > .kb-link-wrap {
  white-space: nowrap;
}

@media (min-width: 1200px) and (max-width: 1499px) {
  .wp-block-kadence-header-desktop .kadence-header-row-inner {
    padding-left: 32px !important;
    padding-right: 24px !important;
  }

  .wp-block-kadence-header-desktop .wp-block-kadence-header-section {
    gap: 1.25rem !important;
  }

  .wp-block-kadence-header-desktop .kb-identity .custom-logo {
    width: 170px;
    height: auto;
  }

  .wp-block-kadence-header-desktop .wp-block-kadence-navigation36-cpt-id {
    --kb-nav-column-gap: 10px;
  }

  .wp-block-kadence-header-desktop .wp-block-kadence-navigation51-cpt-id {
    --kb-nav-column-gap: 12px;
  }
}

@media (min-width: 1200px) and (max-width: 1279px) {
  .wp-block-kadence-header-desktop .kb-identity .custom-logo {
    width: 150px;
  }

  .wp-block-kadence-header-desktop .wp-block-kadence-navigation36-cpt-id > .navigation > .menu-container > .menu > .wp-block-kadence-navigation-link > .kb-link-wrap,
  .wp-block-kadence-header-desktop .wp-block-kadence-navigation51-cpt-id > .navigation > .menu-container > .menu > .wp-block-kadence-navigation-link > .kb-link-wrap {
    font-size: 13px;
  }

  .wp-block-kadence-header-desktop .wp-block-kadence-navigation36-cpt-id {
    --kb-nav-column-gap: 6px;
  }

  .wp-block-kadence-header-desktop .kb-button {
    padding-left: 22px !important;
    padding-right: 22px !important;
  }
}

/* 1025–1199px: too narrow for the one-line desktop menu, so use the tablet header (menu button)
   that Kadence otherwise only shows at 1024px and below. */
@media (min-width: 1025px) and (max-width: 1199px) {
  .wp-block-kadence-header .wp-block-kadence-header-desktop {
    display: none;
  }

  .wp-block-kadence-header .wp-block-kadence-header-tablet {
    display: block;
  }
}

.tribe-events-schedule h2 {
  font-size: clamp(18px, -0.1154rem + 2.76vw, 32px);
}

/*
 * Embedded videos (core Embed block: YouTube, Vimeo…): rounded corners, matching the
 * 32px radius used on the Motorcycle Training page's video and the site's rounded photos.
 */
.wp-block-embed.is-type-video .wp-block-embed__wrapper {
  border-radius: 32px;
  overflow: hidden;
}

/*
 * PayPal hosted "Donate" forms (embedded in Custom HTML blocks).
 * PayPal submits through an <input type="image"> showing its GIF button, which can't be restyled,
 * so the GIF is made invisible (it stays the clickable submit area) and a label matching the
 * site's primary Kadence buttons is drawn over it. Applies to any PayPal form with an image submit.
 */
form[action*="paypal.com"]:has(input[type="image"]) {
  position: relative;
  display: inline-block;
  margin: 0;
}

form[action*="paypal.com"]:has(input[type="image"])::before {
  content: "Donate";
  display: inline-block;
  padding: 17px 32px;
  border: 1px solid var(--global-palette-btn-bg);
  border-radius: 100px;
  background: var(--global-palette-btn-bg);
  color: var(--global-palette-btn);
  font-size: clamp(13px, 0.7708rem + 0.1389vw, 14px);
  font-weight: 700;
  line-height: 1.14;
  box-shadow: 0 0 0 -7px rgba(0, 0, 0, 0);
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

form[action*="paypal.com"]:has(input[type="image"]):hover::before {
  border-color: var(--global-palette-btn-bg-hover);
  background: var(--global-palette-btn-bg-hover);
  box-shadow: 0 15px 25px -7px rgba(0, 0, 0, 0.1);
}

form[action*="paypal.com"]:has(input[type="image"]:focus-visible)::before {
  outline: 2px solid var(--global-palette-btn-bg-hover);
  outline-offset: 2px;
}

form[action*="paypal.com"] input[type="image"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

/* line breaks WordPress may auto-insert between the form's hidden fields */
form[action*="paypal.com"] br {
  display: none;
}

/*
 * PayPal checkout buttons (newer hosted "Pay Now" forms posting to paypal.com/ncp/payment, e.g. DUI > Make a Payment).
 * PayPal's embed styles its submit input with a fixed 2.625rem height, so the theme's button padding squeezed the
 * label. Drawn like the Donate button above.
 */
form[action*="paypal.com/ncp/payment"] input[type="submit"] {
  height: auto;
  padding: 17px 32px;
  border: 1px solid var(--global-palette-btn-bg);
  border-radius: 100px;
  background: var(--global-palette-btn-bg);
  color: var(--global-palette-btn);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.14;
  box-shadow: 0 0 0 -7px rgba(0, 0, 0, 0);
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

form[action*="paypal.com/ncp/payment"] input[type="submit"]:hover {
  border-color: var(--global-palette-btn-bg-hover);
  background: var(--global-palette-btn-bg-hover);
  box-shadow: 0 15px 25px -7px rgba(0, 0, 0, 0.1);
}

form[action*="paypal.com/ncp/payment"] input[type="submit"]:focus-visible {
  outline: 2px solid var(--global-palette-btn-bg-hover);
  outline-offset: 2px;
}

/* Events styles */
.tribe-block__related-events__title {
  margin-top: 2.5rem;
}

.tribe-events-single ul.tribe-related-events {
  margin: 0 0 2rem;
}

/*
 * Related Events: equal-height cards.
 * Events Calendar Pro floats the cards with an automatic height, so each card is as tall as its
 * featured image. Lay them out as a stretching flex row and give every thumbnail the same 3:2 frame
 * (images contained, so logos are never cropped).
 */
.tribe-events-single ul.tribe-related-events {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}

/* the list's clearfix pseudo-elements would become empty flex items */
.tribe-events-single ul.tribe-related-events::before,
.tribe-events-single ul.tribe-related-events::after {
  display: none;
}

.tribe-events-single ul.tribe-related-events li {
  float: none;
  display: flex;
  flex-direction: column;
}

.tribe-events-single ul.tribe-related-events .tribe-related-events-thumbnail a {
  display: block;
  aspect-ratio: 3 / 2;
}

.tribe-events-single ul.tribe-related-events .tribe-related-events-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* Course lists (Workplace Safety > Courses, Virtual Instructor-Led Training): keep the info icon right after the course
   name, also when the name wraps. Kadence lays out icon headings as a flex row, which pushes the icon to the far edge. */
.wp-block-kadence-advancedheading.course-line.kt-adv-heading-has-icon[data-kb-block] {
  display: block;
}

.course-line .kb-adv-heading-icon {
  margin-left: 0.3em;
  vertical-align: -0.1em;
}

/* Card rows (class "equal-cards" on the Row Layout holding the white cards side by side, e.g. CSMS "Topics Include" /
   "Requirements"): cards as tall as the row, buttons pinned to the bottom. Not on phones, where the cards stack. */
@media (min-width: 768px) {
  .equal-cards > .kt-row-column-wrap,
  .equal-cards > .kt-row-column-wrap > .wp-block-kadence-column > .kt-inside-inner-col > .kb-row-layout-wrap > .kt-row-column-wrap {
    grid-auto-rows: 1fr;
  }

  .equal-cards > .kt-row-column-wrap > .wp-block-kadence-column > .kt-inside-inner-col,
  .equal-cards > .kt-row-column-wrap > .wp-block-kadence-column > .kt-inside-inner-col > .kb-row-layout-wrap > .kt-row-column-wrap > .wp-block-kadence-column > .kt-inside-inner-col {
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Kadence centers column content vertically on tablet */
    height: 100%;
  }

  .equal-cards > .kt-row-column-wrap > .wp-block-kadence-column > .kt-inside-inner-col > .kb-row-layout-wrap {
    flex-grow: 1;
  }

  .equal-cards > .kt-row-column-wrap > .wp-block-kadence-column > .kt-inside-inner-col > .kb-row-layout-wrap > .kt-row-column-wrap {
    height: 100%;
  }

  .equal-cards .kb-row-layout-wrap .wp-block-kadence-advancedbtn {
    margin-top: auto;
  }

  /* Cards stacking several columns (Row Layout set to "row", e.g. the location cards: map, then the white text
     column): the equal row heights above would also split the card into equal halves, so only the last column grows
     and takes the extra height. */
  .equal-cards > .kt-row-column-wrap > .wp-block-kadence-column > .kt-inside-inner-col > .kb-row-layout-wrap > .kt-row-column-wrap.kt-row-layout-row {
    display: flex;
    flex-direction: column;
  }

  .equal-cards > .kt-row-column-wrap > .wp-block-kadence-column > .kt-inside-inner-col > .kb-row-layout-wrap > .kt-row-column-wrap.kt-row-layout-row > .wp-block-kadence-column:last-child {
    flex-grow: 1;
  }
}

/* Location titles (class "location-title" on the location cards' heading, e.g. DUI Program Locations): 22px bold on
   every screen size. Their heading level follows each page's outline (h3 under a Locations h2, h2 when the page has no
   h2 above them), so the look is set here instead of coming from the global heading styles; no Kadence font size
   preset is 22px on both desktop and mobile. */
.wp-block-kadence-advancedheading.location-title {
  font-size: 22px;
  font-weight: 700;
  line-height: 28px; /* Figma H6: 22/28 */
  letter-spacing: normal;
}

/*
 * Footer columns (Programs, Organization, Contact), spaced as in Figma.
 * Section 1 is the logo block; sections 2-4 hold one title widget + one list widget each, except Contact, whose first
 * widget is a Row Layout (title + phone, then email) followed by the Corporate Headquarters title and address widgets.
 * Kadence prints a <style> before each block, hence :first-of-type instead of :first-child.
 */
.site-top-footer-wrap :is(.site-footer-top-section-2, .site-footer-top-section-3) .footer-widget-area-inner > .widget:first-child p,
.site-top-footer-wrap .site-footer-top-section-4 .footer-widget-area-inner > .widget:first-child .wp-block-kadence-column:first-of-type .kt-inside-inner-col > p:first-of-type,
.site-top-footer-wrap .site-footer-top-section-4 .footer-widget-area-inner > .widget:nth-child(2) p {
  line-height: 14px; /* Figma title box; the links then start 32px below the title top */
}

/* Contact: phone 32px below the title, email 41px below the phone, headquarters 70px below the email */
.site-top-footer-wrap .site-footer-top-section-4 .footer-widget-area-inner > .widget:first-child .wp-block-kadence-column:first-of-type .kt-inside-inner-col > p:first-of-type {
  margin-bottom: 18px;
}

.site-top-footer-wrap .site-footer-top-section-4 .footer-widget-area-inner > .widget:first-child .kt-row-column-wrap {
  row-gap: 17px;
  padding-bottom: 28px;
}

/* "Corporate Headquarters" is wider than its column on desktop; in Figma it stays on one line and overhangs */
.site-top-footer-wrap .site-footer-top-section-4 .footer-widget-area-inner > .widget:nth-child(2) p {
  white-space: nowrap;
}

/* Desktop: as in Figma, the footer content is 1242px wide and centered (243-1485 at 1728px), 15px inside the page
   content edge, with the three columns 220px apart and Contact 175px before the end (870/1090/1310 at 1728px) */
@media (min-width: 1025px) {
  .site-footer .site-footer-row-container-inner > .site-container > .site-footer-row {
    max-width: 1242px;
    margin-left: auto;
    margin-right: auto;
  }

  .site-top-footer-wrap .site-top-footer-inner-wrap.site-footer-row.site-footer-row-columns-4 {
    grid-template-columns: minmax(0, 1fr) 220px 220px 175px;
    column-gap: 0;
  }
}

@media (max-width: 1024px) {
  /* The contained footer rows pad both the row and its .site-container with the edge padding: keep only one, so
     the footer lines up with the page content */
  .site-footer-row-layout-contained > .site-footer-row-container-inner > .site-container {
    padding-left: 0;
    padding-right: 0;
  }

  /* Tablet: logo block on its own row, then the three columns side by side, 220px apart, 32px below */
  .site-top-footer-wrap .site-top-footer-inner-wrap.site-footer-row.site-footer-row-columns-4 {
    grid-template-columns: 220px 220px minmax(0, 1fr);
    column-gap: 0;
    row-gap: 32px;
  }

  .site-top-footer-wrap .site-footer-top-section-1 {
    grid-column: 1 / -1;
  }
}

/* Mobile (Figma 390px frame): Programs and Organization side by side (Organization at 65%), Contact below them */
@media (max-width: 767px) {
  .site-top-footer-wrap .site-top-footer-inner-wrap.site-footer-row.site-footer-row-columns-4 {
    grid-template-columns: minmax(0, 65fr) minmax(0, 35fr);
  }

  .site-top-footer-wrap .site-footer-top-section-4 {
    grid-column: 1 / -1;
    margin-top: 22px;
  }

  .site-top-footer-wrap :is(.site-footer-top-section-2, .site-footer-top-section-3) .footer-widget-area-inner > .widget:first-child p,
  .site-top-footer-wrap .site-footer-top-section-4 .footer-widget-area-inner > .widget:first-child .wp-block-kadence-column:first-of-type .kt-inside-inner-col > p:first-of-type,
  .site-top-footer-wrap .site-footer-top-section-4 .footer-widget-area-inner > .widget:nth-child(2) p {
    line-height: 18px;
  }

  .site-top-footer-wrap .site-footer-top-section-4 .footer-widget-area-inner > .widget:first-child .wp-block-kadence-column:first-of-type .kt-inside-inner-col > p:first-of-type {
    margin-bottom: 12px;
  }

  .site-top-footer-wrap .site-footer-section .wp-block-kadence-navigation .menu {
    row-gap: 0;
  }

  .site-top-footer-wrap .site-footer-section .wp-block-kadence-navigation .menu a {
    white-space: nowrap;
  }

  .site-top-footer-wrap .site-footer-top-section-4 .footer-widget-area-inner > .widget:first-child {
    margin-bottom: 10px;
  }

  .site-top-footer-wrap .site-footer-top-section-4 .footer-widget-area-inner > .widget:first-child .kt-row-column-wrap {
    row-gap: 6px;
    padding-bottom: 0;
  }
}

/*
 * Footer legal menu (Privacy · Accessibility · Terms), as in Figma: links without side padding, so the menu lines up
 * with the copyright line on mobile and with the content edge on desktop, separated by middle dots (decorative, empty
 * alternative text for screen readers where supported).
 */
#colophon .footer-navigation .footer-menu-container > ul > li {
  display: flex;
  align-items: center;
}

#colophon .footer-navigation .footer-menu-container > ul > li > a {
  padding-left: 0;
  padding-right: 0;
}

#colophon .footer-navigation .footer-menu-container > ul > li + li::before {
  content: "\00B7";
  content: "\00B7" / "";
  margin: 0 6px;
  color: rgba(14, 21, 33, 0.55);
  line-height: 1; /* not the body's 32px, so the row is as tall as its 20px text */
}

/*
 * Footer bottom row divider: Kadence draws it on the padded row container, so on desktop it ran past the text by the
 * content edge padding. As in Figma, it spans only the content (from the copyright text to the end of the legal menu).
 * Same color and spacing as the theme option (Footer > Bottom Row > Top Border).
 */
.site-footer .site-bottom-footer-wrap .site-footer-row-container-inner {
  border-top: 0;
}

.site-footer .site-bottom-footer-wrap .site-bottom-footer-inner-wrap {
  border-top: 1px solid rgba(14, 21, 33, 0.1);
}

/*
 * Program cards (class "program-card-photo" on the card image): Figma's 357 x 212 photo. Kadence image ratios are fixed
 * presets (3:2 = 238px, 16:9 = 201px), so the ratio box is set here. Desktop only: mobile cards use another layout.
 */
@media (min-width: 1025px) {
  .wp-block-kadence-image.program-card-photo .kb-is-ratio-image {
    padding-bottom: 59.38%;
  }
}

/*
 * FAQ accordions (class "faq-accordion" on the Kadence Accordion block): in Figma an open item has only a 24px gap
 * between its title row and the answer (closed items keep the full 32px bottom padding). Kadence uses one title
 * padding for both states, so the open title gets a smaller bottom padding here. Desktop only, like the Figma frame.
 */
@media (min-width: 1025px) {
  .faq-accordion .kt-accordion-wrap > .kt-accordion-inner-wrap > .wp-block-kadence-pane > .kt-accordion-header-wrap > .kt-blocks-accordion-header.kt-accordion-panel-active {
    padding-bottom: 21px;
  }
}

/*
 * Tall photos (class "photo-ratio-4x5" on a Kadence Image set to the 3:4 portrait ratio): Figma crops these to
 * 737 x 925. Kadence's ratio presets stop at 3:4 (133%), so the desktop ratio box is set here; tablet and mobile keep 3:4.
 */
@media (min-width: 1025px) {
  .wp-block-kadence-image.photo-ratio-4x5 .kb-is-ratio-image {
    padding-bottom: 125.51%;
  }

  /* Motorcycle Training mission photo: Figma's 515 x 485 crop (the image keeps Kadence's 3:2 ratio below desktop) */
  .wp-block-kadence-image.photo-ratio-515x485 .kb-is-ratio-image {
    padding-bottom: 94.17%;
  }
}