/*
Theme Name: ECA Shop – Kadence Child
Theme URI: https://eastportcivic.org/
Description: Lightweight Kadence child theme for the Eastport Civic Association Products & Events shop.
Author: Eastport Civic Association
Template: kadence
Version: 2.4.0
Text Domain: eca-shop
*/

:root {
  --eca-blue: #005bc2;
  --eca-blue-dark: #004795;
  --eca-orange: #f9b76d;
  --eca-cream: #fff8ef;
  --eca-text: #263238;
  --eca-muted: #667085;
  --eca-border: #dfe5eb;
  --eca-white: #ffffff;
  --eca-header-bg: #ffffff;
  --eca-nav-bg: #005bc2;
  --eca-menu-text: #f9b76d;
  --eca-menu-hover-bg: #005bc2;
  --eca-menu-hover-text: #ffffff;
  --eca-dropdown-bg: #000000;
  --eca-dropdown-text: #f9b76d;
  --eca-dropdown-hover-bg: #111111;
  --eca-dropdown-hover-text: #ffffff;
  --eca-footer-bg: #000000;
  --eca-footer-text: #ffffff;
  --eca-footer-link: #f9b76d;
  --eca-footer-link-hover: #ffffff;
  --eca-menu-font-size: 16px;
  --eca-copyright-font-size: 11px;
  --eca-shadow: 0 6px 22px rgba(17, 36, 64, .18);
}

