/*
Theme Name:   Surena Studio
Theme URI:    https://surena.studio
Description:  Standalone block theme for Surena Studio, a clarity studio.
              Brand tokens live in theme.json; this file carries only what
              theme.json cannot express. No parent theme required.
Author:       Surena Studio
Version:      2.1.0
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 7.4
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  surena-studio
Tags:         block-theme, full-site-editing, business, portfolio, one-column
*/

/* ---------------------------------------------------------------
   1. Eyebrow labels — the letterspaced brass kicker above headings.
   Usage: add the class "eyebrow" to a paragraph block.
   --------------------------------------------------------------- */
.eyebrow {
  font-family: var(--wp--preset--font-family--body);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--wp--preset--color--brass);
  margin-bottom: 0.75rem;
}

/* Short brass rule under a section heading.
   Usage: add the class "brass-rule" to a heading block. */
.brass-rule::after {
  content: "";
  display: block;
  width: 64px;
  height: 2px;
  background: var(--wp--preset--color--brass);
  margin-top: 0.9rem;
}

/* ---------------------------------------------------------------
   2. The resolving motif — scatter becoming signal.
   Usage: add the class "motif" to a Group block, or "motif-divider"
   to an empty Group used as a section break.
   Always horizontal, always left to right, never mirrored.
   --------------------------------------------------------------- */
.motif-divider {
  height: 90px;
  background-image: url("assets/img/motif-divider.svg");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
  margin-block: var(--wp--preset--spacing--50);
}

@media (max-width: 600px) {
  .motif-divider { height: 56px; }
}

/* ---------------------------------------------------------------
   3. Ink sections — full-bleed dark bands.
   Usage: Group block, background Ink, class "ink-section".
   --------------------------------------------------------------- */
.ink-section {
  color: var(--wp--preset--color--paper);
  padding-block: var(--wp--preset--spacing--60);
}
.ink-section h1,
.ink-section h2,
.ink-section h3,
.ink-section h4 { color: var(--wp--preset--color--paper); }
.ink-section .eyebrow { color: var(--wp--preset--color--brass-light); }
.ink-section a { color: var(--wp--preset--color--brass-light); }
.ink-section .brass-rule::after { background: var(--wp--preset--color--brass-light); }

/* ---------------------------------------------------------------
   4. Engagement cards — the four offers.
   Usage: Columns > Column, class "offer-card".
   --------------------------------------------------------------- */
.offer-card {
  background: var(--wp--preset--color--bone);
  border-top: 2px solid var(--wp--preset--color--brass);
  padding: 2rem 1.75rem 2.25rem;
  height: 100%;
}
.offer-card h3 { margin-top: 0; }
.offer-card .label {
  font-family: var(--wp--preset--font-family--body);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--wp--preset--color--brass);
  margin-bottom: 0.25rem;
}
.offer-card p + .label { margin-top: 1.1rem; }

/* ---------------------------------------------------------------
   5. Measure control. Long-form prose stays readable.
   --------------------------------------------------------------- */
.entry-content > p,
.entry-content > ul,
.entry-content > ol { max-width: 68ch; }

/* ---------------------------------------------------------------
   6. Accessibility guards.
   Brass fails WCAG AA on Paper below ~24px, so it is never used for
   body text. These rules keep that true even if someone tries.
   --------------------------------------------------------------- */
p.has-brass-color,
li.has-brass-color {
  font-size: max(1.5rem, var(--wp--preset--font-size--heading));
}

:where(a:focus-visible),
:where(button:focus-visible),
:where(.wp-block-button__link:focus-visible) {
  outline: 2px solid var(--wp--preset--color--brass);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------------
   7. Header and footer polish.
   --------------------------------------------------------------- */
.site-header .custom-logo { max-height: 40px; width: auto; }

.site-footer {
  background: var(--wp--preset--color--ink);
  color: var(--wp--preset--color--slate);
}
.site-footer a { color: var(--wp--preset--color--brass-light); }