/* naset-series home (TODO 00012.e): what the mockup CSS (naset-home.css, generated) needs to run inside WordPress.
   Hand-written. Uses the mockup's own tokens (--r*, --radius, colours). Class names carry no ad-like word. */

/* WordPress admin bar (logged-in views): the sticky header sits under it */
.admin-bar .top{top:var(--wp-admin--admin-bar--height,32px)}
@media (max-width:600px){.admin-bar .top{top:0}}

/* This week at NASET (her spec 2026-10-22): four tiles, latest e-Journal, this week's trivia, latest Support Squad, latest
   Breakroom Daily Take. 4 across from 1100 px, 2 across from 600 px, 1 on phones; the date sits on each tile's floor. */
.news.week{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1099px){.news.week{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:599px){.news.week{grid-template-columns:minmax(0,1fr)}}
.wk-tile h3{overflow-wrap:anywhere}
.wk-tile p{color:var(--olive)}
.wk-date{margin-top:auto;padding-top:var(--r3);font-size:15px;font-weight:700;color:var(--olive)}
.wk-empty{border-style:dashed}
/* 1.19.7 (s45 B1, "Hide until first post"): while no Breakroom Daily Take is published the row has three tiles (wk-n3):
   3 across from 900 px (the home's own 3-up .news grid), 2 across from 600 px with the third tile on its own full row,
   1 on phones. The four-tile grid above comes back by itself with the first published Daily Take. */
.news.week.wk-n3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:899px){.news.week.wk-n3{grid-template-columns:repeat(2,minmax(0,1fr))}.news.week.wk-n3>:last-child{grid-column:1/-1}}
@media (max-width:599px){.news.week.wk-n3{grid-template-columns:minmax(0,1fr)}}

/* newsletter: her Gravity Form, in the mockup's field style */
.insights .nh-form{margin-top:var(--r4)}
body.naset-home .insights .gform_wrapper.gravity-theme{margin:0}
body.naset-home .insights .gform_wrapper.gravity-theme form{display:block;margin:0}
body.naset-home .insights .gform_wrapper.gravity-theme .gform_fields{grid-row-gap:var(--r3)}
body.naset-home .insights .gform_wrapper.gravity-theme .gfield_label{font-family:inherit;font-size:15px;font-weight:700;line-height:1.4;margin:0 0 6px;padding:0;color:var(--ink)}
body.naset-home .insights .gform_wrapper.gravity-theme .gfield_required{color:var(--ink);font-size:15px}
body.naset-home .insights .gform_wrapper.gravity-theme .gform_required_legend{font-size:14px;color:var(--olive);margin:0 0 var(--r2)}
body.naset-home .insights .gform_wrapper.gravity-theme input:not([type=submit]):not([type=hidden]):not([type=checkbox]):not([type=radio]),
body.naset-home .insights .gform_wrapper.gravity-theme select{width:100%;min-height:52px;border:1.5px solid var(--olive);border-radius:var(--radius-s);
  padding:0 16px;font-family:inherit;font-size:17px;line-height:1.4;background:var(--white);color:var(--ink);box-shadow:none}
body.naset-home .insights .gform_wrapper.gravity-theme .gform_footer{margin:var(--r3) 0 0;padding:0}
body.naset-home .insights .gform_wrapper.gravity-theme .gform_footer input[type=submit],
body.naset-home .insights .gform_wrapper.gravity-theme .gform_footer button{display:inline-flex;align-items:center;justify-content:center;min-height:48px;
  padding:0 22px;margin:0;border:0;border-radius:var(--radius-s);background:var(--ink);color:var(--white);font-family:inherit;font-weight:700;
  font-size:16px;line-height:1.2;cursor:pointer;width:auto}
body.naset-home .insights .gform_wrapper.gravity-theme .gform_footer input[type=submit]:hover{background:var(--olive)}
body.naset-home .insights .gform_wrapper.gravity-theme .gfield_validation_message,
body.naset-home .insights .gform_wrapper.gravity-theme .validation_message{font-size:15px}
.insights .nh-form-alt{margin-top:var(--r4)}

/* WordPress's own screen-reader class (Gravity Forms uses it) */
.naset-home .screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* the 60K+ counter: once it has rolled (or with reduced motion), the clipped digits it rolled past are hidden, so they
   never count as painted text (gap-check read their boxes over the photo edge, 00012.d false positives) */
html:not(.mo) .k-roll text:not(:last-child),html:not(.mo) .k-eroll text:not(:last-child){visibility:hidden}
.mo .mo-in .k-roll text:not(:last-child),.mo .k-ig.mo-in .k-eroll text:not(:last-child){animation:nh-rolled 0s linear 2.2s forwards}
@keyframes nh-rolled{to{visibility:hidden}}

/* theme leftovers printed in wp_footer (Astra's scroll-to-top button; its styles are not loaded here) */
#ast-scroll-top{display:none!important}

/* topics mode adds an eighth top-menu section (Topics): the row fits from 1440 px with tighter buttons; below that the
   Menu button and drawer take over (the seven-section placeholder keeps the mockup's 1280 px switch) */
