/*
Theme Name: Electric-Joe Revamp (Theme Only)
Theme URI:  https://electric-joe.co.uk/
Author:     Joe Cochrane
Author URI: https://electric-joe.co.uk/
Description: Presentation-only theme. Reads canonical data from the Electric-Joe plugin.
Version:    2.7
License:    GNU General Public License v2 or later
Text Domain: electric-joe-revamp
*/

/* CSS variables (overridden by Customizer inline CSS) */
:root{
  --brand-primary: #0a6fbf;
  --brand-accent: #ffb400;
  --header-bg: #0a6fbf;
  --header-text: #ffffff;
  --header-halo: rgba(255,255,255,0.12);
  --body-bg: #ffffff;
  --footer-bg: #111111;
  --footer-text: #ffffff;
  --menu-bg: rgba(255,255,255,0.08);
  --glass-border: rgba(255,255,255,0.18);
}

/* Basic layout */
html,body{height:100%;margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;}
body{background:var(--body-bg);color:var(--text,#222);line-height:1.5;}
.container{max-width:1200px;margin:0 auto;padding:0 20px;}

/* Header */
.site-header{background:var(--header-bg);color:var(--header-text);padding:18px 20px;position:relative;box-shadow:0 6px 18px var(--header-halo);backdrop-filter: blur(4px);}
.site-branding{display:flex;align-items:center;gap:16px;}
.site-logo img{max-height:64px;width:auto;display:block;}
.site-title{font-weight:700;margin:0;font-size:1.25rem;color:var(--header-text);}
.site-tagline{font-size:0.9rem;color:rgba(255,255,255,0.9);}
.site-contact{margin-left:auto;text-align:right;font-size:0.95rem;line-height:1.2;}
.site-contact a{color:var(--header-text);text-decoration:none;}

/* Navigation */
.main-navigation{display:flex;gap:12px;align-items:center;}
.main-navigation ul{list-style:none;margin:0;padding:0;display:flex;gap:8px;align-items:center;}
.main-navigation li{position:relative;}
.main-navigation a{display:inline-block;padding:10px 14px;border-radius:8px;color:var(--header-text);text-decoration:none;background:var(--menu-bg);border:1px solid var(--glass-border);backdrop-filter: blur(6px);transition:transform .08s,background .15s;}
.main-navigation a:hover{transform:translateY(-2px);background:rgba(255,255,255,0.18);}

/* Submenu */
.main-navigation ul ul{display:none;position:absolute;top:100%;left:0;background:rgba(0,0,0,0.6);padding:8px;border-radius:8px;min-width:200px;z-index:999;}
.main-navigation li.submenu-open > ul{display:block;}
.main-navigation ul ul li a{background:transparent;border:none;padding:8px 10px;color:#fff;display:block;}

/* Mobile */
.menu-toggle{display:none;background:transparent;border:none;color:var(--header-text);font-size:1rem;padding:8px;}
@media (max-width:900px){
  .main-navigation ul{flex-direction:column;background:transparent;padding:8px;display:none;}
  .main-navigation.open ul{display:flex;}
  .site-contact{display:block;margin-top:12px;text-align:left;}
  .menu-toggle{display:block;}
  .site-branding{flex-direction:column;align-items:flex-start;gap:8px;}
}

/* Pre-footer (three-column area) */
.pre-footer-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:20px; padding:28px 0; background:rgba(0,0,0,0.03); color:var(--footer-text); }
.pre-footer-grid h4{ margin:0 0 8px 0; color:var(--header-text); }
.pre-footer-grid ul{ list-style:none; padding:0; margin:0; line-height:1.8; }
@media (max-width:800px){ .pre-footer-grid{ grid-template-columns:1fr; } }

/* Footer */
.site-footer{padding:20px;background:var(--footer-bg);color:var(--footer-text);text-align:center;}

/* Social icons */
.social-links{display:flex;gap:12px;align-items:center;}
.social-links a{color:var(--header-text);display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:6px;background:rgba(255,255,255,0.06);text-decoration:none;}
.social-links svg{display:block;}

/* Small overrides */
.home-hero{background:linear-gradient(90deg,var(--brand-primary),rgba(10,111,191,0.6));color:#fff;padding:40px;border-radius:8px;margin-bottom:20px;}
.post-excerpt{margin-bottom:28px;padding:18px;background:rgba(0,0,0,0.02);border-radius:8px;}
.ejr-contact-error{font-weight:600;}

/* ---------- Additional merged CSS (hero, submenu, contact, accessibility) ---------- */
.home-hero h1 { margin: 0 0 8px 0; font-size: 2rem; }
.home-hero p  { margin: 0; font-size: 1.05rem; opacity: 0.95; }
.contact-phone a,
.contact-email a { display: inline-block; color: inherit; text-decoration: none; }
.ejr-contact-error { font-weight: 600; display: none; color: #ffb3b3; margin-top: 8px; }
.ejr-contact-error.visible { display: block; }
.ejr-word-count { margin-top: 6px; font-size: 0.9rem; color: #666; }
.ejr-word-count.ejr-word-count-ok { color: #2b8a3e; font-weight: 600; }

/* Prevent hero/header from clipping dropdowns */
.site-header,
.home-hero,
.wp-block-cover,
.wp-block-cover-image {
  overflow: visible !important;
  z-index: 10000;
}

/* Anchor positioning for absolute submenus */
.main-navigation,
.main-navigation .menu,
.main-navigation li {
  position: relative;
}

/* Submenu base styles */
.main-navigation ul ul {
  display: none !important;
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  margin-top: 0 !important;
  z-index: 10001 !important;
  background: rgba(0,0,0,0.6) !important;
  padding: 8px !important;
  border-radius: 8px !important;
  min-width: 220px !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.12) !important;
  pointer-events: auto !important;
}

/* Show on hover and keyboard focus */
.main-navigation li:hover > ul,
.main-navigation li:focus-within > ul {
  display: block !important;
}

/* Mobile: show when JS toggles open class */
.main-navigation.open ul,
.main-navigation.open ul ul {
  display: flex !important;
  flex-direction: column !important;
}

/* Mobile submenu open class */
.main-navigation li.submenu-open > ul { display: block !important; }

/* Visual cue for expanded parent links */
.main-navigation li.menu-item-has-children > a[aria-expanded="true"] {
  background: rgba(255,255,255,0.12);
}

/* Accessibility focus styles */
.main-navigation a:focus,
.menu-toggle:focus,
.contact-phone a:focus,
.contact-email a:focus {
  outline: 3px solid rgba(255,180,0,0.25);
  outline-offset: 3px;
}

/* Responsive tweaks */
@media (max-width: 900px) {
  .main-navigation ul { flex-direction: column; background: transparent; padding: 8px; display: none; }
  .main-navigation.open ul { display: flex; }
  .site-contact { display: block; margin-top: 12px; text-align: left; }
  .menu-toggle { display: block; }
  .site-branding { flex-direction: column; align-items: flex-start; gap: 8px; }
  .home-hero h1 { font-size: 1.6rem; }
}

/* Footer menu horizontal layout */
.footer-navigation .footer-menu {
  display: flex !important;
  flex-wrap: wrap;
  gap: 18px;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0 0 12px 0;
  list-style: none;
}
.footer-navigation .footer-menu li { display: inline-block; margin: 0; }
.footer-navigation .footer-menu a {
  display: inline-block;
  padding: 8px 12px;
  color: var(--footer-text);
  text-decoration: none;
  border-radius: 6px;
  background: transparent;
  transition: background .12s, transform .08s;
}
.footer-navigation .footer-menu a:hover,
.footer-navigation .footer-menu a:focus {
  background: rgba(255,255,255,0.04);
  transform: translateY(-2px);
  outline: none;
}