/* Register common layer order if you use it elsewhere */
@layer reset, base, tokens, components, utilities, theme;

/* -------------------------
   Page Nav tokens (override in theme)
   ------------------------- */
@layer tokens {
  :root{
    /* relationship to the site nav */
    --site-nav-height:                 64px;

    /* geometry */
    --page-nav-height:                 var(--site-nav-height);
    --page-nav-max-width:              1200px;
    --page-nav-padding-x:              24px;
    --page-nav-item-gap:               clamp(14px, 3vw, 40px);
    
    --page-nav-menu-item-spacer:	   40px; /*space for site nave menu opener*/

    /* sticky position: set to var(--site-nav-height) to sit below site-nav,
       or set to 0 if you want it to pin at the very top. */
    --page-nav-sticky-top:             0;

    /* colors (theme can override) */
    --page-nav-background:             transparent;
    --page-nav-text:                   currentColor;
    --page-nav-divider-color:          rgba(0,0,0,.08);
    
	/* buttons */
    --page-nav-button-text:            #fff;
	--page-nav-button-padding:		   .1rem 1.4rem;		
    /* stacking */
    --page-nav-z-index:                120;


    /* logo text */
    --page-logo-name-size:             clamp(18px, 2.2vw, 22px);
    --page-logo-meta-size:             clamp(12px, 1.5vw, 14px);
    --page-logo-weight-name:           800;
    --page-logo-weight-meta:           600;
  }
}

/* -------------------------
   Page Nav component
   ------------------------- */
@layer components {

  /* bar */
  nav.page{
    position: sticky;
    top: var(--page-nav-sticky-top);
    z-index: var(--page-nav-z-index);
	background: var(--page-nav-bg, #fff);
	color: var(--page-nav-text);
    border-bottom: 1px solid var(--page-nav-divider-color);
    
    padding-inline-end: var(--page-nav-menu-item-spacer);
  }

  /* row */
  nav.page > ul{
    list-style: none;
    margin: 0 auto;
    padding: 0 var(--page-nav-padding-x);
    max-width: var(--page-nav-max-width);

    height: var(--page-nav-height);
    display: flex;
    align-items: center;
    gap: var(--page-nav-item-gap);

    /* keep single row; allow gentle sideways scroll when tight */
    white-space: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* links */
  nav.page a{
    display: inline-flex;
    align-items: center;
    height: var(--page-nav-height);
    line-height: 1;
    text-decoration: none;
    color: inherit;
    padding: 0 .25rem;
    font-weight: 600;
  }

  /* first item (logo block) pushes the rest to the right */
  nav.page > ul > li:first-child{
    margin-right: auto;
  }
  
  /* Height-driven option */
nav.page > ul > li:first-child { inline-size: auto; }
nav.page > ul > li:first-child > a { display: flex; align-items: center; block-size: var(--page-nav-height); }
nav.page > ul > li:first-child > a > img { block-size: 100%; inline-size: auto; padding-block: 3%;}

  /* logo block (sub-sites can override freely) */
  #wds-logo{
    display: grid;
    align-content: center;
    gap: .15rem;
    line-height: 1;
  }
  #wds-logo .logo-event-name{
    font-size: var(--page-logo-name-size);
    font-weight: var(--page-logo-weight-name);
  }
  #wds-logo .logo-city-date{
    font-size: var(--page-logo-meta-size);
    font-weight: var(--page-logo-weight-meta);
    opacity: .8;
  }

  /* register button height harmony; visual style comes from your .button */
  nav.page a.button{
/*     padding-inline: .875rem; */
    padding: var(--page-nav-button-padding);
    height: calc(var(--page-nav-height) - 1rem);
    align-self: center;
    color: var(--page-nav-button-text);
  }

  /* small screens: slightly shorter bar */
  @media (max-width: 720px){
    :root{ --page-nav-height: 50px; }
  }
}