@media (min-width:1440px){.nav:has(>li:nth-child(8)) button{padding:10px 4px;font-size:15px}.nav:has(>li:nth-child(8)){gap:2px}}
@media (max-width:1439px){.top .nav:has(>li:nth-child(8)){display:none}.top:has(.nav>li:nth-child(8)) .menu-btn{display:inline-flex}}
/* s38-J: the Library link is a ninth top-menu section (a plain link, sized like the buttons above; the drawer row like
   the section rows). Nine at 15 px do not fit from 1440 to 1699 px (59 px over with Member login) and the buttons are
   already at 4 px padding and a 2 px gap, and there is no Menu button there, so Member login must stay in the top bar
   (her member-login-learn-naset): the nine items drop to 14 px in that band only, which fits with Member login in full.
   Member login and the top links keep a 44 px tap target from 600 px up */
.top .nav .nav-link{display:inline-flex;align-items:center;padding:10px 4px;font-size:15px;white-space:nowrap}
.drawer .drawer-link{display:block;margin:0 var(--r8);padding:16px 0;border-bottom:1px solid var(--line);font-weight:700;font-size:20px;text-decoration:none}
@media (min-width:600px){.top .hdr-login{display:inline-flex;align-items:center;min-height:44px}.top .nav .nav-link{min-height:44px}}
@media (min-width:1440px) and (max-width:1699px){.top .nav:has(>li:nth-child(9)) button,.top .nav:has(>li:nth-child(9)) .nav-link{font-size:14px;min-height:44px}}

/* #empowering stacked (<= 1023 px): the cut-out photo's head rises above its frame, so the painted gap from the "Join NASET
   Today" button to the photo was 21 px at 390 (gap-check: under the page's heading-to-content gaps). The photo gets the
   R6 step instead of R5. */
@media (max-width:1023px){#empowering .k-ig{margin-top:calc(var(--r6) - var(--r5))}}

/* Footer Quick Links (s42r, TODO 00012.r r6): her "remove the advertising partners in the footer - they're all stale - you
   can broaden the quick links box" (2026-10-23). The partner half is gone (it was two equal halves from 1024 px, s37-K);
   Quick Links spans the footer: 1024 to 1279 px two rows of six, 1280 px and up all 12 in one row (838 px of links at
   15 px, about 900 px at 16 px, in a 1240 px row). Every Quick Link is a 44 px tap target. Applies to the shared footer:
   this file feeds naset-chrome.css too (build_home.py). */
.foot-extra{grid-template-columns:1fr}
.foot-extra .quick{gap:0 var(--r4)}
.foot-extra .quick a{display:inline-flex;align-items:center;min-height:44px}
@media (min-width:1024px) and (max-width:1279px){
  .foot-extra .quick{display:grid;grid-template-columns:repeat(6,max-content);justify-content:space-between;gap:0 8px;font-size:16px}
}
@media (min-width:1280px){
  .foot-extra .quick{display:grid;grid-template-columns:repeat(12,max-content);justify-content:space-between;gap:0 8px;font-size:16px}
}

/* s38-D1 (operator 2026-10-22: "we lost the balance in the section that we had before"). Topics mode added a 7th card to the
   "Everything on NASET" grid (3 per row: Awards + "Looking for something else?" alone on row 3) and put Topics' 14 links
   on top of Publications' 10 in footer column 1 (24 links beside columns of 8). Topics now runs full width (Naset_Home):
   - directory: a second wide card under Publications, its 14 links in balanced columns (4 / 3 / 2 / 1 by width), so the
     grid below is the original 3 + 3 (2 + 2 + 2 from 1023 px);
   - footer: a band on its own row across the link columns, as many sub-columns as link columns (same column gap, so they
     line up), so the 4 columns below are even again (Publications 10 | Resources 4 + Awards 3 | Certifications 5 +
     Career Center 3 | Membership 4 + About 5, Partner with NASET the last About link).
   Applies to the shared footer: this file feeds naset-chrome.css too (build_home.py). */
.dir-wide .dir-groups.dir-one{display:block}
.dir-wide .cols{columns:4;column-gap:var(--r5)}
.dir-wide .cols li{break-inside:avoid}
.foot-band{grid-column:2/-1;padding-bottom:var(--r4);border-bottom:1px solid var(--line)}
.foot:has(>.foot-band)>div:first-child{grid-row:span 2}
.foot-band .band-list{display:block;columns:4;column-gap:var(--r5)}
.foot-band .band-list li{break-inside:avoid;padding-bottom:var(--r1)}
@media (max-width:1279px){
  .dir-wide .cols{columns:3}
  .foot-band{grid-column:1/-1}
  .foot:has(>.foot-band)>div:first-child{grid-row:auto}
}
@media (max-width:1023px){
  .dir-wide .cols{columns:2}
  .foot-band .band-list{columns:2}
}
@media (max-width:599px){
  .dir-wide .cols{columns:1}
  .foot-band .band-list{display:none}
}

/* s40l (TODO 00012.l): no image is ever drawn outside its own aspect ratio. Zero-specificity net: every rule in
   naset-home.css that sets its own object-fit (cover on the hero, member, groups, Get Involved, product and shop photos,
   the review avatars) still wins; any other image whose box ratio differs from its file's (logos with a fixed height that
   max-width:100% narrows, the 1:1 credential seals) is shown whole instead of stretched. */
:where(body.naset-home) :where(img){object-fit:contain}