/* =============================================================================
   SEQLD Electrical — brand layer
   This is the design source of truth. Fill the tokens from design/tokens.md
   once the reference site is confirmed, then re-run deploy/02-theme-plugins.sh.
   ============================================================================= */

:root {
  /* --- Colour palette — from SEQLD logo (navy + light blue + grey) -------- */
  --brand-primary:    #232a7a;   /* deep navy — logo ring/text, headings, nav, hero */
  --brand-primary-2:  #3f8ed0;   /* link blue */
  --brand-accent:     #4f9fd9;   /* light/cornflower blue — logo windows, buttons */
  --brand-ink:        #14233b;   /* body text */
  --brand-muted:      #5d6b80;   /* secondary text */
  --brand-line:       #e3e8f0;   /* borders */
  --brand-paper:      #f4f7fb;   /* section backgrounds */
  --brand-white:      #ffffff;

  /* --- Type ------------------------------------------------------------- */
  --brand-font: "Inter", "Segoe UI", system-ui, sans-serif;
}

/* --- Global -------------------------------------------------------------- */
body { color: var(--brand-ink); font-family: var(--brand-font); }
a { color: var(--brand-primary-2); }
h1, h2, h3, h4 { color: var(--brand-primary); letter-spacing: -0.01em; }

/* --- Buttons (context-aware: navy on light sections, blue on dark hero) --- */
/* default SOLID button — navy, on light/white sections */
.gb-button,
.wp-block-button__link {
  background: var(--brand-primary) !important;
  color: #fff !important;
  border-radius: 8px;
  font-weight: 700;
}
.gb-button:hover,
.wp-block-button__link:hover { background: var(--brand-primary-2) !important; }

/* default OUTLINE button — navy border/text, on light sections */
.is-style-outline .wp-block-button__link {
  background: transparent !important; color: var(--brand-primary) !important;
  box-shadow: inset 0 0 0 2px var(--brand-primary);
}

/* HERO is dark navy: solid = light blue, outline = white */
.seqld-hero .wp-block-button:not(.is-style-outline) .wp-block-button__link {
  background: var(--brand-accent) !important; color: var(--brand-ink) !important;
}
.seqld-hero .is-style-outline .wp-block-button__link {
  color: #fff !important; box-shadow: inset 0 0 0 2px rgba(255,255,255,0.85);
}

/* --- Header / nav --------------------------------------------------------- */
.main-navigation,
.site-header { background: var(--brand-white); }
.main-navigation .main-nav ul li a { color: var(--brand-ink); font-weight: 600; }
.main-navigation .main-nav ul li a:hover { color: var(--brand-primary-2); }

/* constrain the (circular) logo + hide the text title — logo already has the name */
.site-logo img, .header-image, .site-header img { max-height: 76px; width: auto; }
.site-branding .main-title, .site-branding .site-description { display: none; }

/* hide GeneratePress' default page title — every page seed has its own in-content H1 */
.page .entry-header { display: none; }

/* =============================================================================
   Footer — Kairos-style 4 columns (rendered by mu-plugins/seqld-footer.php)
   ============================================================================= */
