/*
Theme Name: Sawtena Child
Theme URI: https://sawtena.com
Description: Kadence child theme for Sawtena. Adds a custom artist profile template.
Author: Sawtena
Template: kadence
Version: 1.5.1
Text Domain: sawtena-child
*/

/* ============================================================
   Sawtena artist profile styles (all scoped under .sawtena-)
   ============================================================ */

.sawtena-artist {
  --sw-bg: #ffffff;
  --sw-ink: #16181d;
  --sw-dim: #6b7280;
  --sw-edge: #e6e8ec;
  --sw-soft: #f6f7f9;
  --sw-accent: #b4884d; /* warm gold, Arabic-music feel */
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 20px 64px;
  color: var(--sw-ink);
}

/* Hero */
.sawtena-hero {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 28px;
  align-items: end;
  padding: 32px 0 24px;
  border-bottom: 1px solid var(--sw-edge);
}
.sawtena-hero__photo {
  width: 240px; height: 240px; border-radius: 14px; object-fit: cover;
  background: var(--sw-soft); box-shadow: 0 8px 30px rgba(0,0,0,.12);
}
.sawtena-hero__photo--placeholder {
  display: flex; align-items: center; justify-content: center;
  font-size: 64px; color: var(--sw-dim); border: 1px solid var(--sw-edge);
}
.sawtena-hero__name { font-size: 2.6rem; line-height: 1.1; margin: 0 0 8px; font-weight: 800; }
.sawtena-hero__years { color: var(--sw-dim); font-size: 1rem; margin: 0 0 14px; }
.sawtena-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 6px; }
.sawtena-chip {
  font-size: .82rem; padding: 4px 12px; border-radius: 20px;
  background: var(--sw-soft); border: 1px solid var(--sw-edge);
  color: var(--sw-ink); text-decoration: none;
}
.sawtena-chip--country { background: #fbf3e6; border-color: #eeddc4; }
.sawtena-chip:hover { border-color: var(--sw-accent); }

/* Share row inside the hero (under the genres) */
.sawtena-hero__share { display: flex; align-items: center; gap: 12px; margin-top: 18px; flex-wrap: wrap; }
.sawtena-share-label { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--sw-dim); font-weight: 700; }
.sawtena-hero__share .sawtena-share { gap: 10px; }
.sawtena-hero__share .sawtena-shareic { width: 40px; height: 40px; }
.sawtena-hero__share .sawtena-shareic img,
.sawtena-hero__share .sawtena-shareic svg { width: 19px; height: 19px; }

/* Sections */
.sawtena-section { padding: 30px 0; border-bottom: 1px solid var(--sw-edge); }
.sawtena-section:last-child { border-bottom: 0; }
.sawtena-section h2 {
  font-size: .82rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--sw-dim); margin: 0 0 16px; font-weight: 700;
}
.sawtena-bio { font-size: 1.08rem; line-height: 1.7; }
.sawtena-bio p { margin: 0 0 1em; }
.sawtena-sources { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 12px; }
.sawtena-sources a { font-size: .9rem; color: var(--sw-accent); text-decoration: none; }
.sawtena-sources a:hover { text-decoration: underline; }

/* Streaming icon buttons (brand-coloured circles) */
.sawtena-streams { display: flex; flex-wrap: wrap; gap: 12px; }
.sawtena-stream {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--c, #333); color: #fff; text-decoration: none;
  transition: transform .08s ease, box-shadow .12s ease;
}
.sawtena-stream:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.18); }
.sawtena-stream img,
.sawtena-stream svg { width: 24px; height: 24px; display: block; }

