/* ==========================================================================
   SEO SADHU  -  GLOBAL HEADER & FOOTER
   Loaded site-wide by the Selo child theme.

   Every class is prefixed .ssc- so this cannot collide with the page
   designs (style.css uses .site-header/.site-footer, the service page
   is scoped under .ssp) or with Selo, Bootstrap or Elementor.
   ========================================================================== */

.ssc-header,
.ssc-footer {
  --ssc-navy: #0F172A;
  --ssc-navy-2: #16243C;
  --ssc-orange: #F97316;
  --ssc-orange-dark: #e0630f;
  --ssc-cream: #f5efe4;
  --ssc-white: #ffffff;
  --ssc-muted: #a9b6c9;
  --ssc-line: #e2d9c8;
  --ssc-line-dark: rgba(255, 255, 255, 0.09);

  --ssc-font: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ssc-max: 1240px;
  --ssc-gutter: 28px;

  --ssc-text-xs: 11.5px;
  --ssc-text-s: 13px;
  --ssc-text-m: 14.5px;
  --ssc-text-l: 17px;
  --ssc-weight-medium: 500;
  --ssc-weight-semibold: 600;
  --ssc-weight-bold: 700;

  --ssc-logo-h: 50px;
  --ssc-radius-s: 9px;
  --ssc-radius-pill: 32px;
  --ssc-social: 38px;
  --ssc-icon: 18px;
  --ssc-z: 90;

  --ssc-space-1: 4px;
  --ssc-space-2: 8px;
  --ssc-space-3: 12px;
  --ssc-space-4: 16px;
  --ssc-space-5: 22px;
  --ssc-space-6: 30px;
  --ssc-space-7: 40px;
  --ssc-space-8: 56px;

  font-family: var(--ssc-font);
  box-sizing: border-box;
}

.ssc-header *,
.ssc-footer * { box-sizing: border-box; }

/* ==========================================================================
   HEADER
   ========================================================================== */

.ssc-header {
  position: sticky;
  top: 0;
  z-index: var(--ssc-z);
  background: rgba(245, 239, 228, 0.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: box-shadow .25s ease, background .25s ease;
}

.ssc-header.is-stuck {
  background: rgba(245, 239, 228, 0.98);
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.09);
}

.ssc-inner {
  display: flex;
  align-items: center;
  gap: var(--ssc-space-5);
  max-width: var(--ssc-max);
  margin: 0 auto;
  padding: var(--ssc-space-3) var(--ssc-gutter);
}

.ssc-brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
}

.ssc-brand img {
  display: block;
  height: var(--ssc-logo-h);
  width: auto;
  max-width: none;
}

.ssc-brand-text {
  font-size: var(--ssc-text-l);
  font-weight: var(--ssc-weight-bold);
  color: var(--ssc-navy);
}

/* Desktop navigation */
.ssc-nav {
  flex-grow: 1;
  display: flex;
  justify-content: center;
}

.ssc-nav ul {
  display: flex;
  align-items: center;
  gap: var(--ssc-space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ssc-nav li { list-style: none; margin: 0; padding: 0; }

.ssc-nav a {
  display: block;
  padding: var(--ssc-space-1) 0;
  font-size: var(--ssc-text-m);
  font-weight: var(--ssc-weight-medium);
  color: var(--ssc-navy);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color .18s ease, border-color .18s ease;
}

.ssc-nav a:hover { color: var(--ssc-orange); border-bottom-color: var(--ssc-orange); }

.ssc-nav .current-menu-item > a,
.ssc-nav .current_page_item > a,
.ssc-nav .current-menu-ancestor > a { color: var(--ssc-orange); }

/* Dropdown submenus */
.ssc-nav li { position: relative; }

.ssc-nav .menu-item-has-children > a::after {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-left: 7px;
  vertical-align: 2px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}

.ssc-nav ul ul {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 250px;
  padding: var(--ssc-space-2);
  border-radius: 14px;
  background: var(--ssc-white);
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.14);
  border: 1px solid var(--ssc-line);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  z-index: 2;
}

.ssc-nav li:hover > ul,
.ssc-nav li:focus-within > ul {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.ssc-nav ul ul li { width: 100%; }

.ssc-nav ul ul a {
  padding: 10px 14px;
  border-radius: 9px;
  border-bottom: 0;
  font-size: var(--ssc-text-s);
  font-weight: var(--ssc-weight-medium);
  white-space: nowrap;
}

.ssc-nav ul ul a:hover {
  background: var(--ssc-cream);
  color: var(--ssc-orange);
  border-bottom: 0;
}

/* Mobile: children render as an indented list */
.ssc-mobile ul ul {
  margin: 0 0 var(--ssc-space-2) var(--ssc-space-4);
  border-left: 2px solid var(--ssc-line);
}

.ssc-mobile ul ul a {
  padding: 10px 0 10px var(--ssc-space-4);
  border-bottom: 0;
  font-size: var(--ssc-text-s);
  color: #46546b;
}

/* Call to action */
.ssc-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--ssc-space-2);
  flex-shrink: 0;
  padding: 13px 27px;
  border-radius: var(--ssc-radius-pill);
  background: var(--ssc-orange);
  color: var(--ssc-white);
  font-size: var(--ssc-text-m);
  font-weight: var(--ssc-weight-semibold);
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 8px 20px rgba(249, 115, 22, 0.28);
  transition: background .18s ease, transform .18s ease;
}

.ssc-cta:hover { background: var(--ssc-orange-dark); transform: translateY(-2px); color: var(--ssc-white); }
.ssc-cta svg { width: 15px; height: 15px; display: block; }

/* Mobile toggle */
.ssc-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  flex-shrink: 0;
}