body { color: var(--eca-text); background: #fff; }
.site { min-height: 100vh; }

/* The child theme supplies its own compact branded header and footer. */
#masthead, #colophon { display: none !important; }

.eca-site-header {
  background: var(--eca-header-bg);
  position: relative;
  z-index: 100;
}

.eca-brand-banner {
  display: block;
  width: 100%;
  background: var(--eca-header-bg);
  text-align: center;
  line-height: 0;
}

.eca-brand-banner img,
.eca-brand-banner .eca-header-logo {
  display: block;
  width: 100%;
  max-width: 1500px;
  height: auto;
  margin: 0 auto;
}

.eca-nav-bar { background: var(--eca-nav-bg); }
.eca-nav-wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
  height: 48px;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.eca-primary-nav { display: flex; align-items: stretch; }
.eca-menu, .eca-menu ul { list-style: none; margin: 0; padding: 0; }
.eca-menu { display: flex; align-items: stretch; gap: 2px; }
.eca-menu > li { position: relative; display: flex; align-items: stretch; }
.eca-menu a {
  color: var(--eca-menu-text);
  font-size: var(--eca-menu-font-size);
  text-decoration: none;
  font-weight: 700;
  line-height: 1.2;
  display: flex;
  align-items: center;
  height: 48px;
  padding: 0 18px;
}
.eca-menu > li > a:hover,
.eca-menu > li > a:focus,
.eca-menu > .current-menu-item > a,
.eca-menu > .current-menu-ancestor > a {
  color: var(--eca-menu-hover-text);
  background: var(--eca-menu-hover-bg);
}

.eca-menu .menu-item-has-children > a::after {
  content: "▾";
  margin-left: 8px;
  font-size: .8em;
}
.eca-menu .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 240px;
  padding: 7px 0;
  background: var(--eca-dropdown-bg);
  box-shadow: var(--eca-shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(7px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
}
.eca-menu li:hover > .sub-menu,
.eca-menu li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.eca-menu .sub-menu li { width: 100%; }
.eca-menu .sub-menu a {
  display: block;
  padding: 11px 16px;
  color: var(--eca-dropdown-text);
  font-weight: 600;
  white-space: nowrap;
}
.eca-menu .sub-menu a:hover,
.eca-menu .sub-menu a:focus,
.eca-menu .sub-menu .current-menu-item > a {
  color: var(--eca-dropdown-hover-text);
  background: var(--eca-dropdown-hover-bg);
}

.eca-header-tools { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.eca-cart-slot:empty { display: none; }
.eca-menu-toggle {
  display: none;
  border: 1px solid rgba(255,255,255,.55);
  background: transparent;
  color: var(--eca-menu-text);
  padding: 9px 13px;
  font-weight: 700;
  cursor: pointer;
}
.eca-menu-toggle:hover, .eca-menu-toggle:focus { color: #fff; border-color: #fff; }

.eca-main { min-height: 52vh; }
.eca-content-shell { width: min(1120px, calc(100% - 40px)); margin: 0 auto; padding: 42px 0 60px; }

/* The static front page is fully controlled by Gutenberg blocks.
   Remove the theme wrapper spacing so the first block can sit directly below the navigation. */
.eca-front-page-content {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}
.eca-front-page-content .eca-page-content,
.eca-front-page-content .eca-entry-content {
  margin: 0;
  padding: 0;
}
.eca-front-page-content .eca-entry-content > *:first-child { margin-top: 0; }
.eca-entry-header { margin-bottom: 28px; }
.eca-entry-title { color: var(--eca-blue-dark); margin: 0; }
.eca-entry-content > *:first-child { margin-top: 0; }
.eca-hero { padding: clamp(48px, 7vw, 88px) 24px; background: linear-gradient(180deg, var(--eca-cream), #fff); text-align: center; }
.eca-hero-inner { width: min(860px, 100%); margin: 0 auto; }
.eca-eyebrow { color: var(--eca-blue); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.eca-hero h1 { color: var(--eca-blue-dark); font-size: clamp(2.1rem, 5vw, 4rem); margin: .25em 0 .2em; }
.eca-hero p { font-size: clamp(1.05rem, 2vw, 1.28rem); color: var(--eca-muted); margin: 0 auto; max-width: 720px; }
.eca-section { padding: 56px 0; }
.eca-section-title { color: var(--eca-blue-dark); text-align: center; margin: 0 0 28px; }
.eca-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.eca-card { background: #fff; border: 1px solid var(--eca-border); border-radius: 12px; padding: 28px; box-shadow: 0 4px 16px rgba(17, 36, 64, .06); }
.eca-card h2, .eca-card h3 { color: var(--eca-blue-dark); margin-top: 0; }
button, .button, .wp-element-button, input[type="submit"], .eca-button { border-radius: 5px; }
.eca-button { display: inline-block; padding: 12px 20px; background: var(--eca-blue); color: #fff !important; text-decoration: none; font-weight: 700; }
.eca-button:hover, .eca-button:focus { background: var(--eca-blue-dark); }

.eca-site-footer { background: var(--eca-footer-bg); color: var(--eca-footer-text); padding: 28px 24px 20px; }
.eca-footer-inner { max-width: 1120px; margin: 0 auto; }
.eca-footer-title { margin: 0 0 12px; color: var(--eca-footer-text); font-size: 1.15rem; }
.eca-footer-menu { display: flex; flex-wrap: wrap; gap: 8px 20px; list-style: none; margin: 0 0 18px; padding: 0; }
.eca-footer-menu a { color: var(--eca-footer-link); text-decoration: none; }
.eca-footer-menu a:hover, .eca-footer-menu a:focus { color: var(--eca-footer-link-hover); text-decoration: underline; }
.eca-copyright { border-top: 1px solid rgba(255,255,255,.18); padding-top: 15px; color: var(--eca-footer-text); font-size: var(--eca-copyright-font-size); }

@media (max-width: 780px) {
  .eca-nav-wrap { height: auto; min-height: 48px; padding: 7px 16px; flex-wrap: wrap; }
  .eca-menu-toggle { display: inline-block; }
  .eca-primary-nav { display: none; width: 100%; order: 3; }
  .eca-primary-nav.is-open { display: block; }
  .eca-menu { display: block; width: 100%; padding: 5px 0 10px; }
  .eca-menu > li { display: block; }
  .eca-menu a { width: 100%; }
  .eca-menu .sub-menu { position: static; min-width: 0; margin: 0 0 0 18px; box-shadow: none; opacity: 1; visibility: visible; transform: none; padding-top: 0; }
  .eca-card-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}