/* Discography */
.sawtena-discog-group { margin-bottom: 22px; }
.sawtena-discog-group h3 { font-size: 1rem; margin: 0 0 10px; }
.sawtena-discog { list-style: none; margin: 0; padding: 0; }
.sawtena-discog li {
  display: flex; align-items: baseline; gap: 14px; padding: 9px 0;
  border-bottom: 1px dashed var(--sw-edge);
}
.sawtena-discog .yr { width: 56px; color: var(--sw-dim); font-variant-numeric: tabular-nums; font-weight: 600; }
.sawtena-discog .ttl { flex: 1; display: flex; align-items: center; gap: 12px; }
a.ttl { color: inherit; text-decoration: none; }
.sawtena-discog .play-cue {
  flex: none; width: 58px; display: inline-flex; align-items: center; gap: 5px;
  color: var(--sw-dim); font-size: .72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em;
  opacity: .7; transition: color .15s ease, opacity .15s ease;
}
.sawtena-discog .play-cue svg { width: 14px; height: 14px; flex: none; }
.sawtena-discog .ttl-text { flex: 1; }
a.ttl:hover .play-cue, a.ttl:focus-visible .play-cue { color: var(--sw-accent); opacity: 1; }
a.ttl:hover .ttl-text, a.ttl:focus-visible .ttl-text { color: var(--sw-accent); text-decoration: underline; }
.sawtena-discog .badge {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--sw-dim); border: 1px solid var(--sw-edge); border-radius: 6px; padding: 1px 7px;
}

/* Discography "Show all" toggle */
.sawtena-discog li.is-extra { display: none; }
.sawtena-discog-group.is-expanded li.is-extra { display: flex; }
.sawtena-discog-toggle {
  margin-top: 10px; background: none; border: 0; padding: 4px 0;
  color: var(--sw-accent); font: inherit; font-weight: 600; cursor: pointer;
}
.sawtena-discog-toggle:hover { text-decoration: underline; }