.ssc-burger span {
  display: block;
  width: 24px;
  height: 2px;
  margin: 0 auto;
  border-radius: 2px;
  background: var(--ssc-navy);
  transition: transform .25s ease, opacity .2s ease;
}

.ssc-burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.ssc-burger.is-open span:nth-child(2) { opacity: 0; }
.ssc-burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile panel */
.ssc-mobile {
  display: none;
  flex-direction: column;
  max-height: 0;
  overflow: hidden;
  padding: 0 var(--ssc-gutter);
  background: var(--ssc-cream);
  transition: max-height .35s ease, padding .35s ease;
}

.ssc-mobile.is-open { max-height: 560px; padding: var(--ssc-space-2) var(--ssc-gutter) var(--ssc-space-6); }

.ssc-mobile ul { margin: 0; padding: 0; list-style: none; }
.ssc-mobile li { list-style: none; }

.ssc-mobile a {
  display: block;
  padding: var(--ssc-space-3) 0;
  border-bottom: 1px solid var(--ssc-line);
  font-size: var(--ssc-text-m);
  font-weight: var(--ssc-weight-medium);
  color: var(--ssc-navy);
  text-decoration: none;
}

.ssc-mobile .ssc-cta {
  margin-top: var(--ssc-space-4);
  justify-content: center;
  border-bottom: 0;
  color: var(--ssc-white);
}

@media (max-width: 1040px) {
  .ssc-nav { display: none; }
  .ssc-inner > .ssc-cta { display: none; }
  .ssc-burger { display: flex; }
  .ssc-mobile { display: flex; }
  .ssc-inner { justify-content: space-between; }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

.ssc-footer {
  background: var(--ssc-navy);
  color: var(--ssc-muted);
  font-size: var(--ssc-text-s);
  line-height: 1.75;
}

.ssc-footer-inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ssc-space-7);
  max-width: var(--ssc-max);
  margin: 0 auto;
  padding: var(--ssc-space-8) var(--ssc-gutter) var(--ssc-space-6);
}

.ssc-col { display: flex; flex-direction: column; }
.ssc-col-services { flex: 1 1 230px; }
.ssc-col-industries { flex: 1 1 340px; }
.ssc-col-contact { flex: 1 1 320px; }

.ssc-footer h2 {
  margin: 0 0 var(--ssc-space-5);
  padding: 0;
  font-family: var(--ssc-font);
  font-size: var(--ssc-text-l);
  font-weight: var(--ssc-weight-bold);
  line-height: 1.3;
  color: var(--ssc-white);
  letter-spacing: 0;
  text-transform: none;
}

.ssc-links { display: flex; flex-direction: column; gap: var(--ssc-space-3); margin: 0; padding: 0; list-style: none; }
.ssc-links li { list-style: none; margin: 0; }

.ssc-links a,
.ssc-footer a {
  color: var(--ssc-muted);
  text-decoration: none;
  transition: color .18s ease;
}

.ssc-links a:hover,
.ssc-footer a:hover { color: var(--ssc-orange); }

.ssc-split { display: flex; gap: var(--ssc-space-7); }
.ssc-split .ssc-links { flex: 1 1 0; min-width: 0; }

/* Contact rows */
.ssc-contact { display: flex; flex-direction: column; gap: var(--ssc-space-5); }

.ssc-row { display: flex; align-items: flex-start; gap: var(--ssc-space-3); }

.ssc-row-icon {
  flex: 0 0 auto;
  width: var(--ssc-icon);
  height: var(--ssc-icon);
  margin-top: 3px;
  color: var(--ssc-orange);
}

.ssc-row-icon svg { width: 100%; height: 100%; display: block; }

.ssc-row-text { display: flex; flex-direction: column; line-height: 1.5; }
.ssc-row-text b { color: var(--ssc-white); font-weight: var(--ssc-weight-bold); font-size: var(--ssc-text-m); }
.ssc-row-text span { font-size: var(--ssc-text-xs); color: var(--ssc-muted); }

/* Socials */
.ssc-socials { display: flex; flex-wrap: wrap; gap: var(--ssc-space-2); margin-top: var(--ssc-space-2); }

.ssc-socials a {
  display: grid;
  place-items: center;
  width: var(--ssc-social);
  height: var(--ssc-social);
  border-radius: var(--ssc-radius-s);
  background: var(--ssc-navy-2);
  transition: background .18s ease, transform .18s ease;
}

.ssc-socials a:hover { background: #22314e; transform: translateY(-2px); }
.ssc-socials svg { width: 17px; height: 17px; display: block; }

/* Bottom bar */
.ssc-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ssc-space-3) var(--ssc-space-6);
  max-width: var(--ssc-max);
  margin: 0 auto;
  padding: var(--ssc-space-5) var(--ssc-gutter) var(--ssc-space-6);
  border-top: 1px solid var(--ssc-line-dark);
  font-size: var(--ssc-text-s);
}

.ssc-bottom p { margin: 0; }
.ssc-bottom-left { flex-grow: 1; }
.ssc-bottom-right { color: var(--ssc-muted); }

@media (max-width: 860px) {
  .ssc-footer-inner { gap: var(--ssc-space-6); padding-top: var(--ssc-space-7); }
  .ssc-col-services,
  .ssc-col-industries,
  .ssc-col-contact { flex: 1 1 100%; }
  .ssc-bottom { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 520px) {
  .ssc-split { flex-direction: column; gap: var(--ssc-space-3); }
}

/* ==========================================================================
   Selo's own header and footer are replaced by the global ones above.
   They are hidden rather than removed because this plugin can only write
   PHP into its sandbox directory, not into the theme, so header.php and
   footer.php cannot be overridden. Selo's page-title banner (#main-header)
   is deliberately left visible: blog and single post views rely on it.
   ========================================================================== */

#pr-nav,
#site-footer { display: none !important; }