/*
Theme Name: SmallBusinessWeb.Design
Theme URI: https://smallbusinessweb.design
Description: Ocean editorial child theme for SmallBusinessWeb.Design — premium small-business web design out of Hawaiʻi. Built on Twenty Twenty-Five with a custom Fraunces + Inter type system and a navy / cream / coral palette.
Author: SmallBusinessWeb.Design
Template: twentytwentyfive
Version: 0.1.2
Text Domain: smallbusinessweb
Tags: block-theme, hawaii, small-business, editorial
*/

/* ---------- Editorial polish layered on top of theme.json ---------- */

:root {
  --sbw-rule: 1px solid rgba(11, 42, 59, 0.12);
}

.wp-site-blocks {
  overflow-x: hidden;
}

/* Display heading optical refinement */
h1, h2, h3, h4,
.has-display-font-family {
  font-feature-settings: "ss01", "ss02", "kern";
  font-optical-sizing: auto;
}

/* Eyebrow / kicker text helper — applied via .is-style-eyebrow */
.is-style-eyebrow {
  font-family: var(--wp--preset--font-family--body) !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  /* No !important on color: lets dark-section eyebrows override to a lighter coral (e.g. coral-soft on navy). */
  color: var(--wp--preset--color--coral);
}

/* Hairline rule between sections */
.is-style-hairline {
  border: 0 !important;
  border-top: var(--sbw-rule) !important;
  margin: 0 !important;
  height: 1px !important;
}

/* Card style for service / industry / work tiles */
.is-style-card {
  background: var(--wp--preset--color--white);
  border: var(--sbw-rule);
  border-radius: 18px;
  padding: clamp(1.5rem, 2.5vw, 2.25rem);
  transition: transform 240ms ease, box-shadow 240ms ease, border-color 240ms ease;
}
.is-style-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 50px -28px rgba(11, 42, 59, 0.35);
  border-color: rgba(11, 42, 59, 0.22);
}

/* Pull-quote */
.is-style-pull-quote {
  font-family: var(--wp--preset--font-family--display) !important;
  font-style: italic;
  font-weight: 400 !important;
  line-height: 1.18 !important;
  letter-spacing: -0.01em !important;
}

/* Essay byline — author · date · reading time */
.sbw-byline {
  font-family: var(--wp--preset--font-family--body);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--wp--preset--color--muted);
}
.sbw-byline strong {
  color: var(--wp--preset--color--navy);
  font-weight: 600;
}

/* Editorial drop cap — opening of a long-form piece */
.sbw-dropcap::first-letter {
  float: left;
  font-family: var(--wp--preset--font-family--display);
  font-weight: 500;
  font-size: 3.4em;
  line-height: 0.78;
  padding-right: 0.09em;
  margin-top: 0.02em;
  color: var(--wp--preset--color--coral);
}

/* Subtle underline-on-hover for inline links */
.entry-content a:not(.wp-block-button__link):hover {
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

/* Button refinements — primary (navy) + outline variant */
.wp-block-button .wp-block-button__link {
  transition: transform 200ms ease, background-color 200ms ease, color 200ms ease;
}
.wp-block-button .wp-block-button__link:hover {
  transform: translateY(-1px);
}
.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent !important;
  color: var(--wp--preset--color--navy) !important;
  box-shadow: inset 0 0 0 1.5px var(--wp--preset--color--navy);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: var(--wp--preset--color--navy) !important;
  color: var(--wp--preset--color--cream) !important;
}
.wp-block-button.is-style-coral .wp-block-button__link {
  /* Keep the original bright brand coral on buttons (the darker --coral token is for text contrast). */
  background: var(--wp--preset--color--coral-bright) !important;
  color: var(--wp--preset--color--cream) !important;
}

/* FAQ details/summary chrome */
.wp-block-details {
  border-bottom: var(--sbw-rule);
  padding-block: 1.25rem;
}
.wp-block-details summary {
  cursor: pointer;
  font-family: var(--wp--preset--font-family--display);
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.wp-block-details[open] summary { color: var(--wp--preset--color--coral); }

/* Section spacing helpers */
.is-style-section {
  padding-block: clamp(4rem, 9vw, 7.5rem);
}

/* Header / site title editorial weight */
.wp-block-site-title a {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 500;
  letter-spacing: -0.02em;
}

/* Footer fine print */
.site-footer .has-small-font-size,
footer .has-small-font-size {
  color: rgba(247, 241, 232, 0.7);
}

/* Footer links — light on the navy footer (was inheriting navy link color = invisible) */
footer.wp-block-group a:not(.wp-block-button__link) {
  color: var(--wp--preset--color--cream);
  text-decoration-color: rgba(247, 241, 232, 0.35);
  text-underline-offset: 3px;
  transition: color 200ms ease;
}
footer.wp-block-group a:not(.wp-block-button__link):hover {
  color: var(--wp--preset--color--coral-soft);
  text-decoration-color: var(--wp--preset--color--coral-soft);
}

/* ---------- Sticky editorial header ---------- */

.sbw-site-header {
  z-index: 50;
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  background-color: rgba(247, 241, 232, 0.88) !important;
}

.sbw-site-header .wp-block-site-title a {
  text-decoration: none;
}

.sbw-primary-nav .wp-block-navigation-item__content {
  padding: 0.35rem 0.1rem;
  border-bottom: 1px solid transparent;
  transition: border-color 200ms ease, color 200ms ease;
  text-decoration: none !important;
}
.sbw-primary-nav .wp-block-navigation-item__content:hover,
.sbw-primary-nav .current-menu-item .wp-block-navigation-item__content {
  border-bottom-color: var(--wp--preset--color--coral);
  color: var(--wp--preset--color--navy);
}

.sbw-header-cta .wp-block-button__link {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.8125rem;
}

@media (max-width: 800px) {
  .sbw-header-cta { display: none; }
  .sbw-primary-nav .wp-block-page-list { gap: 0.5rem 1rem; }
}

/* Smooth scroll for anchor links */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}

/* Selection color — small thing, big polish */
::selection {
  background: var(--wp--preset--color--coral);
  color: var(--wp--preset--color--cream);
}

/* Image polish — rounded corners on hover lift for the work cards */
figure.wp-block-image {
  overflow: hidden;
  transition: transform 300ms ease, box-shadow 300ms ease;
}
figure.wp-block-image:has(a):hover {
  transform: translateY(-3px);
  box-shadow: 0 26px 60px -28px rgba(11, 42, 59, 0.38);
}

/* Better readability for long-form body copy on the Why page */
.entry-content p {
  text-wrap: pretty;
}
.entry-content h1,
.entry-content h2,
.entry-content h3 {
  text-wrap: balance;
}