/* Videos */
.sawtena-videos { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.sawtena-video { border: 1px solid var(--sw-edge); border-radius: 12px; overflow: hidden; }
.sawtena-video .embed { position: relative; aspect-ratio: 16/9; background: #000; }
.sawtena-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.sawtena-video .cap { padding: 10px 12px; font-size: .9rem; }

/* News */
.sawtena-news { display: grid; gap: 14px; }
.sawtena-news__item { padding: 16px; border: 1px solid var(--sw-edge); border-radius: 12px; background: var(--sw-soft); }
.sawtena-news__date { color: var(--sw-dim); font-size: .8rem; margin: 0 0 4px; }
.sawtena-news__head { font-size: 1.05rem; font-weight: 700; margin: 0 0 6px; }
.sawtena-news__sum { margin: 0 0 8px; line-height: 1.6; }
.sawtena-news__item a { color: var(--sw-accent); text-decoration: none; font-size: .88rem; }

/* Related artists */
.sawtena-related { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }
.sawtena-related a { text-decoration: none; color: var(--sw-ink); text-align: center; }
.sawtena-related img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; background: var(--sw-soft); }
.sawtena-related span { display: block; margin-top: 8px; font-weight: 600; font-size: .92rem; }

/* Share Artist (coloured icon buttons) */
.sawtena-share { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.sawtena-shareic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 50%; padding: 0; cursor: pointer;
  background: #fff; border: 1px solid var(--sw-edge); text-decoration: none;
  transition: transform .08s ease, border-color .12s ease, box-shadow .12s ease;
}
.sawtena-shareic:hover { transform: translateY(-2px); border-color: var(--c, var(--sw-accent)); box-shadow: 0 6px 16px rgba(0,0,0,.12); }
/* Copy-link confirmation: fill the button gold once the URL is on the clipboard. */
.sawtena-shareic.is-copied { background: var(--sw-accent); border-color: var(--sw-accent); }
.sawtena-shareic.is-copied svg { color: #fff !important; stroke: #fff !important; }
.sawtena-shareic img { width: 22px; height: 22px; display: block; }
.sawtena-shareic svg { width: 22px; height: 22px; display: block; }

/* Responsive */
@media (max-width: 680px) {
  .sawtena-hero { grid-template-columns: 1fr; justify-items: start; }
  .sawtena-hero__photo { width: 180px; height: 180px; }
  .sawtena-hero__name { font-size: 2rem; }
}

/* ============================================================
   Sawtena homepage (front-page.php) — scoped under .sawtena-home
   ============================================================ */

.sawtena-home {
  --sw-bg: #ffffff;
  --sw-ink: #16181d;
  --sw-dim: #6b7280;
  --sw-edge: #e6e8ec;
  --sw-soft: #f6f7f9;
  --sw-accent: #b4884d; /* warm gold, Arabic-music feel */
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 20px 72px;
  color: var(--sw-ink);
}

/* Search */
.sw-home__search {
  display: flex; align-items: center; gap: 8px;
  max-width: 620px; margin: 28px auto 0;
  background: var(--sw-soft);
  border: 1px solid var(--sw-edge);
  border-radius: 999px;
  padding: 8px 8px 8px 16px;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.sw-home__search:focus-within {
  border-color: var(--sw-accent);
  box-shadow: none; /* no outer halo — the gold border is the only focus cue */
}
.sw-home__search-icon { width: 20px; height: 20px; color: var(--sw-dim); flex: none; }
.sw-home__search input[type="search"] {
  flex: 1; border: 0; background: transparent; outline: none;
  /* Scales down on narrow viewports so the full placeholder text fits. */
  font-size: clamp(0.72rem, 3vw, 1rem); color: var(--sw-ink); min-width: 0;
}
/* Kill the rectangular focus box Kadence/the browser draws on the <input> itself
   (it sat inside the pill as a lighter rectangle). The pill's gold border is the
   focus indicator instead. */
.sw-home__search input[type="search"]:focus,
.sw-home__search input[type="search"]:focus-visible {
  outline: 0 !important;
  box-shadow: none !important;
  border: 0 !important;
  background: transparent !important;
}
.sw-home__search input[type="search"]::placeholder {
  text-overflow: ellipsis;
}
.sw-home__search button {
  flex: none; border: 0; cursor: pointer;
  background: var(--sw-accent); color: #fff;
  font-size: .95rem; font-weight: 600;
  padding: 9px 20px; border-radius: 999px;
  transition: opacity .12s ease;
}
/* Hover: go to near-black, not the Kadence theme-blue that was bleeding through. */
.sw-home__search button:hover,
.sw-home__search button:focus {
  background-color: #16181d !important;
  color: #fff !important;
  opacity: 1;
}

/* The Kadence/WordPress default search submit (header search modal, block
   search) shipped a theme-blue button that clashed with the brand. Recolour
   every default search button to the gold accent so nothing is "blue from
   nowhere". Hex is hard-coded here because --sw-accent is only defined inside
   the .sawtena-* scopes, and these buttons live in Kadence's own markup. */
.search-submit,
.wp-block-search__button,
.kadence-search-modal .search-submit,
.search-modal .search-submit,
form.search-form button[type="submit"],
form.search-form .search-submit {
  background-color: #b4884d !important;
  border-color: #b4884d !important;
  color: #fff !important;
}
.search-submit:hover,
.wp-block-search__button:hover,
form.search-form button[type="submit"]:hover,
form.search-form .search-submit:hover { opacity: .9; }

/* Hero */
.sw-home__hero {
  text-align: center;
  padding: 48px 0 40px;
  border-bottom: 1px solid var(--sw-edge);
}
.sw-home__title {
  font-size: clamp(2.4rem, 6vw, 3.6rem);
  line-height: 1.05; margin: 0 0 12px; letter-spacing: -.02em;
}
/* Wordmark replaces the "Sawtena" hero text; scales with the viewport. */
.sw-home__wordmark {
  display: inline-block;
  width: clamp(240px, 42vw, 440px);
  height: auto;
  margin: 0 auto;
}
/* Header branding wordmark (top-left). The site-title link is swapped for this
   image by the DOM script in functions.php (see #sawtena-brand-swap). */
.sawtena-header-logo {
  display: block;
  width: auto;
  height: clamp(28px, 4.5vw, 40px);
  max-width: 220px;
}
.site-header a.sawtena-brand-swapped { line-height: 0; }
.sw-home__tagline {
  font-size: 1.15rem; line-height: 1.6; color: var(--sw-dim);
  max-width: 640px; margin: 0 auto 18px;
}
.sw-home__stats { font-size: 1rem; color: var(--sw-ink); margin: 0 0 22px; }
.sw-home__stats strong { color: var(--sw-accent); }
.sw-home__cta {
  display: inline-block; text-decoration: none;
  background: var(--sw-ink); color: #fff;
  font-weight: 600; font-size: 1rem;
  padding: 12px 26px; border-radius: 999px;
  transition: transform .08s ease, box-shadow .12s ease;
}
/* Keep the label white on hover (Kadence's global link-hover colour was turning
   the "Start exploring" text blue). */
.sw-home__cta:hover,
.sw-home__cta:focus { color: #fff !important; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.18); }

/* Sections */
.sw-home__section { padding-top: 44px; }
.sw-home__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; margin-bottom: 20px;
}
.sw-home__head h2 { font-size: 1.5rem; margin: 0; letter-spacing: -.01em; }
.sw-home__more { font-size: .92rem; color: var(--sw-accent); text-decoration: none; white-space: nowrap; }
.sw-home__more:hover { text-decoration: underline; }

/* Card grid — five per row so the homepage rows show 10 cards in 2 rows. */
.sw-home__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 22px 18px;
}
@media (max-width: 900px) { .sw-home__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .sw-home__grid { grid-template-columns: repeat(2, 1fr); } }
.sw-card { text-decoration: none; color: inherit; display: block; }
.sw-card__thumb {
  display: block; position: relative;
  aspect-ratio: 1 / 1; width: 100%;
  border-radius: 14px; overflow: hidden;
  background: var(--sw-soft);
  box-shadow: 0 6px 18px rgba(0,0,0,.10);
  transition: transform .1s ease, box-shadow .12s ease;
}
.sw-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sw-card__ph {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 2.4rem; font-weight: 700; color: var(--sw-accent);
  background: var(--sw-soft);
}
.sw-card:hover .sw-card__thumb { transform: translateY(-4px); box-shadow: 0 12px 26px rgba(0,0,0,.16); }
.sw-card__name {
  display: block; margin-top: 10px;
  font-size: 1rem; font-weight: 600; line-height: 1.3;
}
.sw-card__meta { display: block; font-size: .85rem; color: var(--sw-dim); margin-top: 2px; }
.sw-card__sep { opacity: .55; margin: 0 1px; }

@media (max-width: 680px) {
  .sw-home__grid { gap: 18px 14px; }
  .sw-home__search button { padding: 9px 16px; }
}

/* Very small screens: tighten the pill so the placeholder never truncates. */
@media (max-width: 430px) {
  .sw-home__search { gap: 6px; padding: 6px 6px 6px 12px; }
  .sw-home__search-icon { width: 16px; height: 16px; }
  .sw-home__search button { padding: 8px 12px; font-size: .82rem; }
}

/* Mobile: the search bar's box was overflowing the viewport (button clipped off
   the right edge, so the "box" looked broken). Keep the pill fully inside the
   screen and stop any stray horizontal overflow on the page. */
@media (max-width: 680px) {
  .sawtena-home { overflow-x: clip; }
  .sw-home__search {
    width: auto; max-width: 100%; box-sizing: border-box;
    margin-left: 0; margin-right: 0;
  }
  .sw-home__search input[type="search"] { min-width: 0; }
}

/* ============================================================
   Sawtena search results (search.php) — reuses .sawtena-home
   ============================================================ */

.sawtena-search .sw-search__head { padding: 32px 0 8px; }
.sw-search__title { font-size: clamp(1.5rem, 4vw, 2rem); margin: 0; letter-spacing: -.01em; }
.sw-search__hint  { color: var(--sw-dim); margin: 8px 0 0; }

.sawtena-search .sw-home__grid { margin-top: 20px; }

/* Empty state */
.sw-search__empty { text-align: center; padding: 48px 20px 8px; }
.sw-search__empty-title { font-size: 1.25rem; font-weight: 600; margin: 0 0 6px; }
.sw-search__empty-hint  { color: var(--sw-dim); margin: 0 0 22px; }

/* Pagination (search + artist/taxonomy archives) — extra gap above the pager.
   Note: the_posts_pagination() replaces the default `pagination` class with our
   custom one, so the nav is `.navigation.sw-search__pagination` (no .pagination
   class). Target the class we actually set + `.navigation` so this lands. */
.sawtena-home .sw-search__pagination,
.sawtena-home .navigation { margin-top: 32px; }
.sawtena-home .nav-links {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
}
.sawtena-home .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; padding: 0 12px;
  border: 1px solid var(--sw-edge); border-radius: 10px;
  text-decoration: none; color: var(--sw-ink); font-weight: 600;
  transition: border-color .12s ease, background .12s ease;
}
.sawtena-home .page-numbers:hover { border-color: var(--sw-accent); }
.sawtena-home .page-numbers.current {
  background: var(--sw-accent); border-color: var(--sw-accent); color: #fff;
}
.sawtena-home .page-numbers.dots { border-color: transparent; }

/* ============================================================
   Taxonomy nav (Artists / Genres / Countries), injected into the
   Kadence header row (desktop) and off-canvas drawer (mobile)
   ============================================================ */

.sawtena-tax-nav { display: flex; align-items: center; gap: 4px; }

/* Desktop: sits on the logo's row. Hidden on small screens (uses the drawer). */
/* Stretch the nav to the full header-row height, then centre its links inside
   that height. This vertically centres "Artists / Genres / Countries" against
   the logo regardless of the logo's own box height (align-self:center alone
   didn't take because the injected nav baseline sat above the logo centre). */
.sawtena-tax-nav--desktop {
  margin-left: 22px;
  align-self: stretch;
  display: flex;
  align-items: center;
  /* Optical nudge down: the wordmark's visual mass sits a little below the row
     centre, so pure centring leaves the links looking high. Scales with the
     header size (logo height is clamp(28px..40px)). */
  position: relative;
  top: clamp(3px, 0.7vw, 7px);
}
.site-header .sawtena-tax-nav--desktop .sawtena-tax-nav__link { display: inline-flex; align-items: center; }
.sawtena-tax-nav--desktop .sawtena-tax-nav__link {
  font-size: .95rem; font-weight: 600; text-decoration: none;
  color: #16181d; padding: 6px 12px; border-radius: 8px; line-height: 1;
  white-space: nowrap; transition: color .12s ease, background .12s ease;
}
.sawtena-tax-nav--desktop .sawtena-tax-nav__link:hover {
  color: #b4884d; background: rgba(180,136,77,.10);
}

/* Fallback slim bar (only if no header row was found) */
.sawtena-tax-nav--bar {
  justify-content: center; gap: 6px; flex-wrap: wrap;
  padding: 10px 16px; border-bottom: 1px solid #e6e8ec; background: #fff;
}
.sawtena-tax-nav--bar .sawtena-tax-nav__link {
  font-size: .95rem; font-weight: 600; text-decoration: none;
  color: #16181d; padding: 6px 12px; border-radius: 8px;
}
.sawtena-tax-nav--bar .sawtena-tax-nav__link:hover { color: #b4884d; }

/* Mobile: stacked links inside the off-canvas (kebab) drawer */
.sawtena-tax-nav--mobile {
  display: flex; flex-direction: column; align-items: stretch;
  gap: 0; margin-top: 14px; padding-top: 6px; width: 100%;
  border-top: 1px solid rgba(128,128,128,.3);
}
.sawtena-tax-nav--mobile .sawtena-tax-nav__link {
  display: block; padding: 15px 2px; font-size: 1.2rem; font-weight: 600;
  text-decoration: none; color: inherit; /* matches the drawer's own text colour */
  border-bottom: 1px solid rgba(128,128,128,.25);
}

/* Show desktop nav only on wider screens; drawer handles the rest. */
@media (max-width: 768px) {
  .sawtena-tax-nav--desktop { display: none; }
}

/* ============================================================
   Taxonomy index (/genres/, /countries/) + term archive headers
   ============================================================ */

.sw-tax__head { padding: 34px 0 8px; }
.sw-tax__eyebrow {
  font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--sw-dim); font-weight: 700; margin: 0 0 6px;
}
.sw-tax__title { font-size: clamp(1.7rem, 4vw, 2.4rem); margin: 0; letter-spacing: -.01em; }
.sw-tax__count { color: var(--sw-dim); margin: 8px 0 0; }
.sw-tax__back {
  display: inline-block; margin-top: 12px; font-size: .92rem;
  color: var(--sw-accent); text-decoration: none;
}
.sw-tax__back:hover { text-decoration: underline; }

.sawtena-tax-archive .sw-home__grid,
.sawtena-tax-index .sw-taxlist { margin-top: 22px; }

/* Term chips grid on the index pages */
.sw-taxlist {
  list-style: none; margin: 22px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px;
}
.sw-taxlist__item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 14px 16px; border: 1px solid var(--sw-edge); border-radius: 12px;
  background: var(--sw-soft); text-decoration: none; color: var(--sw-ink);
  min-width: 0; /* let the name truncate instead of stretching the row */
  transition: border-color .12s ease, transform .08s ease, box-shadow .12s ease;
}
.sw-taxlist__item:hover {
  border-color: var(--sw-accent); transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,.08);
}
/* Long labels (e.g. "Egyptian Underground") stay on one line and ellipsize, so
   every chip is the same height and the grid rows line up. Full name on hover
   via the title attribute. */
