/*
Theme Name: Electric-Joe Revamp
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:    3.4
License:    GNU General Public License v2 or later
Text Domain: electric-joe-revamp
*/

/* Default CSS variables (overridden by Customizer inline CSS) */
:root{
  --brand-primary: #0a6fbf;
  --brand-accent: #ffb400;
  --header-bg: #0a6fbf;
  --header-text: #ffffff;
  --menu-bg: rgba(255,255,255,0.08);
  --body-bg: #ffffff;
  --footer-bg: #111111;
  --footer-text: #ffffff;
  --prefooter-bg: #111111;
  --prefooter-text: #ffffff;
  --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 rgba(0,0,0,0.08);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 base (no !important) */
.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: 220px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
  z-index: 10001;
}

/* Show on hover/focus for desktop */
.main-navigation li:hover > ul,
.main-navigation li:focus-within > ul {
  display: block;
}

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

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

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

/* Submenu toggle button */
.submenu-toggle {
  background: transparent;
  border: none;
  color: inherit;
  font-size: 0.95rem;
  padding: 8px 6px;
  margin-left: 6px;
  cursor: pointer;
  border-radius: 6px;
}
.submenu-toggle:focus {
  outline: 3px solid rgba(255,180,0,0.25);
  outline-offset: 3px;
}

/* 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:var(--prefooter-bg); color:var(--prefooter-text); }
.pre-footer-grid h4{ margin:0 0 8px 0; color:var(--prefooter-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(--footer-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;}

/* 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;
}

/* 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;
}

/* Ensure dropdowns are not clipped and are tappable */
.site-header,
.home-hero,
.wp-block-cover,
.wp-block-cover-image { overflow: visible !important; z-index: 9999; pointer-events: auto; }

/* Ensure submenus sit above everything */
.main-navigation ul ul { z-index: 10020; }

/* Mobile overlay behavior so menu sits above page and links are full width */
@media (max-width:900px){
  .main-navigation.open { position: absolute; top: 100%; left: 0; right: 0; background: var(--header-bg); padding: 12px 16px; z-index: 10010; }
  .main-navigation ul li a, .main-navigation ul li .submenu-toggle { display: inline-block; width: 100%; text-align: left; box-sizing: border-box; }
  .main-navigation ul ul { position: static; background: transparent; box-shadow: none; padding-left: 12px; }
}