/*
Theme Name: Lions Club (Modern)
Description: A modern, purpose-driven child theme for Divi 5, inspired by the Lions spirit of “We Serve.” Featuring confident typography, thoughtful spacing, and refined visual details, it gives Lions Clubs and service organizations a polished, welcoming online presence—perfect for showcasing projects, connecting communities, and inspiring new members, all without altering the Divi parent theme.
Version: 0.1.0
Author: Lion Dax Davis
Author URI: https://daxdavis.com/
Theme URI: https://rubicontv.com/
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Template: Divi
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
1.0 CSS Custom Properties
2.0 Base / Reset
    2.1 Box Sizing
    2.2 Text Size Adjust
    2.3 Anchor Scroll Offset
3.0 Typography
    3.1 Page Title (H1)
    3.2 Small / Sub / Sup
    3.3 List Item Spacing (disabled — reference)
4.0 Utility Classes
    4.1 Text Outline
5.0 Components
    5.1 Mega Menu (Header Navigation)
    5.2 Photo-Lockup Pattern
6.0 Third-Party / Plugin Overrides (disabled — reference)
    6.1 DiviFlash FAQ Formatting

Breakpoint reference (media queries can't consume CSS custom
properties, so these are documented here rather than variabled):
  47.5rem  ≈ 760px  — phone
  67.5rem  ≈ 1080px — tablet
  980px               — photo-lockup component breakpoint
  767px               — photo-lockup component breakpoint
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# 1.0 CSS Custom Properties
--------------------------------------------------------------*/

:root {
  /* Brand colors — single source of truth for repeated brand hex/rgba values below */
  --clc-navy: #0d2240; /* Lions Navy — headings, dark UI */
  --clc-blue: #00338d; /* Primary / Lions Blue */
  --clc-yellow-brand: #ebb700; /* Divi Secondary Color */
  --clc-yellow-accent: #f9c910; /* Photo-Lockup accent band — intentionally distinct from --clc-yellow-brand */

  /* Structural */
  --clc-border-hairline: 0.0625rem; /* 1px at 16px root */
  --clc-transition-fast: 180ms ease;
}

/*--------------------------------------------------------------
# 2.0 Base / Reset
--------------------------------------------------------------*/

/* 2.1 Box Sizing */

html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

/* 2.2 Text Size Adjust — prevent mobile text-size inflation */

html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

/* 2.3 Anchor Scroll Offset — better anchor jump positioning */

:target {
  scroll-margin-block: 5ex;
}

/*--------------------------------------------------------------
# 3.0 Typography
--------------------------------------------------------------*/

/* 3.1 Page Title (H1) */

.pageTitle h1 {
  font-family: var(--et_global_heading_font, "Roboto", Arial, sans-serif);
  font-size: clamp(2.75rem, 1.75rem + 4.2vw, 5.9rem) !important;
  font-style: normal;
  font-weight: 950 !important;
  letter-spacing: -0.06em !important;
  line-height: 0.96 !important;
  padding-bottom: 0.625rem !important;
  color: var(--gcid-heading-color, var(--gcid-lions-navy, var(--clc-navy))) !important;
  text-align: left;
  text-transform: none;
  text-wrap: balance !important;
  margin: 0;
}

/* 3.2 Small / Sub / Sup */

small,
sub,
sup {
  font-size: 0.83em;
}