.sw-taxlist__name {
  font-weight: 600; min-width: 0; flex: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sw-taxlist__count {
  flex: none; font-size: .8rem; font-weight: 700; color: var(--sw-dim);
  min-width: 26px; height: 24px; padding: 0 8px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--sw-edge); border-radius: 999px;
}

/* Grouped genre index: main-genre section heading + subgenre chip grid. */
.sw-genregroup { margin-top: 34px; }
.sawtena-tax-index .sw-genregroup:first-of-type { margin-top: 24px; }
.sw-genregroup__title {
  font-size: 1.15rem; font-weight: 700; letter-spacing: -.01em;
  margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--sw-edge);
}
.sw-genregroup__title a { color: var(--sw-ink); text-decoration: none; }
.sw-genregroup__title a:hover { color: var(--sw-accent); text-decoration: underline; }
.sw-genregroup .sw-taxlist { margin-top: 0; }

/* ============================================================
   Contact form (WPForms) — wrap the shortcode in .sawtena-form
   e.g.  <div class="sawtena-form">[wpforms id="123" title="false"]</div>
   Works with WPForms classic and modern markup.
   ============================================================ */

.sawtena-form {
  /* tokens repeated here: the artist-profile ones are scoped to
     .sawtena-artist, and this block runs on ordinary pages too. */
  --sw-ink: #16181d;
  --sw-dim: #6b7280;
  --sw-edge: #e6e8ec;
  --sw-soft: #f6f7f9;
  --sw-accent: #b4884d;
  --sw-accent-dark: #96702f;

  max-width: 680px;
  margin: 22px 0 0;
  color: var(--sw-ink);
}