.site-info { background: var(--brand-paper); color: var(--brand-ink); border-top: 4px solid var(--brand-accent); padding: 0; }
.seqld-footer {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 32px;
  max-width: 1100px; margin: 0 auto; padding: 50px 30px 24px; text-align: left;
}
.site-info .inside-site-info { max-width: 1100px; margin: 0 auto; padding-left: 30px; padding-right: 30px; }
.seqld-footer-col h4 { color: var(--brand-primary); font-size: 17px; margin: 0 0 14px; }
.seqld-footer-col ul { list-style: none; padding: 0; margin: 0; }
.seqld-footer-col li { margin-bottom: 8px; }
.seqld-footer a { color: var(--brand-ink); text-decoration: none; }
.seqld-footer a:hover { color: var(--brand-primary-2); }
.seqld-footer-logo { max-width: 150px; height: auto; margin-bottom: 14px; display: block; }
.seqld-footer-about p { font-size: 14px; line-height: 1.7; margin: 0 0 12px; }
.seqld-footer-lic { color: var(--brand-muted); font-size: 13px; }
.seqld-footer-badges { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.seqld-fbadge {
  border: 1px solid var(--brand-line); background: #fff; border-radius: 99px;
  padding: 7px 15px; font-size: 13px; font-weight: 600; color: var(--brand-muted);
}
.site-info .inside-site-info { padding-top: 14px; padding-bottom: 14px; border-top: 1px solid var(--brand-line); font-size: 12px; color: var(--brand-muted); }
@media (max-width: 768px) {
  .seqld-footer { grid-template-columns: 1fr; gap: 30px; padding: 36px 22px 20px; }
  .seqld-footer-badges { align-items: flex-start; }
  .seqld-footer-logo { max-width: 130px; }
}

/* --- Header click-to-call button (top-right, mu-plugins/seqld-callbtn.php) */
.seqld-navcall {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  background: var(--brand-accent); color: #fff !important; font-weight: 800;
  padding: 11px 20px; border-radius: 8px; line-height: 1; text-decoration: none;
  font-size: 16px;
}
.seqld-navcall:hover { background: var(--brand-primary); color: #fff !important; }
.seqld-navcall-ico { font-size: 17px; }
@media (max-width: 768px) { .seqld-navcall { padding: 9px 14px; font-size: 14px; } }

/* --- Tap-to-call bar (mobile) -------------------------------------------- */
.seqld-callbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 999;
  display: none; text-align: center; padding: 14px;
  background: var(--brand-accent); color: var(--brand-ink);
  font-weight: 800; text-decoration: none;
}
@media (max-width: 768px) {
  .seqld-callbar { display: block; }
  body { padding-bottom: 56px; }
}

/* --- Trust badges (licence / ABN / ARCtick) ------------------------------ */
.seqld-badges { display: flex; flex-wrap: wrap; gap: 10px; }
.seqld-badge {
  border: 1px solid var(--brand-line); border-radius: 99px;
  padding: 6px 14px; font-size: 13px; font-weight: 600; color: var(--brand-muted);
  background: var(--brand-paper);
}

/* --- Section helper ------------------------------------------------------- */
.seqld-section-paper { background: var(--brand-paper); padding: 56px 20px; margin: 0; }

/* =============================================================================
   Home page — Kairos-style section flow (SEQLD colours)
   ============================================================================= */
.seqld-eyebrow {
  text-transform: uppercase; letter-spacing: 0.12em; font-size: 13px;
  font-weight: 700; color: var(--brand-accent); margin-bottom: 6px;
}

/* --- Hero ----------------------------------------------------------------- */
.seqld-hero {
  background:
    linear-gradient(160deg, rgba(11,59,140,0.92), rgba(20,35,59,0.92)),
    var(--brand-primary);
  color: #fff; padding: 72px 24px 60px; margin: 0;
  border-radius: 0;
}
.seqld-hero .seqld-eyebrow { color: var(--brand-accent); }
.seqld-hero-title { color: #fff; font-size: clamp(30px, 5vw, 52px); line-height: 1.08; max-width: 18ch; }
.seqld-hero-sub { color: rgba(255,255,255,0.88); font-size: 18px; max-width: 56ch; margin-top: 14px; }
.seqld-hero .wp-block-buttons { margin-top: 24px; }

/* audience strip */
.seqld-audience { margin-top: 40px; gap: 16px; }
.seqld-aud-card {
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.18);
  border-radius: 12px; padding: 18px 20px; height: 100%;
  transition: background .15s ease, transform .15s ease;
}
.seqld-aud-card:hover { background: rgba(255,255,255,0.13); transform: translateY(-2px); }
.seqld-aud-card h3 { color: #fff; font-size: 18px; margin-bottom: 4px; }
.seqld-aud-card p { color: rgba(255,255,255,0.82); font-size: 14px; }

/* --- Service pillars ------------------------------------------------------ */
.seqld-pillars { margin: 56px auto; gap: 20px; }
.seqld-pillar {
  border: 1px solid var(--brand-line); border-radius: 14px; padding: 26px 24px;
  background: #fff; height: 100%; box-shadow: 0 6px 20px rgba(15,27,45,0.05);
}
.seqld-pillar h3 { font-size: 21px; margin-bottom: 8px; }
.seqld-pillar .wp-block-buttons { margin-top: 14px; }

/* --- 24/7 emergency band -------------------------------------------------- */
.seqld-emergency {
  background: var(--brand-accent); color: var(--brand-ink);
  padding: 48px 24px; margin: 0; border-radius: 0;
}
.seqld-emergency h2 { color: var(--brand-ink) !important; }
.seqld-emergency p { color: var(--brand-ink) !important; opacity: 0.85; }
.seqld-emergency .seqld-btn-call .wp-block-button__link {
  background: var(--brand-primary); color: #fff;
}

/* --- What makes us unique ------------------------------------------------- */
.seqld-unique { margin-top: 32px; gap: 18px; }
.seqld-unique-item {
  text-align: center; padding: 24px 18px; border-radius: 12px;
  background: var(--brand-paper);
}
.seqld-unique-item h3 { font-size: 19px; margin-bottom: 6px; }

/* --- Reviews -------------------------------------------------------------- */
.seqld-review {
  border-left: 4px solid var(--brand-accent); background: #fff;
  padding: 18px 22px; border-radius: 0 12px 12px 0; margin: 0;
  box-shadow: 0 6px 20px rgba(15,27,45,0.05);
}
.seqld-review cite { color: var(--brand-muted); font-size: 13px; }
.seqld-stars { color: #f5a623; letter-spacing: 2px; font-size: 16px; margin-bottom: 6px; }
.seqld-review-by { font-size: 13px; color: var(--brand-muted); margin-top: 10px; }
.seqld-review-by strong { color: var(--brand-ink); }

/* --- Callback CTA --------------------------------------------------------- */
.seqld-cta { padding: 56px 24px; text-align: center; }

/* --- Services page: tile grid -------------------------------------------- */
.seqld-svc-grid { margin: 22px auto; gap: 20px; }
.seqld-svc-tile {
  border: 1px solid var(--brand-line); border-radius: 14px; padding: 24px;
  background: #fff; height: 100%; box-shadow: 0 6px 20px rgba(15,27,45,0.05);
  border-top: 3px solid var(--brand-accent);
}
.seqld-svc-tile h3 { font-size: 19px; margin-bottom: 8px; color: var(--brand-primary); }

/* --- Service areas: suburb lists ----------------------------------------- */
.seqld-suburbs { list-style: none; padding: 0; margin: 8px 0 0; }
.seqld-suburbs li {
  padding: 5px 0 5px 20px; position: relative; font-size: 14px; color: var(--brand-ink-2, var(--brand-muted));
}
.seqld-suburbs li::before { content: "▸"; color: var(--brand-accent); position: absolute; left: 0; }

/* --- ARCtick footer logo ------------------------------------------------- */
.seqld-fbadge-logo { display: block; }
.seqld-fbadge-logo img { max-width: 160px; height: auto; }

/* --- Audience strip bar (mu-plugins/seqld-strip.php, site-wide) ---------- */
.seqld-strip { background: var(--brand-primary); }
.seqld-strip-inner {
  max-width: 1100px; margin: 0 auto; display: flex; flex-wrap: wrap;
  justify-content: center; gap: 8px 44px; padding: 13px 20px;
}
.seqld-strip-inner span {
  color: #fff; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; font-size: 14px;
}
@media (max-width: 768px) { .seqld-strip-inner { gap: 6px 20px; font-size: 12px; } }

/* --- Two-column hero (text + Request-a-Call card) ------------------------ */
.seqld-hero-cols { gap: 44px; align-items: center; }
.seqld-hero-card { background: #fff; border-radius: 14px; padding: 26px 24px; box-shadow: 0 20px 55px rgba(0,0,0,0.28); }
.seqld-hero-card-title { color: var(--brand-primary); font-size: 24px; margin-bottom: 4px; }
.seqld-hero-card p { color: var(--brand-muted); font-size: 14px; margin-bottom: 14px; }
.seqld-hero-card .wp-block-button__link { width: 100%; }
@media (max-width: 768px) { .seqld-hero-cols { gap: 24px; } }

/* --- Standalone form card (Get Quote) ------------------------------------ */
.seqld-form-card { background: #fff; border: 1px solid var(--brand-line); border-radius: 14px; padding: 26px; box-shadow: 0 10px 30px rgba(15,27,45,0.06); margin-top: 18px; }

/* --- Call button emphasis ------------------------------------------------- */
.seqld-btn-call .wp-block-button__link { font-size: 17px; padding: 14px 26px; }

/* full-bleed bands rely on Gutenberg .alignfull (theme-supported) — no viewport hack.
   prevent any accidental horizontal scroll */
html, body { overflow-x: hidden; }