/*
 Theme Name: Storefront Child - JLCFDN
 Template: storefront
 Description: Child theme for Jacobus Lions Club Foundation EMS subscriptions.
 Version: 1.0.0
 Author: York Web Tech (ChatGPT helper)
*/


/* =========================================================
   JLCFDN.org — Storefront polish (v2)
   - Better logo presentation
   - Higher-contrast menus
   - Remove boxed-in single product
   - Keep boxes around custom name fields
   Paste into Appearance → Customize → Additional CSS
   ========================================================= */
:root{
  --jlc-navy:#0b2a4a;
  --jlc-navy-2:#123d6e;
  --jlc-gold:#f5b700;
  --jlc-cloud:#f7f7f9;
  --jlc-white:#fff;
}

/* Add bottom padding to the main content area of all pages */
#et-main-area #main-content {
  padding-bottom: 40px !important;
}


/* Header / Branding */
.site-header{
  background:var(--jlc-navy);
  border-bottom:4px solid var(--jlc-gold);
  position:sticky;top:0;z-index:999;
}

/* Improve logo sizing/spacing */
.site-branding{ display:flex; align-items:center; gap:.65rem; }
.custom-logo, .site-logo-anchor img{ max-height:62px; width:auto; filter: drop-shadow(0 2px 6px rgba(0,0,0,.25)); }
@media (max-width:782px){
  .custom-logo, .site-logo-anchor img{ max-height:48px; }
}

/* Title/Tagline */
.site-header .site-branding .site-title,
.site-header .site-branding .site-title a,
.site-header .site-branding .site-description{ color:#fff !important; }
.site-header .site-branding .site-description{ opacity:.85; }

/* Primary menu readability */
.storefront-primary-navigation .main-navigation ul.menu > li > a,
.main-navigation ul.menu > li > a,
.site-header-cart .cart-contents{
  color:#fff !important;
  font-weight:800;
  letter-spacing:.02em;
  text-transform:uppercase;
  font-size:15px;
  padding:1rem .9rem;
}
.storefront-primary-navigation .main-navigation ul.menu > li > a:hover,
.main-navigation ul.menu > li > a:hover,
.main-navigation ul.menu > li.current-menu-item > a,
.main-navigation ul.menu > li.current-menu-ancestor > a{
  color:var(--jlc-gold) !important;
  background:rgba(255,255,255,.06);
}

/* Dropdowns */
.main-navigation ul.menu ul{
  background:var(--jlc-navy);
  border:1px solid rgba(245,183,0,.35);
  box-shadow:0 10px 24px rgba(0,0,0,.24);
}
.main-navigation ul.menu ul li a{ color:var(--jlc-navy) !important; font-weight:600; }
.main-navigation ul.menu ul li a:hover{ color:var(--jlc-gold) !important; }



/* Mobile menu */
button.menu-toggle{
  background:var(--jlc-navy); color:#fff;
  border:2px solid var(--jlc-gold); border-radius:8px;
  padding:.55rem .9rem; font-weight:800;
}
.handheld-navigation{ background:var(--jlc-navy); }
.handheld-navigation ul.menu li a{ color:#fff !important; font-weight:700; text-transform:uppercase; }
.handheld-navigation .menu li a:hover{ color:var(--jlc-gold) !important; }

/* MOBILE MENU FIX: stop the toggle button from blocking the dropdown */
:root { --jlcfdn-header-height: 64px; } /* adjust if your header is taller */

/* --- Fix mobile menu: remove blocking ::before/::after overlays --- */
@media (max-width: 782px) {
  /* Kill the overlays on the nav container and the toggle button */
  #site-navigation::before,
  #site-navigation::after,
  .main-navigation::before,
  .main-navigation::after,
  #site-navigation-menu-toggle::before,
  #site-navigation-menu-toggle::after,
  #site-navigation-menu-toggle span::before,
  #site-navigation-menu-toggle span::after {
    content: "" !important;
    display: none !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
  }

  /* Keep the toggle sized to what you can see (no invisible full-width hit area) */
  #site-navigation-menu-toggle {
    display: inline-flex;
    align-items: center;
    width: auto !important;
    max-width: none !important;
    padding: 10px 14px;
    position: relative;
    z-index: 10010; /* below the dropdown we force next */
  }

  /* Make sure the dropdown overlays everything when opened */
  .main-navigation,
  #site-navigation {
    position: relative;
    overflow: visible !important; /* don't clip dropdown */
  }
  .main-navigation.toggled .handheld-navigation {
    position: fixed;
    top: var(--jlcfdn-header-height, 64px); /* adjust if your header is taller */
    left: 0;
    right: 0;
    z-index: 10020;
    background: #0a2048;
    border: 0;
    box-shadow: 0 12px 24px rgba(0,0,0,.18);
  }

  /* Readable/tappable links */
  .handheld-navigation a {
    color: #fff !important;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
  .handheld-navigation a:hover,
  .handheld-navigation a:focus {
    color: #FFD24A !important;
  }
}