/* Modern-markup variables: cheapest way to win against WPForms' own CSS. */
.sawtena-form .wpforms-container {
  --wpforms-field-border-radius: 10px;
  --wpforms-field-background-color: #ffffff;
  --wpforms-field-border-color: var(--sw-edge);
  --wpforms-field-text-color: var(--sw-ink);
  --wpforms-label-color: var(--sw-ink);
  --wpforms-label-sublabel-color: var(--sw-dim);
  --wpforms-label-error-color: #c0392b;
  --wpforms-button-border-radius: 999px;
  --wpforms-button-background-color: var(--sw-accent);
  --wpforms-button-text-color: #ffffff;
  --wpforms-field-size-input-height: 48px;
  --wpforms-field-size-font-size: 1rem;
  margin: 0;
  max-width: 100%;
}

/* Kill WPForms' own outer spacing so the rhythm matches the page. */
.sawtena-form .wpforms-form { margin: 0; }
.sawtena-form .wpforms-field { padding: 0 0 20px; }
.sawtena-form .wpforms-field-container > .wpforms-field:last-of-type { padding-bottom: 8px; }

/* Labels */
.sawtena-form .wpforms-field-label {
  display: block;
  font-size: .92rem;
  font-weight: 700;
  color: var(--sw-ink);
  margin: 0 0 7px;
  line-height: 1.35;
}
.sawtena-form .wpforms-field-sublabel {
  font-size: .78rem;
  font-weight: 600;
  color: var(--sw-dim);
  text-decoration: none;
}
/* WPForms prints a bare red "*" as the required marker. Swap it for the wordier
   "(required)" the design calls for. Purely visual: the input still carries
   aria-required="true", so assistive tech is unaffected. */
