/* ==========================================================================
   friendsmedia.co.in — shell styles (header, footer, buttons)
   Loads AFTER main.css. Only styles the new shell; existing page styles
   in main.css are untouched.
   Brand tokens taken from the existing build: teal #35b8b9, ClashDisplay.
   ========================================================================== */

:root{
  --fm-teal:#35b8b9;
  --fm-teal-dark:#2a9596;
  --fm-ink:#17171a;
  --fm-body:#2e2d2d;
  --fm-muted:#6b6b70;
  --fm-line:#e4e2dd;
  --fm-paper:#ffffff;
  --fm-dark:#111214;
  --fm-header-h:76px;
  --fm-display:"ClashDisplay-Semibold","ClashDisplay-Bold",Georgia,serif;
  --fm-sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

/* ---------- base ---------- */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:1000;
  background:var(--fm-ink);color:#fff;padding:12px 18px;border-radius:0 0 6px 0;
  font:600 14px/1 var(--fm-sans);
}
.skip-link:focus{left:0}

.fm-container{width:100%;max-width:1300px;margin:0 auto;padding:0 24px}

/* ---------- header ---------- */
.fm-header{
  position:sticky;top:0;z-index:900;background:var(--fm-paper);
  border-bottom:1px solid transparent;transition:border-color .2s ease,box-shadow .2s ease;
}
.fm-header.is-stuck{border-bottom-color:var(--fm-line);box-shadow:0 2px 18px rgba(0,0,0,.05)}

.fm-header__inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;min-height:var(--fm-header-h);
}
.fm-logo{display:inline-flex;align-items:center;flex:0 0 auto}
.fm-logo img{height:38px;width:auto;display:block}

.fm-nav{display:flex;align-items:center;gap:28px}
.fm-nav__list{display:flex;align-items:center;gap:26px;list-style:none;margin:0;padding:0}
.fm-nav__link{
  font:500 15px/1 var(--fm-sans);color:var(--fm-body);text-decoration:none;
  padding:8px 0;position:relative;white-space:nowrap;transition:color .15s ease;
}
.fm-nav__link::after{
  content:"";position:absolute;left:0;right:100%;bottom:2px;height:2px;
  background:var(--fm-teal);transition:right .22s ease;
}
.fm-nav__link:hover{color:var(--fm-ink)}
.fm-nav__link:hover::after,
.fm-nav__link[aria-current="page"]::after{right:0}
.fm-nav__link[aria-current="page"]{color:var(--fm-ink);font-weight:600}

