/* RSN section sites (fashion-and-style / beauty / lifestyle) — header aligned to the RSN Home masthead.
   Scope: body.rsn-header (class added on the 3 section sites only) + Elementor Pro's header location.
   Every selector starts "body.rsn-header .elementor-location-header" (0,2,1) so it outranks Elementor's
   strongest relevant rule (0,5,0) in any load order. Items, links, order, sticky and the dropdown's
   behaviour stay Elementor's; only geometry, type and colour change. */
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('/wp-content/themes/rsn-child/assets/fonts/DMSans-var.woff2') format('woff2')}

body.rsn-header .elementor-location-header{
  --rsn-ink:#191817;--rsn-red:#9b301f;--rsn-muted:#655f59;--rsn-line:#d9d3c9;--rsn-paper:#fff}   /* paper: white since 1.0.4 (client: no cream) */

/* rsn:gutter-start — page gutters (1.0.4). One side margin for header, page content and footer, the home page's
   (.wrap: min(1320px, 100% - 64px) → 24 / 20 / 16px). On tablets and phones the page content (Elementor's top-level
   containers on pages and archives; Hello's main column on stories and the 404) sat 10px from the edge while the
   header and footer sat at 16–24px: three left edges on one screen. Desktop keeps Elementor's centred reading column.
   tools/regress.py injects exactly this block into its before AND after shots, so the rest of each page must match. */
body.rsn-header{--rsn-side:max(32px, calc((100% - 1320px) / 2))}
@media(max-width:1240px){body.rsn-header{--rsn-side:24px}}
@media(max-width:900px){body.rsn-header{--rsn-side:20px}}
@media(max-width:640px){body.rsn-header{--rsn-side:16px}}
@media(max-width:1024px){
  body.rsn-header :is([data-elementor-type="wp-page"],[data-elementor-type="archive"],[data-elementor-type="single-page"],
    [data-elementor-type="single-post"],[data-elementor-type="search-results"]) > .e-con{padding-inline:var(--rsn-side) !important}
  body.rsn-header:not([class*="elementor-page-"]) main.site-main{padding-inline:var(--rsn-side)}   /* Hello pads it only there too */
  /* the story title had 10px more on phones than the story text below it (26 vs 16px) */
  body.rsn-header:not([class*="elementor-page-"]) main.site-main .page-header .entry-title{padding-inline:0}}
/* rsn:gutter-end */
/* Room under the rule before the page starts, as on the home page (rule to hero 28px; phones 16px). On the
   location wrapper, not the bar: the bar is Elementor-sticky and a margin on it would jump when it pins. */
body.rsn-header .elementor-location-header{padding-bottom:18px}
@media(max-width:640px){body.rsn-header .elementor-location-header{padding-bottom:8px}}

/* 1. The bar = the home .bar: same content box, 26 / 22 padding (14 / 14 on phones), a 1px rule in the
      content width at the bottom, children centred on one line (menu where the home Search sits). */
body.rsn-header .elementor-location-header > .e-con.e-parent{
  --padding-left:var(--rsn-side);--padding-right:var(--rsn-side);--padding-top:26px;--padding-bottom:23px;
  --min-height:0px;--align-items:center;--justify-content:space-between;--flex-wrap:nowrap;
  background-image:linear-gradient(var(--rsn-line),var(--rsn-line));background-repeat:no-repeat;
  background-size:calc(100% - 2 * var(--rsn-side)) 1px;background-position:50% 100%}
@media(max-width:640px){body.rsn-header .elementor-location-header > .e-con.e-parent{--padding-top:14px;--padding-bottom:15px}}

/* 2. Logo + brand line = the home .brand, pixel for pixel: logo ink 325.8 x 24 in a 44px link (244.3 x 18
      on phones), "Fashion · Beauty · Lifestyle" under it across the logo's width, dots in red ink.
      Keyed to the standard logo file (padded 816 x 175 PNG, ink 42,61 - 775,115): with any other logo
      none of this applies and Elementor's own logo styling stays. */
body.rsn-header .elementor-location-header .elementor-widget-theme-site-logo:has(img[src*="real-style-network-logo2"]){
  --rsn-ls:.2em;flex:0 0 auto;width:326px;max-width:none;margin:0;
  display:grid;grid-template-rows:44px auto;row-gap:2px;align-items:center;
  /* F | gap | dot | gap | B | gap | dot | gap | L — the home's flex space-between, as grid tracks */
  grid-template-columns:auto 1fr calc(.2508em + var(--rsn-ls)) 1fr auto 1fr calc(.2508em + var(--rsn-ls)) 1fr auto;
  font:600 12px/1.3 'DM Sans',Arial,sans-serif;letter-spacing:var(--rsn-ls);text-transform:uppercase;color:var(--rsn-muted)}
body.rsn-header .elementor-location-header .elementor-widget-theme-site-logo:has(img[src*="real-style-network-logo2"]) > .elementor-widget-container{display:contents}
body.rsn-header .elementor-location-header .elementor-widget-theme-site-logo:has(img[src*="real-style-network-logo2"])::before{content:"Fashion";grid-area:2/1}
body.rsn-header .elementor-location-header .elementor-widget-theme-site-logo:has(img[src*="real-style-network-logo2"]) > .elementor-widget-container::before{content:"Beauty";grid-area:2/5}
body.rsn-header .elementor-location-header .elementor-widget-theme-site-logo:has(img[src*="real-style-network-logo2"])::after{content:"Lifestyle";grid-area:2/9}
body.rsn-header .elementor-location-header .elementor-widget-theme-site-logo:has(img[src*="real-style-network-logo2"]) > .elementor-widget-container::after{
  content:"·\20·";grid-area:2/3/3/8;color:var(--rsn-red);text-align:justify;text-align-last:justify;white-space:nowrap}
body.rsn-header .elementor-location-header .elementor-widget-theme-site-logo a:has(> img[src*="real-style-network-logo2"]){
  grid-area:1/1/2/-1;display:block;width:325.8px;height:44px;margin-right:-1px;overflow:hidden;line-height:0} /* -1px: the logo never widens the brand-line tracks */
body.rsn-header .elementor-location-header .elementor-widget-theme-site-logo img[src*="real-style-network-logo2"]{
  display:block;width:362.67px;height:77.78px;max-width:none;object-fit:fill;
  margin:-17.11px 0 0 -18.67px}  /* scale 24/54 of the 816x175 file; ink (42,61) lands on the home logo's 0,0 */
@media(max-width:640px){
  body.rsn-header .elementor-location-header .elementor-widget-theme-site-logo:has(img[src*="real-style-network-logo2"]){--rsn-ls:.12em;width:244px;row-gap:0}
  body.rsn-header .elementor-location-header .elementor-widget-theme-site-logo a:has(> img[src*="real-style-network-logo2"]){width:244.3px}
  body.rsn-header .elementor-location-header .elementor-widget-theme-site-logo img[src*="real-style-network-logo2"]{width:272px;height:58.33px;margin:-7.33px 0 0 -14px}}

/* 3. Menu: the home Search control's type (DM Sans 13/600, .14em, caps) in home ink; 44px tall targets;
      right edge on the content edge = the home Search box's right edge. Hover / focus / current page:
      red ink, Elementor's own underline pointer recoloured. */
body.rsn-header .elementor-location-header .elementor-widget-nav-menu{--e-nav-menu-horizontal-menu-item-margin:18px;margin:0}  /* Elementor puts this margin on BOTH sides of each gap: gap = 2 x value */
body.rsn-header .elementor-location-header .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item{
  font-family:'DM Sans',Arial,sans-serif;font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  line-height:24px;padding:10px 0;color:var(--rsn-ink);fill:var(--rsn-ink)}
body.rsn-header .elementor-location-header .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:is(:hover,:focus,.elementor-item-active,.highlighted){color:var(--rsn-red);fill:var(--rsn-red)}
body.rsn-header .elementor-location-header .elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item::after{background-color:var(--rsn-red);bottom:8px}
body.rsn-header .elementor-location-header .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-nav-menu{justify-content:flex-end}
body.rsn-header .elementor-location-header :is(a,[role="button"]):focus-visible{outline:2px solid var(--rsn-red);outline-offset:3px}
@media(max-width:1240px){body.rsn-header .elementor-location-header .elementor-widget-nav-menu{--e-nav-menu-horizontal-menu-item-margin:14px}}
@media(max-width:1100px){body.rsn-header .elementor-location-header .elementor-widget-nav-menu{--e-nav-menu-horizontal-menu-item-margin:12px}}

/* 4. 768-991: logo row + its own nav row, exactly like the home page at these widths (54px row between
      two rules, items centred, gap 44 / 34). The container wraps; the bottom rule is the nav's. */
@media(min-width:768px) and (max-width:991px){
  body.rsn-header .elementor-location-header > .e-con.e-parent{--flex-wrap:wrap;--padding-bottom:0px;--row-gap:22px;background-image:none}
  body.rsn-header .elementor-location-header .elementor-widget-nav-menu{flex:0 0 100%;width:100%;max-width:100%;
    border-top:1px solid var(--rsn-line);border-bottom:1px solid var(--rsn-line);--e-nav-menu-horizontal-menu-item-margin:22px}
  body.rsn-header .elementor-location-header .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-nav-menu{justify-content:center;margin-inline:auto}
  body.rsn-header .elementor-location-header .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item{padding:15px 0}
  body.rsn-header .elementor-location-header .elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item::after{bottom:13px}}
@media(min-width:768px) and (max-width:900px){body.rsn-header .elementor-location-header .elementor-widget-nav-menu{--e-nav-menu-horizontal-menu-item-margin:17px}}

/* 5. Phones (Elementor shows the burger at <=767): burger on the logo row in the home Search icon's
      place — 44 x 44 target, icon flush with the content edge, home ink. */
@media(max-width:767px){
  body.rsn-header .elementor-location-header .elementor-widget-nav-menu{--nav-menu-icon-size:22px;flex:0 0 auto;width:auto}
  body.rsn-header .elementor-location-header .elementor-widget-nav-menu div.elementor-menu-toggle{
    width:44px;height:44px;padding:0;margin:0;justify-content:flex-end;background:transparent;border-radius:0;color:var(--rsn-ink)}
  body.rsn-header .elementor-location-header .elementor-widget-nav-menu div.elementor-menu-toggle svg{fill:var(--rsn-ink)}
  /* Dropdown (items + open/close behaviour unchanged): starts on the header's bottom rule, full width,
     home tokens — white like the page, DM Sans caps, 48px rows on hairlines, text on the logo's left edge.
     Placed against the full-width bar, not by Elementor's "stretch" script: that script writes a left offset measured
     from where the burger was BEFORE this stylesheet moved it, and when it ran early the closed menu hung 43px past
     the screen edge (pages 3px too wide on phones, seen live 2026-10-30). The !important beats its inline styles. */
  body.rsn-header .elementor-location-header .elementor-widget-nav-menu,
  body.rsn-header .elementor-location-header .elementor-widget-nav-menu > .elementor-widget-container{position:static}
  body.rsn-header .elementor-location-header .elementor-widget-nav-menu nav.elementor-nav-menu--dropdown.elementor-nav-menu__container{
    top:100% !important;left:0 !important;right:0 !important;width:auto !important;margin-top:0 !important;
    background:#fff;border-bottom:1px solid var(--rsn-line)}
  body.rsn-header .elementor-location-header .elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-item{
    font-family:'DM Sans',Arial,sans-serif;font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;line-height:24px;
    min-height:48px;padding:12px var(--rsn-side);border-top:1px solid var(--rsn-line);border-inline-start:0;color:var(--rsn-ink);background:transparent}
  body.rsn-header .elementor-location-header .elementor-widget-nav-menu .elementor-nav-menu--dropdown li:first-child > .elementor-item{border-top:0}
  body.rsn-header .elementor-location-header .elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-item:is(:hover,:focus,.elementor-item-active,.highlighted){color:var(--rsn-red);background:var(--rsn-paper)}
  body.rsn-header .elementor-location-header .elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-item:focus-visible{outline-offset:-3px}}
@media(max-width:640px){
  body.rsn-header .elementor-location-header .elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-item{font-size:12px;letter-spacing:.1em}}