/*
Theme Name: SEEN. by Seleeta Walker
Theme URI: https://seenbyseleeta.com
Author: Amax Marketing
Author URI: https://amaxmarketing.co.uk
Description: Bespoke editorial-luxury theme for SEEN. by Seleeta Walker: independent leadership and culture advisory. Four symbolic worlds (architecture, geology, minerals, nautical), IvyPresto Display and Freight Text Pro, gold on warm near-black. All page content is editable through wp-admin custom fields (ACF). Requires the free Advanced Custom Fields plugin.
Version: 1.0.2
Requires at least: 6.2
Requires PHP: 8.0
License: Proprietary. Commissioned work for SEEN. by Seleeta Walker Ltd.
Text Domain: seen
*/

/*
  The full design system lives in assets/site.css (enqueued by functions.php).
  This file only carries the theme header that WordPress requires, plus a few
  rules that only matter once the site is running inside WordPress (admin bar,
  native menu current-item state, WYSIWYG output).
*/

/* Keep the fixed header clear of the WP admin bar when logged in. */
body.admin-bar header.site { top: 32px; }
@media screen and (max-width: 782px){
  body.admin-bar header.site { top: 46px; }
}

/* WordPress adds current-menu-item to the active nav link: mirror the concept's is-current. */
.primary .current-menu-item > a,
.primary .current-menu-ancestor > a,
nav.primary a.is-current,
footer.site nav a.is-current { color: var(--gold); }

/* Editor-generated content inside Insights posts and legal pages. */
.entry-content > * + * { margin-top: 1.1em; }
.entry-content h2 { font-family: var(--display); font-size: clamp(1.6rem, 2.4vw, 2.2rem); margin-top: 2em; }
.entry-content h3 { font-family: var(--display); font-size: clamp(1.3rem, 1.8vw, 1.6rem); margin-top: 1.6em; }
.entry-content a { color: var(--bronze); text-decoration: underline; text-underline-offset: 3px; }
.entry-content ul, .entry-content ol { padding-left: 1.4em; }
.entry-content li + li { margin-top: 0.4em; }
.entry-content img { max-width: 100%; height: auto; border-radius: 4px; }
.entry-content blockquote {
  font-family: var(--display);
  font-size: clamp(1.4rem, 2vw, 1.8rem);
  line-height: 1.35;
  border-left: 3px solid var(--gold);
  padding-left: 1.5rem;
  margin: 2rem 0;
}

/* -------------------------------------------------------------------------
   WordPress-only page furniture (Insights index, single post, legal pages,
   contact form status). The concept CSS supplies the shared tokens and hero.
   ---------------------------------------------------------------------- */

/* A narrower measure for long-form reading (single Insight, legal pages). */
.wrap-narrow {
  width: min(760px, 90vw);
  margin-inline: auto;
  padding-block: var(--space-4, 4rem);
}
.page-body .wrap-narrow { padding-block: clamp(3rem, 6vw, 6rem); }

/* Contact form status banner. */
.form-banner {
  border-radius: 6px;
  padding: 0.9rem 1.1rem;
  margin-bottom: 1.6rem;
  font-size: 0.95rem;
  line-height: 1.5;
}
.form-banner--good {
  background: color-mix(in srgb, var(--gold) 16%, transparent);
  border: 1px solid var(--gold);
  color: var(--ink);
}
.form-banner--bad {
  background: color-mix(in srgb, #b4442f 14%, transparent);
  border: 1px solid #b4442f;
  color: var(--ink);
}

/* Insights index grid. */
.insights-index { padding-block: clamp(3rem, 6vw, 6rem); }
.insights-index .insights-intro { max-width: 68ch; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.insights-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: clamp(1.6rem, 3vw, 2.6rem);
}
.insight-card { display: flex; flex-direction: column; }
.insight-media {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  aspect-ratio: 16 / 10;
  margin-bottom: 1.2rem;
}
.insight-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.insight-copy .meta {
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bronze);
}
.insight-copy h3 {
  font-family: var(--display);
  font-size: clamp(1.3rem, 1.8vw, 1.7rem);
  line-height: 1.2;
  margin: 0.5rem 0 0.7rem;
}
.insight-copy h3 a { color: var(--ink); text-decoration: none; }
.insight-copy h3 a:hover { color: var(--gold); }
.insight-copy p { color: var(--ink-soft); margin-bottom: 0.8rem; }

/* Single Insight footer + pagination. */
.insight-foot { margin-top: clamp(2.5rem, 5vw, 4rem); }
.insights-pagination { margin-top: clamp(2.5rem, 5vw, 4rem); }
.insights-pagination .page-numbers {
  display: inline-block;
  padding: 0.45em 0.85em;
  margin: 0 0.15em;
  border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
  border-radius: 4px;
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 0.9rem;
}
.insights-pagination .page-numbers.current,
.insights-pagination .page-numbers:hover {
  border-color: var(--gold);
  color: var(--gold);
}