/* Partner Program is the conversion path — visually emphasised. */
.fm-nav__link--cta{
  color:var(--fm-teal-dark);font-weight:600;
  border:1.5px solid var(--fm-teal);border-radius:999px;padding:8px 16px;
}
.fm-nav__link--cta::after{display:none}
.fm-nav__link--cta:hover{background:var(--fm-teal);color:#fff}

.fm-nav__contact{display:flex;align-items:center}

/* ---------- buttons ---------- */
.fm-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font:600 15px/1 var(--fm-sans);text-decoration:none;cursor:pointer;
  padding:13px 24px;border-radius:999px;border:1.5px solid transparent;
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.fm-btn--solid{background:var(--fm-ink);color:#fff}
.fm-btn--solid:hover{background:var(--fm-teal);color:#fff}
.fm-btn--outline{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
.fm-btn--outline:hover{background:var(--fm-teal);border-color:var(--fm-teal);color:#fff}
.fm-btn--teal{background:var(--fm-teal);color:#fff}
.fm-btn--teal:hover{background:var(--fm-teal-dark)}

/* ---------- burger ---------- */
.fm-burger{
  display:none;flex-direction:column;justify-content:center;gap:5px;
  width:44px;height:44px;background:none;border:0;cursor:pointer;padding:10px;
}
.fm-burger span{display:block;height:2px;background:var(--fm-ink);border-radius:2px;transition:transform .2s ease,opacity .2s ease}
.fm-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.fm-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.fm-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- footer ---------- */
.fm-footer{background:var(--fm-dark);color:#d6d6d8;padding:72px 0 32px;margin-top:96px;font-family:var(--fm-sans)}
.fm-footer__top{
  display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr 1.2fr;gap:40px;
  padding-bottom:48px;border-bottom:1px solid rgba(255,255,255,.1);
}
.fm-footer__col{min-width:0}
.fm-footer__brand img{height:40px;width:auto;margin-bottom:20px}
.fm-footer__tagline p{margin:0 0 8px;font-size:16px;line-height:1.55;color:#b8b8bc;max-width:38ch}

.fm-footer__title{
  font:600 13px/1 var(--fm-sans);letter-spacing:.14em;text-transform:uppercase;
  color:#fff;margin:0 0 18px;
}
.fm-footer__col ul{list-style:none;margin:0;padding:0}
.fm-footer__col li{margin-bottom:11px}
.fm-footer__col a,.fm-footer__address a{
  color:#b8b8bc;text-decoration:none;font-size:15px;transition:color .15s ease;
}
.fm-footer__col a:hover,.fm-footer__address a:hover{color:var(--fm-teal)}
.fm-footer__address{font-style:normal;line-height:1.9;margin-bottom:22px}

.fm-social{display:flex;gap:18px;list-style:none;margin:22px 0 0;padding:0}
.fm-social a{color:#b8b8bc;font-size:14px;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.2);padding-bottom:2px}
.fm-social a:hover{color:var(--fm-teal);border-color:var(--fm-teal)}

.fm-footer__bottom{
  display:flex;flex-wrap:wrap;align-items:center;gap:14px 32px;padding-top:28px;
}
.fm-footer__copy{margin:0;font-size:13px;color:#7d7d84}
.fm-footer__legal{display:flex;gap:22px;list-style:none;margin:0;padding:0}
.fm-footer__legal a{color:#7d7d84;font-size:13px;text-decoration:none}
.fm-footer__legal a:hover{color:var(--fm-teal)}

/* The quiet D2C path — deliberately understated. */
.fm-footer__brands{margin:0;margin-left:auto;font-size:13px;color:#7d7d84}
.fm-footer__brands a{color:#b8b8bc;text-decoration:underline;text-underline-offset:3px}
.fm-footer__brands a:hover{color:var(--fm-teal)}

/* ---------- focus ---------- */
a:focus-visible,button:focus-visible{outline:2px solid var(--fm-teal);outline-offset:3px;border-radius:3px}

/* ---------- responsive ---------- */
@media (max-width:1200px){
  .fm-footer__top{grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:36px}
  .fm-footer__brand{grid-column:1 / -1}
}
@media (max-width:1100px){
  .fm-nav__list{gap:18px}
  .fm-nav__link{font-size:14px}
  .fm-footer__top{grid-template-columns:1fr 1fr;gap:40px}
  .fm-footer__brand{grid-column:1 / -1}
}
@media (max-width:900px){
  .fm-burger{display:flex}
  .fm-nav{
    position:fixed;inset:var(--fm-header-h) 0 auto 0;background:var(--fm-paper);
    flex-direction:column;align-items:stretch;gap:0;padding:16px 24px 32px;
    border-bottom:1px solid var(--fm-line);
    transform:translateY(-12px);opacity:0;pointer-events:none;
    transition:opacity .2s ease,transform .2s ease;max-height:calc(100vh - var(--fm-header-h));overflow-y:auto;
  }
  .fm-nav.is-open{transform:none;opacity:1;pointer-events:auto}
  .fm-nav__list{flex-direction:column;align-items:stretch;gap:0}
  .fm-nav__item{border-bottom:1px solid var(--fm-line)}
  .fm-nav__link{display:block;padding:16px 0;font-size:16px}
  .fm-nav__link::after{display:none}
  .fm-nav__link--cta{border:0;border-radius:0;padding:16px 0;color:var(--fm-teal-dark)}
  .fm-nav__link--cta:hover{background:none;color:var(--fm-teal-dark)}
  .fm-nav__contact{margin-top:20px}
  .fm-nav__contact .fm-btn{width:100%}
  body.nav-open{overflow:hidden}
}
@media (max-width:640px){
  .fm-container{padding:0 18px}
  .fm-footer{padding:48px 0 28px;margin-top:64px}
  .fm-footer__top{grid-template-columns:1fr;gap:36px}
  .fm-footer__bottom{flex-direction:column;align-items:flex-start}
  .fm-footer__brands{margin-left:0}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- footer direct lines ----------
   EVERY rule here is scoped under .fm-footer on purpose.

   pages.css loads AFTER this file and styles the same .fm-lines block for
   its light-background "list" variant: display:flex, space-between,
   white-space:nowrap on the number, and an ink-coloured name. At equal
   specificity the later file won, so on every interior page the footer's
   four-column grid tried to lay each name, role and phone number out on a
   single unwrappable row inside a 210px track — the numbers spilled out
   and overlapped the next column. The homepage looked fine only because
   it never loads pages.css.

   Scoping to .fm-footer (0,2,1) beats .fm-lines li (0,1,1) regardless of
   load order, so this stays fixed even if a new stylesheet is added later.
   ------------------------------------------------------------------ */
.fm-footer__lines{padding:34px 0 6px;border-bottom:1px solid rgba(255,255,255,.1)}
.fm-footer .fm-lines--inline{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:18px 28px;
}
.fm-footer .fm-lines--inline li{
  display:block;min-width:0;padding:0;border:0;
}
.fm-footer .fm-lines--inline li:first-child{border-top:0}
.fm-footer .fm-lines--inline .fm-lines__name{
  display:block;font:600 14.5px/1.3 var(--fm-sans);color:#fff;
  overflow-wrap:anywhere;
}
.fm-footer .fm-lines--inline .fm-lines__role{
  display:block;font-size:12.5px;color:#8a8a90;margin:2px 0 5px;
}
.fm-footer .fm-lines--inline a{
  display:inline-block;font:600 14.5px/1 var(--fm-sans);
  color:var(--fm-teal);text-decoration:none;white-space:nowrap;
}
.fm-footer .fm-lines--inline a:hover{color:#fff}