sub,
sup {
  line-height: 0;
  position: relative;
  vertical-align: baseline;
  display: inline-block;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

/* 3.3 List Item Spacing — disabled, kept for reference. Re-enable if list spacing needs a global override. */
/*
.et_pb_text li,
#left-area li {
  margin-left: 1.625rem;
  margin-bottom: 0.625rem;
  padding-left: 0.3125rem;
  list-style-position: outside;
}
*/

/*--------------------------------------------------------------
# 4.0 Utility Classes
--------------------------------------------------------------*/

/* 4.1 Text Outline */

.text-outline-point5 {
  text-shadow:
    0.0256rem 0.0256rem #000,
    0.0625rem 0 #000,
    0.0256rem -0.0256rem #000,
    0 -0.0625rem #000,
    -0.0256rem -0.0256rem #000,
    -0.0625rem 0 #000,
    -0.0256rem 0.0256rem #000,
    0 0.0625rem #000;
}

@supports (-webkit-text-stroke: 0.0313rem #000) {
  .text-outline-point5 {
    -webkit-text-stroke: 0.0313rem #000;
    text-shadow: none;
  }
}

.text-outline {
  text-shadow:
    0.0256rem 0.0256rem #000,
    0.0625rem 0 #000,
    0.0256rem -0.0256rem #000,
    0 -0.0625rem #000,
    -0.0256rem -0.0256rem #000,
    -0.0625rem 0 #000,
    -0.0256rem 0.0256rem #000,
    0 0.0625rem #000;
}

@supports (-webkit-text-stroke: 0.0625rem #000) {
  .text-outline {
    -webkit-text-stroke: 0.0625rem #000;
    text-shadow: none;
  }
}

.text-outline-2 {
  text-shadow:
    0.0881rem 0.0881rem #000,
    0.125rem 0 #000,
    0.0881rem -0.0881rem #000,
    0 -0.125rem #000,
    -0.0881rem -0.0881rem #000,
    -0.125rem 0 #000,
    -0.0881rem 0.0881rem #000,
    0 0.125rem #000;
}

@supports (-webkit-text-stroke: 0.125rem #000) {
  .text-outline-2 {
    -webkit-text-stroke: 0.125rem #000;
    text-shadow: none;
  }
}

/*--------------------------------------------------------------
# 5.0 Components
--------------------------------------------------------------*/

/* 5.1 Mega Menu (Header Navigation) — native Divi 5 mega menu v1.5 */

.et-l--header,
.et-l--header .et_builder_inner_content {
  position: relative;
  z-index: 100000;
}

[data-clc-trigger="events"],
[data-clc-trigger="causes"],
[data-clc-nav-item] {
  align-items: center;
  border-radius: 62.4375rem;
  color: var(--gcid-lions-navy, var(--clc-navy));
  font-weight: 850;
  min-height: 2.5rem;
  padding: 0.56rem 0.78rem;
  text-decoration: none;
}

[data-clc-trigger="events"]:hover,
[data-clc-trigger="causes"]:hover,
[data-clc-nav-item]:hover {
  background: color-mix(in srgb, var(--clc-blue) 9%, transparent);
}

[data-clc-trigger="events"] + .et_pb_dropdown,
[data-clc-trigger="causes"] + .et_pb_dropdown {
  background: #fffdf7;
  border: var(--clc-border-hairline) solid color-mix(in srgb, var(--clc-navy) 14%, transparent);
  border-radius: 1.55rem 1.55rem 1.25rem 1.25rem;
  box-shadow: 0 1.4rem 4rem color-mix(in srgb, var(--clc-navy) 16%, transparent);
  color: #101827;
  left: 50% !important;
  max-width: calc(100vw - 2rem);
  overflow: hidden;
  padding: 0;
  transform: translateX(-50%);
  width: min(76rem, calc(100vw - 2rem));
  z-index: 100001;
}

.et-l--header .et_pb_dropdown,
.et-l--header .sub-menu,
.et-l--header .children {
  border-bottom-left-radius: 1.25rem !important;
  border-bottom-right-radius: 1.25rem !important;
}

.et-l--header .sub-menu.df-menu-nav-level-1 {
  padding: 1rem !important;
}

.et-l--header .df-custom-submenu.df-mega-menu-item {
  border-bottom-left-radius: 1.25rem !important;
  border-bottom-right-radius: 1.25rem !important;
  overflow: hidden !important;
  padding: 1rem !important;
}

.et-l--header .df-am-row.top-row {
  position: relative !important;
  z-index: 100020 !important;
}

.et-l--header .df-am-row.center-row {
  position: relative !important;
  z-index: 100000 !important;
}

#menu-primary-navigation > li.df-mega-menu > .df-custom-submenu.df-mega-menu-item .et_pb_section,
#menu-primary-navigation > li.df-mega-menu > .df-custom-submenu.df-mega-menu-item .et_pb_row {
  padding: 0 !important;
}

