/*
 * Neostopzone - front-end styles
 * -----------------------------------------------------------------
 * Design tokens live in :root below, derived from the logo
 * (red #D2161A, black, white).
 *
 * Light only - no prefers-color-scheme block. Astra has no dark mode,
 * so auto-darkening this page while every other page stayed light
 * produced a visibly broken, half-dark site.
 *
 * Sections, in order:
 *   1. Design tokens
 *   2. Base / reset
 *   3. Header + primary navigation (incl. Beauty mega menu)
 *   4. Hero + search
 *   5. Section headings
 *   6. Skin-type card grid
 *   7. Footer
 *   8. Responsive breakpoints
 * -----------------------------------------------------------------
 */

:root{
  /* Pins this page to light rendering, two jobs in one line:
     - "light" stops the browser giving form controls, scrollbars,
       the canvas and spellcheck underlines their dark-mode defaults.
     - "only" forbids the user agent from overriding the scheme at
       all, which opts out of algorithmic darkening such as Chrome's
       Auto Dark Theme on Android.
     This design has no dark palette, so auto-darkening can only
     produce an unreadable page. */
  color-scheme: only light;

  --red: #D2161A;
  --red-press: #A81114;
  --red-deep: #7C0D10;
  --red-100: #F7DCDC;
  --red-50: #FCEDED;
  --ink: #151515;
  --ink-soft: #5A5956;
  --ink-faint: #8E8C88;
  --bg: #F5F4F2;
  --surface: #FFFFFF;
  --stone: #EBE9E6;
  --border: rgba(21,21,21,0.13);
  --border-strong: rgba(21,21,21,0.26);
  --logo-plate: transparent;
  --on-red: #FFFFFF;
  --font-display: "Archivo", -apple-system, sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "JetBrains Mono", monospace;
  --radius-lg: 18px;
}


*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; background: var(--bg); }
/* Dual selector on purpose. `body` alone keeps this file usable
   standalone; `body.nsz-template` (class added by functions.php) raises
   specificity above the parent theme's own `body` rules. Without this,
   Astra wins and the page keeps its white background while this file's
   surface colours still apply - producing a half-styled page. */
body,
body.nsz-template{
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a{ color: inherit; }
img{ max-width: 100%; display: block; }
.wrap{
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 32px;
}

/* ---------- header ---------- */
header{
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 20;
}
.header-row{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 36px;
  position: relative;
}
.logo{
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  padding: 18px 0;
  flex-shrink: 0;
}
.logo-plate{
  display: inline-flex;
  align-items: center;
  background: var(--logo-plate);
  border-radius: 6px;
  padding: 4px 8px;
}
.logo-plate svg{ display: block; height: 26px; width: auto; }
footer .logo{ padding: 0; }
footer .logo-plate{ padding: 5px 10px; }
footer .logo-plate svg{ height: 20px; }

nav.main-nav{
  display: flex;
  align-items: center;
  gap: 22px;
}
.nav-item{ position: relative; }
.nav-item.mega-parent{ position: static; }
.nav-trigger{
  display: inline-flex;
  align-items: center;
}
.nav-link{
  font-family: var(--font-body);
  font-size: 14.5px;
  color: var(--ink-soft);
  background: none;
  border: none;
  padding: 20px 0;
  margin: 0;
  cursor: pointer;
  display: inline-block;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s ease;
}
.nav-caret{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 20px 0 20px 5px;
  margin: 0;
  color: var(--ink-faint);
  cursor: pointer;
  transition: color 0.15s ease;
}
.nav-trigger:hover .nav-link,
.nav-trigger:hover .nav-caret{ color: var(--ink); }
.nav-caret .caret-icon{ display: block; transition: transform 0.18s ease; }
.nav-link.active{
  color: var(--ink);
  font-weight: 500;
  box-shadow: inset 0 -3px 0 var(--red);
}
.nav-item.open .nav-link,
.nav-item.open .nav-caret{ color: var(--ink); }
.nav-item.open .nav-caret .caret-icon{ transform: rotate(180deg); }

.dropdown{
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 214px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--red);
  border-radius: 0 0 12px 12px;
  padding: 10px;
  z-index: 40;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-5px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}