/* ===== Mobile menu (Storefront): force colors + remove purple rule ===== */
@media (max-width: 1024px) {
  /* Make the panel readable
  nav#site-navigation.main-navigation.toggled { background:#0a2048 !important; }
 */
  /* 1) Force link text color inside the opened menu */
  nav#site-navigation.main-navigation.toggled .menu a,
  nav#site-navigation.main-navigation.toggled .menu a:visited {
    color:#ffffff !important;             /* white */
    opacity:1 !important;
    text-decoration:none !important;
  }
  nav#site-navigation.main-navigation.toggled .menu a:hover,
  nav#site-navigation.main-navigation.toggled .menu a:focus,
  nav#site-navigation.main-navigation.toggled .menu .current-menu-item > a,
  nav#site-navigation.main-navigation.toggled .menu .current_page_item > a {
    color:#FFD24A !important;             /* gold on hover/current */
  }

  /* 2) Kill ANY underline rule the theme might add */
  nav#site-navigation.main-navigation.toggled .menu a,
  nav#site-navigation.main-navigation.toggled .menu a:hover,
  nav#site-navigation.main-navigation.toggled .menu a:focus {
    border:0 !important;
    box-shadow:none !important;           /* Storefront’s accent line */
    outline:0 !important;
    background-image:none !important;
    text-decoration-thickness:0 !important;
    text-underline-offset:0 !important;
    -webkit-tap-highlight-color:transparent;
  }

  /* Some builds draw the divider on the <li> instead of the <a> */
  nav#site-navigation.main-navigation.toggled .menu > li {
    border:0 !important;
    box-shadow:none !important;
    background-image:none !important;
  }
  nav#site-navigation.main-navigation.toggled .menu > li::before,
  nav#site-navigation.main-navigation.toggled .menu > li::after,
  nav#site-navigation.main-navigation.toggled .menu > li > a::before,
  nav#site-navigation.main-navigation.toggled .menu > li > a::after {
    content:none !important;
    display:none !important;
  }
}

/* Optional: if anything still leaks through, override the theme's accent variables */
:root{
  --wp--preset--color--accent: #FFD24A !important; /* WP core var */
  --global--color-primary: #FFD24A !important;     /* some themes read this */
  --storefront-accent-color: #FFD24A !important;   /* Storefront variants */
}





/* Links / Buttons */
a{ color:var(--jlc-navy); }
a:hover,a:focus{ color:var(--jlc-navy-2); text-decoration:underline; }
button,.button,.wp-element-button,.added_to_cart{
  background:var(--jlc-navy); border-color:var(--jlc-navy); color:#fff;
  font-weight:700; border-radius:10px; padding:.8rem 1.1rem;
  box-shadow:0 6px 18px rgba(11,42,74,.25);
}
button:hover,.button:hover,.wp-element-button:hover{
  background:var(--jlc-navy-2); border-color:var(--jlc-navy-2);
}

/* Inputs */
input[type="text"],input[type="email"],input[type="tel"],
input[type="number"],select,textarea{
  border-radius:8px; border-color:#d6dbe3; padding:.65rem .75rem;
}
label{ font-weight:700; }

/* Product page — remove card frame on single product only */
.single-product .site-main .type-product{
  border:none !important; box-shadow:none !important;
  background:transparent !important; padding:0 !important;
}
/* (We keep boxes for the plugin fields) */
#jlcfdn_household_fields,#jlcfdn_individual_names_wrap,#jlcfdn_senior_names_wrap{
  background:#fff; border-radius:10px; border:1px solid #e6e6ef;
  box-shadow:0 4px 12px rgba(0,0,0,.06); padding:.75rem 1rem;
}
.jlcfdn-donation input[type="number"]{ max-width:220px; }
.jlcfdn-disclosure{ background:var(--jlc-cloud); border-left:6px solid var(--jlc-gold); border-radius:8px; }



/* Footer */
.site-footer{ background:#0a1426; color:#fff; }
#block-12 > div > div:nth-child(2) > p.has-white-color.has-text-color.has-link-color.wp-elements-d911d71aa164ee64ce368f80551f344f > a {
	color: var(--jlc-gold);
}
.site-footer a{ color:#b9d6ff; } .site-footer a:hover{ color:#eaf3ff; }
.site-info{ opacity:.85; }

/* A11y */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{
  outline:3px solid var(--jlc-gold); outline-offset:2px; border-radius:4px;
}

/* Homepage */
/* Hide homepage title */
body.home.page-id-79 .entry-header {
    display: none;
}

/* JLC — Subscription cards: equal height + pinned button + hover lift */
.jlc-sub-cards { gap: 1.5rem; }

/* Each column becomes a flex card */
.jlc-sub-cards > .wp-block-column{
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 280px;                 /* tweak if you want taller */
  border: 1px solid #d0d7de;
  border-radius: 12px;
  background: #fff;
  padding: 24px 24px 22px 28px;      /* a little extra left padding */
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

/* Pin the last block (Buttons or link paragraph) to the bottom of each card */
.jlc-sub-cards > .wp-block-column > *:last-child{ margin-top: auto; }

/* Style the Join Now link as a button (works whether it's a Link or Buttons block) */
.jlc-sub-cards > .wp-block-column a{
  display: inline-block;
  background: #0b5cad;               /* match your brand blue if needed */
  color: #fff !important;
  padding: .6rem 1.1rem;
  border-radius: 8px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
  transition: background .2s ease, box-shadow .2s ease, transform .2s ease;
}

/* Hover/tap lift on the whole card */
.jlc-sub-cards > .wp-block-column:hover,
.jlc-sub-cards > .wp-block-column:focus-within{
  transform: translateY(-4px);
  box-shadow: 0 8px 22px rgba(0,0,0,.10);
  border-color: var(--jlc-navy);
}



/* Button hover (optional) */
.jlc-sub-cards > .wp-block-column a:hover,
.jlc-sub-cards > .wp-block-column a:focus{
  background: #094e92;
  box-shadow: 0 8px 18px rgba(0,0,0,.12);
}

.jlc-sub-cards > .wp-block-column a:hover{
  filter:brightness(1.5);
}




/* Mobile niceties */
@media (max-width: 768px){
  .jlc-sub-cards > .wp-block-column{ text-align: center; }
  .jlc-sub-cards > .wp-block-column a{ width: 100%; text-align: center; }
}