#menu-utility-navigation > li.menu-item-900332 {
  overflow: visible !important;
  z-index: 100010 !important;
}

#menu-utility-navigation > li.menu-item-900332 > .sub-menu {
  background: var(--clc-navy) !important;
  border-bottom-left-radius: 1.25rem !important;
  border-bottom-right-radius: 1.25rem !important;
  padding: 1rem !important;
  z-index: 100011 !important;
}

#menu-utility-navigation > li.menu-item-900332 > .sub-menu > li {
  margin: 0 !important;
  padding: 0 !important;
}

#menu-utility-navigation > li.menu-item-900332 > .sub-menu > li + li {
  margin-top: 0.45rem !important;
}

#menu-utility-navigation > li.menu-item-900332 > .sub-menu > li > a {
  align-items: center !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border-radius: 0.9rem !important;
  color: #fff !important;
  display: flex !important;
  font-size: 0.92rem !important;
  font-weight: 850 !important;
  justify-content: space-between !important;
  line-height: 1.15 !important;
  padding: 0.72rem 0.82rem !important;
  text-decoration: none !important;
  width: 100% !important;
}

#menu-utility-navigation > li.menu-item-900332 > .sub-menu > li > a:hover,
#menu-utility-navigation > li.menu-item-900332 > .sub-menu > li > a:focus {
  background: color-mix(in srgb, var(--clc-yellow-brand) 18%, transparent) !important;
  color: #fff !important;
}

.et-l--header [data-clc-event-card="resources"] {
  padding-top: 1.72rem !important;
}

.et_pb_module:has(> [data-clc-trigger="events"]):hover > [data-clc-mega="events"],
.et_pb_module:has(> [data-clc-trigger="events"]):focus-within > [data-clc-mega="events"],
.et_pb_module:has(> [data-clc-mega="events"]:hover) > [data-clc-mega="events"],
.et_pb_module:has(> [data-clc-trigger="causes"]):hover > [data-clc-mega="causes"],
.et_pb_module:has(> [data-clc-trigger="causes"]):focus-within > [data-clc-mega="causes"],
.et_pb_module:has(> [data-clc-mega="causes"]:hover) > [data-clc-mega="causes"] {
  display: block !important;
}

[data-clc-event-card] {
  border: var(--clc-border-hairline) solid color-mix(in srgb, var(--clc-navy) 13%, transparent);
  border-radius: 1.25rem;
  min-height: 19rem;
  overflow: hidden;
  padding: 1rem;
  position: relative;
  transition:
    border-color var(--clc-transition-fast),
    box-shadow var(--clc-transition-fast),
    transform var(--clc-transition-fast);
}

[data-clc-event-card]:hover {
  border-color: color-mix(in srgb, var(--clc-blue) 28%, transparent);
  box-shadow: 0 1.1rem 2.4rem color-mix(in srgb, var(--clc-navy) 18%, transparent);
  transform: translateY(-0.18rem);
}

