/* ============================================================
   shared.css — Zoho 4-Color Brand System
   Exact colors from the Zoho logo:
     Red    #E42527  (Z)
     Green  #3DA638  (O)
     Blue   #1565C0  (H)
     Yellow #F6A800  (O)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ================================================================
   ZOHO 4-COLOR DESIGN TOKENS
   ================================================================ */
:root {
  /* ── Zoho Logo Colors (exact) ── */
  --zr: #E42527;   /* Zoho Red    (Z) */
  --zg: #3DA638;   /* Zoho Green  (O) */
  --zb: #1565C0;   /* Zoho Blue   (H) */
  --zy: #F6A800;   /* Zoho Yellow (O) */

  /* ── Hover / dark variants ── */
  --zr-dk: #C41E20;
  --zg-dk: #2D8A28;
  --zb-dk: #0D4A9A;
  --zy-dk: #D48800;

  /* ── Soft tint backgrounds ── */
  --zr-bg: #FEF2F2;
  --zg-bg: #F0FDF4;
  --zb-bg: #EFF6FF;
  --zy-bg: #FFFBEB;

  /* ── Neutral structure ── */
  --dark:    #0F0F0F;   /* Near-black for nav */
  --dark2:   #1A1A1A;   /* Dark section bg */
  --dark3:   #262626;   /* Slightly lighter dark */
  --z-text:  #1A1A1A;   /* Heading text */
  --z-body:  #3D3D3D;   /* Body text */
  --z-muted: #7A7A7A;   /* Muted text */
  --z-border:#E2E2E2;   /* Default border */
  --z-bg:    #F5F5F5;   /* Page background */
  --z-white: #FFFFFF;

  /* Legacy catalog vars — remapped to Zoho palette */
  --navy:  #0F0F0F;
  --navy2: #1A1A1A;
  --gray1: #F5F5F5;
  --gray2: #E8E8E8;
  --gray3: #D1D5DB;
  --text:  #1A1A1A;
  --text2: #3D3D3D;
  --text3: #7A7A7A;
  --white: #FFFFFF;

  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  background: var(--z-bg);
  color: var(--z-body);
  -webkit-font-smoothing: antialiased;
}
body.has-nav { padding-top: 62px; }


/* ================================================================
   SITE NAVIGATION — White bar with 4-color rainbow bottom stripe
   ================================================================ */

.sitenav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 62px;
  background: white;
  display: flex;
  align-items: center;
  padding: 0 28px;
  gap: 18px;
  z-index: 9999;
  box-shadow: 0 1px 0 var(--z-border), 0 2px 12px rgba(0,0,0,.06);
}

/* 4-color Zoho rainbow bottom stripe — the brand signature */
.sitenav::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg,
    var(--zr) 0% 25%,
    var(--zg) 25% 50%,
    var(--zb) 50% 75%,
    var(--zy) 75% 100%
  );
}

/* ── Brand / logo ── */
.sn-brand {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; flex-shrink: 0;
}
.sn-logo       { height: 34px; width: auto; }
.sn-name       { font-size: 13px; font-weight: 800; color: var(--z-text); letter-spacing: .2px; line-height: 1.2; }
.sn-sub        { font-size: 7.5px; font-weight: 700; color: var(--zr); letter-spacing: 1.5px; text-transform: uppercase; }

/* Divider */
.sn-div { width: 1px; height: 26px; background: var(--z-border); flex-shrink: 0; }

/* Center nav links */
.sn-links { display: flex; gap: 2px; flex: 1; justify-content: center; }
.sn-link {
  color: var(--z-body); text-decoration: none;
  font-size: 12.5px; font-weight: 600;
  padding: 7px 18px; border-radius: 6px; transition: all .15s;
}
.sn-link:hover { color: var(--z-text); background: var(--z-bg); }

/* Active link — Zoho Red pill */
.sn-link.active { background: var(--zr); color: white; }

/* Zoho partner logo on right side of nav */
.sn-partner {
  display: flex; flex-direction: column; align-items: center;
  gap: 1px; flex-shrink: 0; padding: 0 10px;
  border-left: 1px solid var(--z-border);
}
.sn-partner-text {
  font-size: 6.5px; font-weight: 700;
  color: var(--z-muted);
  letter-spacing: 1.2px; text-transform: uppercase;
}
.sn-zoho-logo {
  height: 20px; width: auto;
  opacity: .9;
}

/* CTA — Zoho Red button */
.sn-cta {
  background: var(--zr); color: white; text-decoration: none;
  font-size: 12px; font-weight: 700; padding: 8px 20px;
  border-radius: 6px; border: 1px solid var(--zr-dk);
  transition: all .15s; white-space: nowrap; flex-shrink: 0;
}
.sn-cta:hover {
  background: var(--zr-dk); transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(228,37,39,.45);
}

@media print {
  .sitenav { display: none; }
  body.has-nav { padding-top: 0; }
}