.sawtena-form .wpforms-required-label { font-size: 0; text-decoration: none; }
.sawtena-form .wpforms-required-label::after {
  content: "(required)";
  font-size: .78rem;
  font-weight: 600;
  color: var(--sw-dim);
}
.sawtena-form .wpforms-field-description {
  font-size: .84rem;
  color: var(--sw-dim);
  margin-top: 6px;
}

/* Inputs — one width for every field, unlike the reference site */
.sawtena-form .wpforms-field input[type="text"],
.sawtena-form .wpforms-field input[type="email"],
.sawtena-form .wpforms-field input[type="url"],
.sawtena-form .wpforms-field input[type="tel"],
.sawtena-form .wpforms-field select,
.sawtena-form .wpforms-field textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  font: inherit;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--sw-ink);
  background: #fff;
  border: 1px solid var(--sw-edge);
  border-radius: 10px;
  box-shadow: none;
  transition: border-color .12s ease, box-shadow .12s ease;
  /* WPForms sets a fixed height via --wpforms-field-size-input-height. With
     padding + line-height that leaves zero slack, so any font bump (mobile
     Safari, a larger base size) clips descenders inside the select. Let the
     box grow and treat 48px as a floor instead of a ceiling. */
  height: auto;
  min-height: 48px;
}
.sawtena-form .wpforms-field textarea {
  min-height: 170px;
  height: auto;
  resize: vertical;
}
.sawtena-form .wpforms-field select {
  appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 17px 17px;
  /* Safari ignores line-height on a select, so pad it symmetrically instead. */
  padding-top: 0;
  padding-bottom: 0;
}
.sawtena-form .wpforms-field input::placeholder,
.sawtena-form .wpforms-field textarea::placeholder { color: #9aa1ab; }

.sawtena-form .wpforms-field input:focus,
.sawtena-form .wpforms-field select:focus,
.sawtena-form .wpforms-field textarea:focus {
  outline: none;
  border-color: var(--sw-accent);
  box-shadow: 0 0 0 3px rgba(180, 136, 77, .18);
}

/* Validation */
.sawtena-form .wpforms-field input.wpforms-error,
.sawtena-form .wpforms-field select.wpforms-error,
.sawtena-form .wpforms-field textarea.wpforms-error { border-color: #c0392b; }
.sawtena-form label.wpforms-error,
.sawtena-form .wpforms-error-container {
  display: block;
  font-size: .84rem;
  font-weight: 600;
  color: #c0392b;
  margin-top: 6px;
}
.sawtena-form .wpforms-error-container {
  background: #fdf1ef;
  border: 1px solid #f3cfc9;
  border-radius: 10px;
  padding: 12px 14px;
  margin: 0 0 18px;
}

/* Honeypot / anti-spam field must stay hidden */
.sawtena-form .wpforms-field-hp { display: none !important; }

/* Submit */
.sawtena-form .wpforms-submit-container { padding: 6px 0 0; }
.sawtena-form button[type="submit"],
.sawtena-form .wpforms-submit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 30px;
  font: inherit;
  font-size: .98rem;
  font-weight: 700;
  letter-spacing: .01em;
  color: #fff;
  background: var(--sw-accent);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color .12s ease, transform .08s ease, box-shadow .12s ease;
}
.sawtena-form button[type="submit"]:hover,
.sawtena-form .wpforms-submit:hover {
  background: var(--sw-accent-dark);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(180, 136, 77, .32);
}
.sawtena-form button[type="submit"]:focus-visible,
.sawtena-form .wpforms-submit:focus-visible {
  outline: 2px solid var(--sw-accent);
  outline-offset: 3px;
}
.sawtena-form button[type="submit"]:disabled,
.sawtena-form .wpforms-submit[disabled] { opacity: .6; cursor: default; transform: none; box-shadow: none; }

/* Success message */
.sawtena-form .wpforms-confirmation-container-full,
.sawtena-form div[submit-success] > .wpforms-confirmation-container-full {
  background: var(--sw-soft);
  border: 1px solid var(--sw-edge);
  border-left: 3px solid var(--sw-accent);
  border-radius: 10px;
  padding: 18px 20px;
  color: var(--sw-ink);
  margin: 0;
}
.sawtena-form .wpforms-confirmation-container-full p:last-child { margin-bottom: 0; }

/* Small screens */
@media (max-width: 600px) {
  .sawtena-form .wpforms-field { padding-bottom: 16px; }
  .sawtena-form .wpforms-field textarea { min-height: 140px; }
  .sawtena-form button[type="submit"],
  .sawtena-form .wpforms-submit { width: 100%; justify-content: center; }
}

/* ============================================================
   Footer links (About / Privacy Policy), injected next to the
   copyright line by the sawtena-footer-nav script.
   ============================================================ */

/* Kadence renders .site-info as a flex row whose inner wrap carries
   flex-grow: 1, so anything appended after it gets shoved to the far right.
   Collapse that growth and centre the copyright + link as a single group. */
.site-footer .site-info {
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 14px;
}
.site-footer .site-info .site-info-inner { flex: 0 1 auto; }
.site-footer .site-info .footer-html-inner p { margin: 0; }
/* Without this the nav stretches to fill the row (measured 1101px of a 1242px
   row) and the copyright stays pinned left. Size it to its content instead. */
.site-footer .site-info > .sawtena-footer-nav { flex: 0 0 auto; width: auto; }

.sawtena-footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px 14px;
  margin-top: 0;
}
.sawtena-footer-nav::before {
  content: "\00B7";
  opacity: .45;
}
.sawtena-footer-nav__link {
  font-size: .88rem;
  color: inherit;
  opacity: .72;
  text-decoration: none;
  transition: opacity .12s ease, color .12s ease;
}
.sawtena-footer-nav__link:hover,
.sawtena-footer-nav__link:focus-visible {
  opacity: 1;
  color: #b4884d;
  text-decoration: underline;
}

/* ============================================================
   Static page helpers (About / Privacy Policy).
   push-pages.js emits these classNames on the paragraph blocks.
   ============================================================ */

.sawtena-lede {
  font-size: 1.14rem;
  line-height: 1.65;
  color: #3d434c;
}
.sawtena-eff,
.sawtena-note {
  font-size: .9rem;
  color: #6b7280;
}
.sawtena-eff { margin-bottom: 1.6em; }

/* ============================================================
   "Send us a message" prompt at the foot of an artist profile.
   ============================================================ */

.sawtena-cta {
  border-bottom: 0;
  padding-top: 24px;
}
.sawtena-cta__text {
  max-width: 720px;
  margin: 0;
  font-size: .95rem;
  line-height: 1.7;
  color: var(--sw-dim);
}
.sawtena-cta__link {
  color: var(--sw-accent);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}
.sawtena-cta__link:hover,
.sawtena-cta__link:focus-visible { color: var(--sw-ink); }

/* Anchor target on the About page: keep the heading clear of Kadence's
   header instead of tucking it underneath after the jump. */
#get-in-touch { scroll-margin-top: 110px; }