[data-clc-event-card="bws"] {
  background: linear-gradient(145deg, #4b0712 0%, #b7192b 100%);
}

[data-clc-event-card="easter"] {
  background: linear-gradient(145deg, #123a28 0%, #00ab68 100%);
}

[data-clc-event-card="kos"] {
  background: linear-gradient(145deg, #2c1235 0%, #7a2582 100%);
}

[data-clc-event-card="hio"] {
  background: linear-gradient(145deg, #07182f 0%, var(--clc-blue) 100%);
}

[data-clc-event-card="resources"] {
  align-items: center;
  background: linear-gradient(90deg, var(--clc-navy) 0%, var(--clc-blue) 100%);
  color: #fff;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  min-height: auto;
}

[data-clc-event-card="resources"] > .et_pb_module:not(:first-child) {
  flex: 0 0 auto;
}

[data-clc-event-card="resources"] .et_pb_heading {
  flex: 1 1 auto;
}

[data-clc-event-card="resources"] [data-clc-utility-link] {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 0.9rem;
  color: #fff;
  display: inline-flex;
  font-size: 0.86rem;
  font-weight: 950;
  justify-content: center;
  margin: 0;
  padding: 0.75rem 1rem;
  text-decoration: none;
  text-shadow: none;
  white-space: nowrap;
}

[data-clc-event-card="resources"] [data-clc-utility-link]:hover {
  background: color-mix(in srgb, var(--clc-yellow-brand) 18%, transparent);
}

[data-clc-causes-layout="main"] {
  align-items: stretch !important;
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(18rem, 0.72fr) minmax(0, 1.35fr);
}

[data-clc-local-panel="support"] {
  align-self: stretch;
  background: radial-gradient(circle at 80% 0%, color-mix(in srgb, var(--clc-yellow-brand) 32%, transparent), transparent 13rem), linear-gradient(145deg, #ffffff, #eaf2ff);
  border: var(--clc-border-hairline) solid color-mix(in srgb, var(--clc-blue) 14%, transparent);
  border-radius: 1.25rem;
  gap: 0.55rem;
  justify-content: start;
  overflow: hidden;
  padding: clamp(1rem, 2vw, 1.25rem);
  position: relative;
}

[data-clc-local-panel="support"] .et_pb_module_header {
  color: var(--clc-navy);
  font-size: clamp(1.8rem, 1.2rem + 2vw, 3rem);
  font-weight: 950;
  letter-spacing: -0.045em;
  line-height: 0.98;
  max-width: 11ch;
  text-wrap: balance;
}

[data-clc-local-panel="support"] > .et_pb_text:first-child p {
  color: var(--clc-blue);
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  line-height: 1;
  margin: 0 0 0.72rem;
  text-transform: uppercase;
}

[data-clc-local-panel="support"] [data-clc-card-copy] {
  color: #425066;
  max-width: 27rem;
}

[data-clc-local-panel="support"] .et_pb_link {
  align-items: center;
  background: rgba(255, 255, 255, 0.76);
  border-radius: 0.9rem;
  color: var(--clc-blue);
  display: flex;
  font-size: 0.92rem;
  font-weight: 920;
  justify-content: space-between;
  line-height: 1.15;
  margin: 0.55rem 0 0;
  min-height: 0;
  padding: 0.72rem 0.82rem;
  text-decoration: none;
  width: 100%;
}

[data-clc-local-panel="support"] .et_pb_link:hover {
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 0.55rem 1.2rem color-mix(in srgb, var(--clc-navy) 10%, transparent);
}

[data-clc-local-panel="support"] .et_pb_link_inner {
  align-items: center;
  display: flex;
  justify-content: space-between;
  width: 100%;
}

[data-clc-local-panel="support"] .et_pb_link .et-pb-icon {
  font-size: 0.86rem;
  line-height: 1;
  margin-left: auto;
  order: 2;
}

[data-clc-cause-grid="causes"] {
  align-content: start;
  align-self: stretch;
  display: grid;
  gap: 0.75rem;
  grid-auto-rows: auto;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  height: 100%;
}

[data-clc-cause-card] {
  background: #fff;
  border: var(--clc-border-hairline) solid color-mix(in srgb, var(--clc-navy) 13%, transparent);
  border-radius: 1.25rem;
  min-height: 9.2rem;
  padding: 0.9rem;
  transition:
    border-color var(--clc-transition-fast),
    box-shadow var(--clc-transition-fast),
    transform var(--clc-transition-fast);
}

[data-clc-cause-card]:hover {
  border-color: color-mix(in srgb, var(--clc-blue) 30%, transparent);
  box-shadow: 0 0.9rem 2rem color-mix(in srgb, var(--clc-navy) 14%, transparent);
  transform: translateY(-0.12rem);
}

[data-clc-cause-card] .difl_advanced_blurb {
  margin: 0;
  width: 100%;
}

[data-clc-cause-card] .df_ab_blurb_container {
  align-items: flex-start;
  gap: 0.68rem;
}

[data-clc-cause-card] .df_ab_blurb_image {
  flex: 0 0 auto;
  margin: 0;
  width: 2.18rem;
}

[data-clc-cause-card] .df_ab_blurb_image img,
[data-clc-cause-card] .df_ab_blurb_image_img {
  display: block;
  height: 1.72rem;
  object-fit: contain;
  width: 1.72rem;
}

[data-clc-cause-card] .df_ab_blurb_title {
  color: var(--clc-navy);
  font-size: 1.04rem;
  line-height: 1.05;
  margin: 0.02rem 0 0;
}

[data-clc-cause-card] .df_ab_blurb_description {
  color: var(--clc-muted, #425066);
  font-size: 0.82rem;
  line-height: 1.35;
  margin: 0.5rem 0 0;
}

[data-clc-cause-card] .df_ab_blurb_button_wrapper {
  display: none;
}

@media (max-width: 67.5rem) {
  [data-clc-causes-layout="main"] {
    grid-column: 1 / -1;
  }

  [data-clc-causes-layout="main"] {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 47.5rem) {
  [data-clc-trigger="events"] + .et_pb_dropdown,
  [data-clc-trigger="causes"] + .et_pb_dropdown {
    left: 0 !important;
    max-width: 100%;
    position: static !important;
    transform: none;
    width: 100%;
  }

  [data-clc-cause-grid="causes"] {
    grid-template-columns: 1fr;
  }
}

/* 5.2 Photo-Lockup Pattern — .photo-lock-row > .col-content / .col-image */
/* Order-aware — flips automatically based on which column comes first in the row. */

.photo-lock-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  column-gap: 1rem;
  background: #ffffff;
  border-radius: 1.75rem;
  overflow: hidden;
}
@media (max-width: 980px) {
  .photo-lock-row {
    flex-direction: column-reverse;
    row-gap: 40px;
    column-gap: 0;
    width: 90vw;
    max-width: 1180px;
    border-radius: 1.25rem;
  }
}
@media (max-width: 767px) {
  .photo-lock-row {
    width: 92vw;
    max-width: 1180px;
  }
}

.photo-lock-row .col-content {
  flex: 45 1 0% !important;
  min-width: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: clamp(2rem, 4vw, 3.5rem);
}
.photo-lock-row .col-content:first-child {
  padding-right: 1rem;
}
.photo-lock-row .col-content:last-child {
  padding-left: 1rem;
}
@media (max-width: 980px) {
  .photo-lock-row .col-content {
    flex: 1 1 auto !important;
    width: 100%;
    max-width: 100%;
    padding: clamp(1.5rem, 4vw, 2.5rem) !important;
  }
}

.photo-lock-row .col-image {
  --band: var(--clc-yellow-accent); /* local override point — set --band on a specific instance to recolor just that one */
  flex: 55 1 0% !important;
  min-width: 0;
  position: relative;
  overflow: hidden;
  min-height: 29rem;
  background-size: cover;
  background-position: center;
}
.photo-lock-row .col-image::before {
  content: "";
  position: absolute;
  top: 0;
  width: 15rem;
  height: 15rem;
  pointer-events: none;
  z-index: 2;
}
.photo-lock-row .col-image:first-child::before {
  left: 0;
  right: auto;
  clip-path: polygon(0 0, 100% 0, 0 100%);
  background: linear-gradient(135deg, color-mix(in srgb, var(--band) 100%, transparent) 0 2.4rem, color-mix(in srgb, var(--band) 70%, transparent) 2.4rem 4.8rem, color-mix(in srgb, var(--band) 45%, transparent) 4.8rem 7.2rem, transparent 7.2rem);
}
.photo-lock-row .col-image:last-child::before {
  right: 0;
  left: auto;
  clip-path: polygon(0 0, 100% 0, 100% 100%);
  background: linear-gradient(225deg, color-mix(in srgb, var(--band) 100%, transparent) 0 2.4rem, color-mix(in srgb, var(--band) 70%, transparent) 2.4rem 4.8rem, color-mix(in srgb, var(--band) 45%, transparent) 4.8rem 7.2rem, transparent 7.2rem);
}
.photo-lock-row .col-image:first-child {
  clip-path: polygon(0 0, 100% 0, 88% 100%, 0 100%);
}
.photo-lock-row .col-image:last-child {
  clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%);
}
@media (max-width: 980px) {
  .photo-lock-row .col-image {
    flex: 1 1 auto !important;
    width: 100%;
    max-width: 100%;
    min-height: 22rem;
    clip-path: none !important;
  }
}
@media (max-width: 767px) {
  .photo-lock-row .col-image {
    min-height: 18rem;
  }
}

/*--------------------------------------------------------------
# 6.0 Third-Party / Plugin Overrides
--------------------------------------------------------------*/

/* 6.1 DiviFlash FAQ Formatting — disabled, kept for reference. Re-enable if the FAQ Q&A layout needs this styling. */
/*
.difl_faqitem .faq_answer_wrapper .faq_answer div p {
  padding-bottom: 1rem;
  line-height: 1.7em;
}

.difl_faqitem .faq_answer ul {
  padding: 0 0 1rem 1rem;
}

.difl_faq.faqQandA .difl_faqitem .faq_answer_wrapper .faq_answer > div > p:first-child::before,
.difl_faq.faqQandA .difl_faqitem .faq_answer_wrapper .faq_answer > div > div:first-child::before {
  font-weight: 600;
  font-size: 1.375rem;
  content: "A. ";
}

.difl_faq.faqQandA .df_faq_item .faq_question_wrapper .faq_question_title::before {
  font-weight: 600;
  font-size: 1.375rem;
  content: "Q. ";
}
*/

/* ---------------------------------------------------------------------------
   Global footer field — render-blocking fallback.

   The navy is set as a block attribute on the section in Theme Builder footer
   layout 396, but Divi compiles that into et-core-unified-*-deferred-*.css,
   which is delivered via rel="preload" + an onload JS promotion. Until that
   sheet applies, Divi's base .et_pb_section{background-color:#fff} wins and the
   footer flashes white; with JavaScript disabled it stays white.

   This declaration loads render-blocking, so it paints the field immediately.
   Divi's generated rule is !important and takes over the moment the deferred
   sheet lands, so this never fights the Theme Builder value — it only covers
   the pre-load window and the JS-off case. The literal is the fallback for
   --gcid-lions-navy, not a second source of truth.
   --------------------------------------------------------------------------- */
.et-l--footer > .et_builder_inner_content > .et_pb_section {
  background-color: var(--gcid-lions-navy, #0D2240);
}

/* ---------------------------------------------------------------------------
   Breakfast with Santa — activity card artwork below 980px.

   The six activity cards (#activities) put their illustration on the column
   itself as a background-image, so those columns hold no modules. Divi marks
   any module-less column .et_pb_column_empty and hides it outright:

       @media (max-width:980px) { .et_pb_column.et_pb_column_empty { display:none } }

   Below 980px that removes all six illustrations — measured display:none and
   height 0 on every card, desktop unaffected (494px wide, height matched to
   the copy column on all six). The authored tablet/phone min-heights (260px /
   210px) already out-specify Divi's companion .et_pb_column_empty{min-height:1px}
   rule, so re-showing the column is the whole fix.

   Scoped to #activities by design: this un-hides only these six intentional
   background-art columns, never a genuinely empty column elsewhere. The id
   selector also outranks Divi's .et_pb_column.et_pb_column_empty regardless of
   stylesheet order.
   --------------------------------------------------------------------------- */
@media (max-width: 980px) {
  #activities .et_pb_column.et_pb_column_empty {
    display: block;
  }
}