/* ================================================================
   HAMBURGER BUTTON
   ================================================================ */
.sn-hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1.5px solid var(--z-border);
  border-radius: 8px;
  padding: 7px 11px;
  cursor: pointer;
  color: var(--z-text);
  font-size: 16px;
  flex-shrink: 0;
  transition: background .15s, border-color .15s;
  margin-left: auto;
}
.sn-hamburger:hover { background: var(--z-bg); border-color: var(--z-muted); }
.sn-hamburger:focus-visible { outline: 2px solid var(--zr); outline-offset: 2px; }

/* ================================================================
   MOBILE SLIDE-DOWN MENU
   ================================================================ */
.sn-mob {
  position: fixed;
  top: 62px; left: 0; right: 0;
  background: white;
  border-bottom: 1px solid var(--z-border);
  padding: 10px 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  z-index: 9998;
  box-shadow: 0 8px 32px rgba(0,0,0,.1);
  transform: translateY(-110%);
  transition: transform .28s cubic-bezier(.4,0,.2,1);
  pointer-events: none;
}

.sn-mob.open {
  transform: translateY(0);
  pointer-events: auto;
}

.sn-mob-link {
  display: flex;
  align-items: center;
  padding: 13px 16px;
  border-radius: 10px;
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  color: var(--z-body);
  transition: background .15s, color .15s;
}
.sn-mob-link:hover            { background: var(--z-bg); color: var(--z-text); }
.sn-mob-link.active           { background: var(--zr-bg); color: var(--zr); font-weight: 700; }

.sn-mob-sep {
  height: 1px;
  background: var(--z-border);
  margin: 8px 0 4px;
}

.sn-mob-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  background: #1AB16D;
  color: white;
  padding: 14px 20px;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 700;
  font-size: 15px;
  margin-top: 2px;
  transition: opacity .15s, transform .15s;
}
.sn-mob-cta:hover { opacity: .92; transform: translateY(-1px); }

/* ================================================================
   RESPONSIVE NAV BREAKPOINTS
   ================================================================ */
@media (max-width: 860px) {
  /* Hide desktop-only nav items */
  .sn-links,
  .sn-partner,
  .sn-div             { display: none !important; }

  /* Hide the inline Book-a-Slot button in the nav */
  .sitenav > a[target="_blank"] { display: none !important; }

  /* Show hamburger */
  .sn-hamburger { display: flex; }

  /* Shrink logo text slightly */
  .sn-name { font-size: 12px; }
  .sn-sub  { font-size: 7px; }
}

@media (max-width: 480px) {
  .sitenav { padding: 0 14px; gap: 10px; }
  .sn-logo { height: 28px; }
  .sn-name { font-size: 11px; }
}

/* ================================================================
   SITE FOOTER — white with 4-color top stripe & social icons
   ================================================================ */

.site-footer {
  background: white;
  border-top: 3px solid transparent;
  background-image:
    linear-gradient(white, white),
    linear-gradient(90deg, var(--zr) 25%, var(--zg) 25% 50%, var(--zb) 50% 75%, var(--zy) 75%);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  padding: 30px 40px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.sf-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--z-border);
  padding-bottom: 18px;
  flex-wrap: wrap;
  gap: 16px;
}

.sf-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sf-logo {
  height: 34px;
  width: auto;
}

.sf-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--z-text);
}

.sf-sub {
  font-size: 11px;
  color: var(--z-muted);
  font-weight: 500;
}

.sf-social {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sf-soc-link {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: var(--z-body);
  border: 1px solid var(--z-border);
  background: #fafafa;
  text-decoration: none;
  transition: all 0.2s ease;
}

.sf-soc-link:hover {
  transform: translateY(-2px);
  color: white;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.sf-soc-link.sf-ig:hover { background: #e4405f; border-color: #e4405f; }
.sf-soc-link.sf-fb:hover { background: #1877F2; border-color: #1877F2; }
.sf-soc-link.sf-yt:hover { background: #FF0000; border-color: #FF0000; }
.sf-soc-link.sf-x:hover  { background: #000;    border-color: #000;    }
.sf-soc-link.sf-li:hover { background: #0A66C2; border-color: #0A66C2; }
.sf-soc-link.sf-wa:hover { background: #25D366; border-color: #25D366; }

.sf-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

.sf-l        { font-size: 12.5px; color: var(--z-body); }
.sf-l strong { color: var(--z-text); }
.sf-r        { font-size: 11px;   color: var(--z-muted); }

/* ── Footer mobile ── */
@media (max-width: 640px) {
  .site-footer {
    padding: 20px;
    gap: 16px;
  }
  .sf-top {
    flex-direction: column;
    align-items: flex-start;
    padding-bottom: 14px;
    gap: 14px;
  }
  .sf-social {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  .sf-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .sf-l { font-size: 11.5px; }
  .sf-r { font-size: 10.5px; }
}