.dropdown.mega{
  left: 0;
  right: 0;
  padding: 24px 26px 26px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px 20px;
}
.nav-item.open > .dropdown{
  opacity: 1;
  visibility: visible;
  transform: none;
}
@media (hover: hover) and (min-width: 721px){
  .nav-item:hover > .dropdown{
    opacity: 1;
    visibility: visible;
    transform: none;
  }
}
.dropdown a{
  display: block;
  font-size: 13.5px;
  color: var(--ink-soft);
  text-decoration: none;
  padding: 7px 10px;
  border-radius: 6px;
  transition: color 0.12s ease, background 0.12s ease;
}
.dropdown a:hover{ color: var(--red); background: var(--red-50); }
.dd-group-title{
  font-family: var(--font-display);
  font-variation-settings: "wdth" 108;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  display: block;
  padding: 0 10px 8px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.dd-group-title:hover{ color: var(--red); }

.nav-toggle{
  display: none;
  background: none;
  border: none;
  font-size: 24px;
  color: var(--ink);
  cursor: pointer;
  margin-left: auto;
}

/* ---------- hero ---------- */
.hero{
  padding: 56px 0 44px;
  text-align: center;
}
h1.hero-title{
  color: var(--ink);
  font-family: var(--font-display);
  font-variation-settings: "wdth" 112;
  font-weight: 700;
  font-size: clamp(30px, 4.4vw, 46px);
  line-height: 1.1;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  margin: 0 0 30px;
}
h1.hero-title em{
  font-style: normal;
  color: var(--red);
}

.search-shell{
  max-width: 560px;
  margin: 0 auto;
}
.search-box{
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border: 2px solid var(--ink);
  border-radius: 12px;
  padding: 5px 7px 5px 20px;
  height: 60px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.search-box:focus-within{
  border-color: var(--red);
  box-shadow: 0 0 0 4px var(--red-50);
}
.search-glass{
  color: var(--ink-faint);
  flex-shrink: 0;
  display: block;
}
.search-box input{
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--ink);
  min-width: 0;
}
.search-box input::placeholder{ color: var(--ink-faint); }

/* Autofilled inputs get a UA background that follows the OS colour
   scheme and ignores background-color. An inset shadow is the standard
   way to override it. */
.search-box input:-webkit-autofill,
.search-box input:-webkit-autofill:hover,
.search-box input:-webkit-autofill:focus,
.search-box input:-webkit-autofill:active{
  -webkit-text-fill-color: var(--ink);
  -webkit-box-shadow: 0 0 0 100px var(--surface) inset;
  box-shadow: 0 0 0 100px var(--surface) inset;
  caret-color: var(--ink);
}
.search-submit{
  width: 46px;
  height: 46px;
  border-radius: 8px;
  background: var(--red);
  border: none;
  color: var(--on-red);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s ease;
}
.search-submit:hover{ background: var(--red-press); }
.search-submit svg{ display: block; color: var(--on-red); }

.search-recent{ margin-top: 18px; }
.recent-head{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 10px;
}
.recent-label{
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.recent-clear{
  font-size: 12px;
  color: var(--ink-faint);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
}
.recent-clear:hover{ color: var(--red); }
.search-recent .search-tags{ margin-top: 0; }

.search-tags{
  display: flex;
  gap: 9px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 18px;
}
.search-tags a{
  font-size: 13px;
  color: var(--ink-soft);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 99px;
  padding: 7px 15px;
  text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.search-tags a:hover{ border-color: var(--red); color: var(--red); }

/* ---------- section heading ---------- */
.section-head{
  display: flex;
  align-items: baseline;
  margin: 8px 0 22px;
  padding-bottom: 14px;
  border-bottom: 3px solid var(--red);
}
.section-head h2{
  color: var(--ink);
  font-family: var(--font-display);
  font-variation-settings: "wdth" 112;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  margin: 0;
}

/* ---------- bento grid ---------- */
.bento{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  padding-bottom: 60px;
}
.tile{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px;
  text-decoration: none;
  color: var(--ink);
  display: block;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.tile:hover{
  border-color: var(--red);
  transform: translateY(-2px);
}
.tile-art{
  height: 128px;
  border-radius: 12px;
  margin-bottom: 16px;
  position: relative;
  overflow: hidden;
  background: var(--stone);
}
.tile-art img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.tile h3{
  color: var(--ink);
  font-family: var(--font-display);
  font-variation-settings: "wdth" 108;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin: 0;
}

.view-all-cell{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-display);
  font-variation-settings: "wdth" 110;
  font-weight: 700;
  font-size: clamp(19px, 2vw, 23px);
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  transition: color 0.15s ease;
}
.view-all-cell svg{ transition: transform 0.18s ease; flex-shrink: 0; }
.view-all-cell:hover{ color: var(--red); }
.view-all-cell:hover svg{ transform: translateX(6px); }

/* ---------- footer ---------- */
footer{
  border-top: 1px solid var(--border);
  padding: 40px 0 28px;
}
.footer-grid{
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 24px;
  padding-bottom: 28px;
}
.footer-brand p{
  font-size: 13px;
  color: var(--ink-soft);
  max-width: 220px;
  margin: 10px 0 0;
}
.footer-col p.col-title{
  color: var(--ink);
  font-family: var(--font-display);
  font-variation-settings: "wdth" 108;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 0 10px;
}
.footer-col a{
  display: block;
  font-size: 13.5px;
  color: var(--ink-soft);
  text-decoration: none;
  line-height: 2.1;
}
.footer-col a:hover{ color: var(--red); }
.footer-bottom{
  border-top: 1px solid var(--border);
  padding-top: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.footer-bottom .legal{
  font-size: 12.5px;
  color: var(--ink-faint);
}
.footer-bottom .legal a{
  color: var(--ink-faint);
  text-decoration: none;
}
.footer-bottom .legal a:hover{ color: var(--red); }

/* Site-wide legal links, sits below </footer> - see front-page.php / index.php. */
.site-legal{
  background: var(--stone);
  border-top: 1px solid var(--border);
}
.site-legal .wrap{
  display: flex;
  justify-content: center;
  gap: 26px;
  padding: 16px 32px;
  flex-wrap: wrap;
}
.site-legal a{
  font-size: 12.5px;
  color: var(--ink-faint);
  text-decoration: none;
}
.site-legal a:hover{ color: var(--red); }

.socials{
  display: flex;
  gap: 16px;
}
.socials a{
  color: var(--ink-faint);
  text-decoration: none;
  font-size: 17px;
}
.socials a:hover{ color: var(--red); }

/* ---------- responsive ---------- */
@media (max-width: 1000px){
  nav.main-nav{ gap: 16px; }
  .nav-link{ font-size: 13.5px; }
  .header-row{ gap: 24px; }
  .dropdown.mega{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px){
  .footer-grid{ grid-template-columns: 1fr 1fr 1fr; }
  .footer-brand{ grid-column: 1 / -1; margin-bottom: 8px; }
}
@media (max-width: 720px){
  .wrap{ padding: 0 20px; }
  .header-row{ gap: 12px; }
  .logo{ padding: 14px 0; }
  nav.main-nav{
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 4px 20px 16px;
    max-height: calc(100vh - 60px);
    overflow-y: auto;
    display: none;
  }
  nav.main-nav.open{ display: flex; }
  .nav-item{ position: static; border-bottom: 1px solid var(--border); }
  .nav-item:last-child{ border-bottom: none; }
  .nav-trigger{
    width: 100%;
    justify-content: space-between;
  }
  .nav-link{
    padding: 13px 0;
    flex: 1;
    font-size: 15px;
  }
  .nav-caret{
    padding: 13px 4px 13px 14px;
  }
  .dropdown,
  .dropdown.mega{
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
    display: none;
    grid-template-columns: 1fr;
    border: none;
    border-left: 3px solid var(--red);
    border-radius: 0;
    background: transparent;
    min-width: 0;
    padding: 2px 0 12px 14px;
    gap: 14px;
  }
  .nav-item.open > .dropdown{ display: block; }
  .nav-item.open > .dropdown.mega{ display: grid; }
  .dropdown a{ padding: 8px 8px; }
  .nav-toggle{ display: block; }
  .bento{ grid-template-columns: repeat(2, 1fr); }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 460px){
  .bento{ grid-template-columns: 1fr; }
  .footer-grid{ grid-template-columns: 1fr; }
}

:focus-visible{
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

/* -------------------------------------------------------------------
 * 9. Archive / search results (index.php)
 *
 * Minimal styling for the fallback template that handles search
 * results and archives. Uses the same tokens as the rest of the site.
 * ------------------------------------------------------------------- */
.archive-main{
  padding-bottom: 60px;
  min-height: 50vh;
}
.post-list{
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.post-row{
  padding: 20px 0;
  border-bottom: 1px solid var(--border);
}
.post-row:last-child{ border-bottom: none; }
.post-row-title{
  color: var(--ink);
  font-family: var(--font-display);
  font-variation-settings: "wdth" 106;
  font-weight: 600;
  font-size: 19px;
  letter-spacing: -0.015em;
  margin: 0 0 6px;
}
.post-row-title a{
  color: var(--ink);
  text-decoration: none;
}
.post-row-title a:hover{ color: var(--red); }
.post-row-meta{
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 8px;
}
.post-row-excerpt{
  font-size: 14.5px;
  color: var(--ink-soft);
  margin: 0;
  max-width: 68ch;
}
.empty-state{
  font-size: 16px;
  color: var(--ink-soft);
  margin: 0 0 22px;
}
.pagination{ margin-top: 32px; }
.pagination .page-numbers{
  display: inline-block;
  padding: 7px 13px;
  margin-right: 6px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  color: var(--ink-soft);
  text-decoration: none;
}
.pagination .page-numbers:hover{
  border-color: var(--red);
  color: var(--red);
}
.pagination .page-numbers.current{
  background: var(--red);
  border-color: var(--red);
  color: var(--on-red);
}