/*
Theme Name: Smiley Starfish Base
Theme URI: https://smileystarfish.co.uk/
Description: Lean GeneratePress child theme for Smiley Starfish brochure websites. Mr B site configuration.
Author: Smiley Starfish Studio
Template: generatepress
Version: 0.3.3
Text Domain: smiley-starfish-base
*/

/*
 * Smiley Starfish design tokens.
 * Colours are defined once in theme.json; these aliases keep component CSS readable.
 */
:root {
  --ss-primary: var(--wp--preset--color--ss-primary, #17252d);
  --ss-primary-dark: var(--wp--preset--color--ss-primary-dark, #101a20);
  --ss-accent: var(--wp--preset--color--ss-accent, #667861);
  --ss-accent-dark: var(--wp--preset--color--ss-accent-dark, #50604d);
  --ss-bg: var(--wp--preset--color--ss-background, #f6f3ed);
  --ss-surface: var(--wp--preset--color--ss-surface, #ffffff);
  --ss-text: var(--wp--preset--color--ss-text, #343b3e);
  --ss-muted: var(--wp--preset--color--ss-muted, #667074);
  --ss-border: var(--wp--preset--color--ss-border, #dcd8cf);

  --ss-content: 1120px;
  --ss-wide: 1280px;
  --ss-reading: 720px;
  --ss-gutter: clamp(1.25rem, 3vw, 2rem);
  --ss-section-y: clamp(3.5rem, 7vw, 6rem);
  --ss-gap: clamp(1.25rem, 2.5vw, 2.5rem);
  --ss-radius-sm: 4px;
  --ss-radius: 6px;
}

html {
  scroll-behavior: smooth;
}

body,
button,
input,
select,
textarea {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body {
  color: var(--ss-text);
  background: var(--ss-bg);
  line-height: 1.65;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--ss-text);
  line-height: 1.12;
  letter-spacing: -0.025em;
}

h1 {
  font-size: clamp(2.4rem, 6vw, 5.4rem);
}

h2 {
  font-size: clamp(2rem, 4vw, 3.5rem);
}

h3 {
  font-size: clamp(1.35rem, 2vw, 1.8rem);
}

.site-content {
  padding-top: 0;
}

.entry-content {
  margin-top: 0;
}

.ss-eyebrow {
  margin-bottom: 0.75rem;
  color: var(--ss-primary-dark);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.wp-block-button.ss-button .wp-block-button__link {
  border: 2px solid var(--ss-primary-dark);
  border-radius: 999px;
  padding: 0.9rem 1.35rem;
  background: var(--ss-primary-dark);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

.wp-block-button.ss-button .wp-block-button__link:hover {
  border-color: var(--ss-primary);
  background: var(--ss-primary);
  color: #fff;
}

.wp-block-button.ss-button.is-style-outline .wp-block-button__link {
  background: transparent;
  color: var(--ss-primary-dark);
}

.wp-block-button.ss-button.is-style-outline .wp-block-button__link:hover {
  background: var(--ss-primary-dark);
  color: #fff;
}

.wp-block-button.ss-button .wp-block-button__link:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--ss-accent);
  outline-offset: 3px;
}

/* Hero */
.ss-hero {
  padding: var(--ss-section-y) 1.25rem;
  background: var(--ss-bg);
}

.ss-hero__grid {
  gap: clamp(2rem, 5vw, 5rem);
}

.ss-hero h1 {
  max-width: 11ch;
  margin-bottom: 1.25rem;
}

.ss-hero__lead {
  max-width: 42rem;
  color: var(--ss-muted);
}

.ss-hero__placeholder {
  min-height: 27.5rem;
  display: grid;
  place-items: center;
  padding: 2rem;
  border-radius: var(--ss-radius);
  background: linear-gradient(135deg, var(--ss-primary-dark), var(--ss-primary));
  color: #fff;
  box-shadow: var(--ss-shadow);
}

/* Trust strip */
.ss-trust-strip {
  padding: 1.4rem 1.25rem;
  background: var(--ss-primary-dark);
  color: #fff;
}

.ss-trust-strip p {
  margin-bottom: 0.3rem;
  color: #fff;
}

.ss-trust-strip__title {
  font-weight: 700;
}

.ss-trust-strip__detail {
  opacity: 0.82;
  font-size: 0.92rem;
}

/* Services */
.ss-services {
  padding: var(--ss-section-y) 1.25rem;
  background: var(--ss-surface);
}

.ss-services__intro {
  max-width: 48rem;
  margin-bottom: 2rem;
}

.ss-services__card {
  padding: clamp(1.4rem, 3vw, 2.2rem);
  border: 1px solid var(--ss-border);
  border-radius: var(--ss-radius);
  background: var(--ss-surface);
}

.ss-services__card p:last-child {
  margin-bottom: 0;
  color: var(--ss-muted);
}

/* Quote CTA */
.ss-quote-cta {
  padding: var(--ss-section-y) 1.25rem;
  background: var(--ss-primary);
  color: #fff;
}

.ss-quote-cta h2,
.ss-quote-cta p {
  color: #fff;
}

.ss-quote-cta__inner {
  max-width: 51.25rem;
  margin-inline: auto;
}

.ss-quote-cta .wp-block-button.ss-button .wp-block-button__link {
  border-color: #fff;
  background: #fff;
  color: var(--ss-primary-dark);
}

.ss-quote-cta .wp-block-button.ss-button .wp-block-button__link:hover {
  border-color: var(--ss-primary-dark);
  background: var(--ss-primary-dark);
  color: #fff;
}

@media (max-width: 781px) {
  :root {
    --ss-section-y: 3.5rem;
  }

  .ss-hero__placeholder {
    min-height: 17.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .wp-block-button.ss-button .wp-block-button__link {
    transition: none;
  }
}


/* ==========================================================================
   Smiley Starfish reusable card system — v0.3.0
   Permanent baseline rule:
   - card rows are equal height
   - title zones align
   - body zones consume remaining space
   - actions sit on the common bottom edge
   - stacked mobile cards return to natural height
   ========================================================================== */

.ss-card-grid {
  display: grid;
  gap: var(--ss-card-gap, clamp(1rem, 2.5vw, 2rem));
  grid-auto-rows: 1fr;
  align-items: stretch;
}

.ss-card-grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ss-card-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ss-card {
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.ss-card__head,
.ss-card__body,
.ss-card__actions {
  margin: 0;
}

.ss-card__title {
  min-block-size: 2lh;
  margin-block: 0;
  text-wrap: balance;
}

.ss-card__body {
  flex: 1 1 auto;
}

.ss-card__body > :last-child,
.ss-card__actions > :last-child {
  margin-bottom: 0;
}

.ss-card__actions {
  margin-top: auto;
}

@media (max-width: 781px) {
  .ss-card-grid--2,
  .ss-card-grid--3 {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }

  .ss-card__title {
    min-block-size: 0;
  }
}


/* ==========================================================================
   Mr B identity — site configuration only
   ========================================================================== */

body {
  font-size: 1.0625rem;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--ss-primary);
  font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  font-weight: 600;
  letter-spacing: -0.02em;
}

h1 { font-size: clamp(2.5rem, 5.5vw, 3.5rem); }
h2 { font-size: clamp(2rem, 4vw, 2.5rem); }
h3 { font-size: clamp(1.5rem, 2.5vw, 1.6875rem); }

.site-header {
  background: var(--ss-surface);
  border-bottom: 1px solid var(--ss-border);
}

.site-branding .main-title,
.site-branding .site-description,
.main-navigation a {
  color: var(--ss-primary);
}

.main-navigation,
.main-navigation ul ul {
  background: var(--ss-surface);
}

.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li[class*="current-menu-"] > a {
  color: var(--ss-accent-dark);
  background: transparent;
}

.site-footer,
.site-info {
  background: var(--ss-primary);
  color: #fff;
}

.site-footer a,
.site-info a {
  color: #fff;
}

.ss-eyebrow {
  color: var(--ss-primary);
}

.wp-block-button.ss-button .wp-block-button__link {
  border-color: var(--ss-accent);
  border-radius: var(--ss-radius);
  background: var(--ss-accent);
}

.wp-block-button.ss-button .wp-block-button__link:hover {
  border-color: var(--ss-accent-dark);
  background: var(--ss-accent-dark);
}

.wp-block-button.ss-button.is-style-outline .wp-block-button__link:hover {
  background: var(--ss-primary);
}

/* Home */
.ss-home-section {
  padding: var(--ss-section-y) var(--ss-gutter);
}

.ss-home-section--surface { background: var(--ss-surface); }
.ss-home-section--warm { background: var(--ss-bg); }

.ss-home-intro {
  max-width: 46rem;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

.ss-home-intro p:last-child {
  color: var(--ss-muted);
}

.ss-home-hero__identity {
  min-height: 28rem;
  display: grid;
  place-items: center;
  padding: clamp(2rem, 5vw, 4rem);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--ss-radius);
  background:
    linear-gradient(145deg, rgba(255,255,255,.05), rgba(255,255,255,0)),
    var(--ss-primary);
  color: #fff;
  text-align: center;
}

.ss-home-hero__mark {
  margin: 0;
  color: #fff;
  font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  font-size: clamp(5rem, 12vw, 9rem);
  font-weight: 600;
  line-height: .9;
  letter-spacing: -.06em;
}

.ss-home-hero__identity p:last-child {
  margin: 1rem 0 0;
  color: rgba(255,255,255,.78);
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.ss-home-card {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid var(--ss-border);
  border-radius: var(--ss-radius);
  background: var(--ss-surface);
}

.ss-home-card .ss-card__body {
  color: var(--ss-muted);
}

.ss-home-process {
  counter-reset: ss-step;
}

.ss-home-process .ss-home-card {
  position: relative;
  padding-top: 4.5rem;
}

.ss-home-process .ss-home-card::before {
  counter-increment: ss-step;
  content: "0" counter(ss-step);
  position: absolute;
  top: 1.5rem;
  left: 1.5rem;
  color: var(--ss-accent);
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .08em;
}

.ss-home-split .ss-home-card:first-child {
  background: var(--ss-primary);
  border-color: var(--ss-primary);
}

.ss-home-split .ss-home-card:first-child h3,
.ss-home-split .ss-home-card:first-child p,
.ss-home-split .ss-home-card:first-child a {
  color: #fff;
}

.ss-home-split .ss-home-card:first-child .ss-card__body {
  color: rgba(255,255,255,.82);
}

.ss-home-proof {
  padding: clamp(2rem, 5vw, 3.5rem);
  border-left: 4px solid var(--ss-accent);
  background: var(--ss-surface);
}

.ss-home-proof p {
  max-width: 44rem;
  margin-bottom: 0;
  color: var(--ss-muted);
}

.ss-home-areas {
  background: var(--ss-primary-dark);
  color: #fff;
}

.ss-home-areas h2,
.ss-home-areas p {
  color: #fff;
}

.ss-home-areas p {
  max-width: 46rem;
  opacity: .84;
}

@media (max-width: 781px) {
  .ss-home-hero__identity {
    min-height: 18rem;
  }
}


/* ==========================================================================
   Smiley Starfish centred split layout — v0.3.2
   Split sections form a bounded pair around the page centre rather than
   anchoring content to opposite edges of the available width.
   ========================================================================== */

.ss-split,
.ss-hero .ss-hero__grid {
  width: 100%;
  max-width: 64rem;
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(14rem, .85fr);
  align-items: center;
  justify-content: center;
  gap: clamp(1.5rem, 4vw, 3.5rem);
}

.ss-split > *,
.ss-hero .ss-hero__grid > * {
  min-width: 0;
}

@media (max-width: 781px) {
  .ss-split,
  .ss-hero .ss-hero__grid {
    max-width: 42rem;
    grid-template-columns: 1fr;
  }
}


/* ==========================================================================
   Smiley Starfish unified section frame — v0.3.3
   Permanent baseline rule:
   every brochure-page section shares the same centred horizontal frame.
   ========================================================================== */

.ss-frame,
.ss-home-section > .alignwide,
.ss-trust-strip > .alignwide,
.ss-quote-cta > .alignwide,
.ss-home-areas > .alignwide,
.ss-hero > .alignwide {
  width: min(100% - (2 * var(--ss-gutter)), var(--ss-content));
  max-width: var(--ss-content);
  margin-inline: auto;
}

/* Wider compositions still remain centred inside the same page system. */
.ss-frame--wide,
.ss-card-grid,
.ss-home-split {
  width: 100%;
  max-width: var(--ss-content);
  margin-inline: auto;
}

/* Split pairs belong to the shared content frame, not the viewport edges. */
.ss-home-split {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Keep service/process groups visually centred as one composition. */
.ss-home-section .ss-card-grid {
  justify-content: center;
}

/* Trust strip uses the same bounded width instead of stretching edge-to-edge. */
.ss-trust-strip {
  padding-inline: var(--ss-gutter);
}

/* Full-width background sections remain full bleed; only their contents are bounded. */
.ss-home-section,
.ss-trust-strip,
.ss-home-areas,
.ss-quote-cta,
.ss-hero {
  width: 100%;
}

@media (max-width: 781px) {
  .ss-frame,
  .ss-home-section > .alignwide,
  .ss-trust-strip > .alignwide,
  .ss-quote-cta > .alignwide,
  .ss-home-areas > .alignwide,
  .ss-hero > .alignwide {
    width: min(100% - (2 * var(--ss-gutter)), var(--ss-content));
  }

  .ss-home-split {
    grid-template-columns: 1fr;
  }
}