/*
Theme Name: Pain Sings
Theme URI: https://thepainsingsasong.com/
Author: Vibe Local Marketing
Author URI: https://www.vibelocalmarketing.com/
Description: Block theme for The Pain Sings a Song by Shalanda Shaw. Every colour, size and spacing value is a block attribute, so the editor sidebar genuinely changes the page. This stylesheet carries structure and the component decorations that have no block equivalent.
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pain-sings
Tags: block-theme, full-site-editing, one-column, accessibility-ready, custom-colors, custom-menu, editor-style
*/

/* ==========================================================================
   1. Base
   Colour, font size and spacing are NOT set here — they come from theme.json
   and from per-block attributes so the sidebar controls actually work.
   ========================================================================== */

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

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

body {
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; }

p { text-wrap: pretty; }

h1, h2, h3, h4, h5, h6 { text-wrap: balance; }

::selection { background: var(--wp--preset--color--clay); color: var(--wp--preset--color--ink); }

/* Visible focus for keyboard users on every interactive element. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--wp--preset--color--clay);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 14px 22px;
  background: var(--wp--preset--color--clay);
  color: var(--wp--preset--color--ink);
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
}
.skip-link:focus { left: 0; }

/* ==========================================================================
   2. Width utilities
   Named, readable, and removable from the block Advanced panel. Used only
   where a constrained layout would wrongly centre every child.
   ========================================================================== */

.ps-w-wide   { max-width: 1180px; }
.ps-w-mid    { max-width: 900px; }
.ps-w-narrow { max-width: 760px; }
.ps-w-measure{ max-width: 640px; }
.ps-w-short  { max-width: 520px; }
.ps-center   { margin-left: auto; margin-right: auto; }

/* ==========================================================================
   3. Component block styles
   Registered with register_block_style() so they appear in the Styles panel.
   Each one carries only what no block attribute can express.
   ========================================================================== */

/* -- Poem: preserves the author's line breaks exactly as typed ------------- */
.is-style-ps-poem {
  font-family: var(--wp--preset--font-family--serif);
  font-size: var(--wp--preset--font-size--poem);
  line-height: 1.85;
  white-space: pre-line;
}

/* -- Music note: the gold glyph that opens several sections ---------------- */
.is-style-ps-music-note {
  font-size: 22px;
  line-height: 1;
  margin-bottom: 24px;
}
.is-style-ps-music-note::before {
  content: "\266A";
}

/* -- Underlined link, uppercase, used as a quiet call to action ------------ */
.is-style-ps-link-underline a,
a.is-style-ps-link-underline {
  display: inline-block;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--wp--preset--color--clay);
}

/* -- Framed: the drop shadow used on portraits and covers ------------------
   Two selectors because the same style is offered on two blocks. On an Image
   the shadow belongs to the <img>; on a Cover the <img> is absolutely
   positioned inside a clipping box, so the shadow has to sit on the block.
   -------------------------------------------------------------------------- */
.is-style-ps-framed img { box-shadow: 0 26px 60px rgba(22, 19, 15, 0.3); }
.wp-block-cover.is-style-ps-framed { box-shadow: 0 26px 60px rgba(22, 19, 15, 0.3); }
.wp-block-cover.is-style-ps-framed img { box-shadow: none; }

/* There is deliberately no "portrait crop" image style any more.
   It set `object-position: 50% 25%` in CSS, which locked every portrait's crop
   where only a developer could reach it. Portraits are Cover blocks now, and
   the crop is the focal point picker in the sidebar. */

/* -- Book cover shot ------------------------------------------------------- */
.is-style-ps-cover > img,
.is-style-ps-cover > a > img {
  box-shadow: 0 18px 40px rgba(22, 19, 15, 0.3);
}
.is-style-ps-cover { width: 74%; max-width: 300px; margin-left: auto; margin-right: auto; }
@media (min-width: 860px) {
  .is-style-ps-cover { width: 100%; max-width: none; margin-left: 0; margin-right: 0; }
  .is-style-ps-cover > img { box-shadow: 0 30px 70px rgba(22, 19, 15, 0.32); }
}

/* -- Card: a column in a grid, separated by hairlines ---------------------- */
.is-style-ps-card {
  border-top: 1px solid var(--wp--preset--color--rule);
  padding-top: clamp(26px, 3.4vw, 42px);
  padding-bottom: clamp(26px, 3.4vw, 42px);
}
.is-style-ps-card > *:last-child { margin-top: auto; }

@media (min-width: 640px) {
  .is-style-ps-card {
    border-left: 1px solid var(--wp--preset--color--rule);
    padding-left: clamp(20px, 2.4vw, 30px);
    padding-right: clamp(20px, 2.4vw, 30px);
  }
}

/* On a dark section the hairlines have to lift, not darken. */
.has-ink-background-color .is-style-ps-card,
.has-ink-deep-background-color .is-style-ps-card,
.has-ink-soft-background-color .is-style-ps-card {
  border-color: rgba(246, 242, 237, 0.14);
}

/* -- Stacked rows: talks, credentials, anything list-shaped ---------------- */
.is-style-ps-stack-row {
  padding-top: 22px;
  padding-bottom: 22px;
  border-top: 1px solid var(--wp--preset--color--rule);
}
.is-style-ps-stack-row:first-child { border-top: 0; padding-top: 0; }
.has-ink-background-color .is-style-ps-stack-row {
  border-color: rgba(246, 242, 237, 0.14);
}

/* -- Pull list: a bordered aside of short facts ---------------------------- */
.is-style-ps-pull-list {
  border-left: 1px solid var(--wp--preset--color--rule);
  padding-left: 22px;
}

/* -- Panel: a soft box, and its outlined sibling --------------------------- */
.is-style-ps-panel-outline {
  border: 1px solid var(--wp--preset--color--rule);
}
.has-ink-background-color .is-style-ps-panel-outline {
  border-color: rgba(246, 242, 237, 0.2);
}

/* -- Tag: a bordered chip -------------------------------------------------- */
.is-style-ps-tag {
  padding: 10px 18px;
  border: 1px solid var(--wp--preset--color--rule);
  letter-spacing: 0.08em;
}
.has-ink-background-color .is-style-ps-tag { border-color: rgba(246, 242, 237, 0.2); }

/* -- Empty state: the "coming soon" placeholder ---------------------------- */
.is-style-ps-empty-state {
  border-top: 1px solid var(--wp--preset--color--rule);
  padding-top: clamp(50px, 8vw, 110px);
}

/* -- Content note: the standing trigger warning ---------------------------- */
.is-style-ps-content-note { padding: 22px var(--wp--preset--spacing--70); }
.is-style-ps-content-note .wp-block-group__inner-container,
.is-style-ps-content-note > .wp-block-group { max-width: 1000px; margin: 0 auto; }

/* -- Prose: long-form body copy on blog posts and expanded pages ----------- */
.is-style-ps-prose { line-height: 1.9; }
.is-style-ps-prose > p { margin-bottom: 1.4em; }
.is-style-ps-prose a { border-bottom: 1px solid var(--wp--preset--color--rule); }
.is-style-ps-prose a:hover { border-color: var(--wp--preset--color--clay); }

/* -- Source list: the citations at the foot of an expanded page ------------ */
.is-style-ps-sources { font-size: 14px; line-height: 1.75; }
.is-style-ps-sources li { margin-bottom: 0.7em; }
.is-style-ps-sources a { border-bottom: 1px solid var(--wp--preset--color--rule); overflow-wrap: anywhere; }

/* -- Event: one appearance on the Events page ------------------------------ */
.is-style-ps-event {
  border-top: 1px solid var(--wp--preset--color--rule);
  padding-top: clamp(24px, 3vw, 34px);
  padding-bottom: clamp(24px, 3vw, 34px);
}
.is-style-ps-event:first-of-type { border-top: 0; }

/* -- Hero media -------------------------------------------------------------
   The hero image is a core/cover block, which already supplies the frame, the
   `object-fit: cover` crop, the focal point and the gradient scrim — all of
   them as block attributes the author can change in the sidebar.

   So there is deliberately almost nothing here. Setting object-position or a
   background gradient in this file would override the focal point picker and
   the overlay controls, and the sidebar would look like it worked while doing
   nothing. The only job left for CSS is making the image fill its grid cell.
   -------------------------------------------------------------------------- */

.ps-hero-media { align-self: stretch; }

/* The text column sets the row height on desktop; the image matches it rather
   than leaving a strip of background above or below. */
.ps-hero-media.wp-block-cover { width: 100%; }

@media (max-width: 859px) {
  /* Stacked on phones, the image leads — as the original mobile layout did.
     Cover's min-height is a floor, so a tall portrait is not letterboxed. */
  .ps-hero .ps-hero-media { order: -1; }
}

/* ==========================================================================
   4. Header and navigation
   The Navigation block supplies the markup; this positions it and restores
   the original mobile drawer behaviour.
   ========================================================================== */

.ps-header {
  position: sticky;
  top: 0;
  z-index: 60;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(246, 242, 237, 0.14);
}

.ps-brand-role {
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}

.ps-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container {
  gap: clamp(14px, 2vw, 30px);
}

.ps-header .wp-block-navigation-item__content {
  white-space: nowrap;
}

/* Current page marker, matching the original underline. */
.ps-header .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content,
.ps-header .wp-block-navigation-item.current_page_item > .wp-block-navigation-item__content {
  position: relative;
  color: var(--wp--preset--color--cream);
}
.ps-header .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content::after,
.ps-header .wp-block-navigation-item.current_page_item > .wp-block-navigation-item__content::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -8px;
  height: 1px;
  background: var(--wp--preset--color--clay);
}

/* The open drawer on phones. */
.ps-header .wp-block-navigation__responsive-container.is-menu-open {
  padding: clamp(20px, 5vw, 32px);
}
.ps-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
  gap: 0;
}
.ps-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  display: flex;
  align-items: center;
  min-height: 52px;
  font-size: 15px;
}

/* The hamburger keeps the original square outline. */
.ps-header .wp-block-navigation__responsive-container-open {
  width: 46px;
  height: 46px;
  border: 1px solid rgba(250, 241, 235, 0.28);
}

/* ==========================================================================
   5. Sticky buy bar (phones only)
   ========================================================================== */

.ps-buy-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 70;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-top: 1px solid rgba(250, 241, 235, 0.14);
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
}
.ps-buy-bar .wp-block-button__link { min-height: 44px; padding: 12px 22px; }

body { padding-bottom: 72px; }

@media (min-width: 900px) {
  /* The doubled class is deliberate.
     The buy bar is a flex Group, so WordPress emits its own
     `.wp-container-core-group-is-layout-xxx { display: flex }` rule in a <style>
     block printed AFTER this stylesheet. At equal specificity that rule wins,
     and the phone-only bar stayed visible across the whole desktop layout.
     Repeating the class lifts specificity above it without resorting to
     !important. */
  .ps-buy-bar.ps-buy-bar { display: none; }
  body { padding-bottom: 0; }
}

/* ==========================================================================
   6. Forms
   Rendered by the Pain Sings Core plugin. The markup is server-side, so the
   styling lives here rather than in per-page CSS.
   ========================================================================== */

.ps-form { display: flex; flex-direction: column; gap: 24px; }
.ps-form__row { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 600px) { .ps-form__row { grid-template-columns: 1fr 1fr; } }

.ps-field { display: flex; flex-direction: column; gap: 10px; }
.ps-field__label {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #6E665E;
}

.ps-field input,
.ps-field select,
.ps-field textarea {
  padding: 15px 16px;
  border: 1px solid var(--wp--preset--color--rule);
  background: transparent;
  font-family: var(--wp--preset--font-family--sans);
  font-size: 16px; /* 16px stops iOS zooming the page on focus */
  font-weight: 300;
  color: var(--wp--preset--color--ink);
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.2s ease;
  width: 100%;
}
.ps-field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%233C352E' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 44px;
}
.ps-field textarea { resize: vertical; min-height: 160px; line-height: 1.7; }
.ps-field input:focus,
.ps-field select:focus,
.ps-field textarea:focus { border-color: var(--wp--preset--color--clay); outline: none; }

/* Honeypot — off screen for people, irresistible to bots. */
.ps-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.ps-field__error { color: #A33B2B; font-size: 14px; margin: -8px 0 0; }

.ps-form__status {
  border-left: 3px solid #A33B2B;
  background: rgba(163, 59, 43, 0.06);
  padding: 16px 20px;
  margin-bottom: 26px;
  font-size: 15px;
  line-height: 1.7;
  color: #3C352E;
}
.ps-form__status--ok {
  border-left-color: #4C7A4E;
  background: rgba(76, 122, 78, 0.08);
}
.ps-form__status[hidden] { display: none; }

.ps-form__submit { align-self: flex-start; }

/* Newsletter sign-up, which sits on a dark section. */
.ps-signup { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.ps-signup input[type="email"] {
  flex: 1 1 260px;
  max-width: 340px;
  padding: 16px 18px;
  background: transparent;
  border: 1px solid rgba(246, 242, 237, 0.3);
  color: var(--wp--preset--color--cream);
  font-family: var(--wp--preset--font-family--sans);
  font-size: 16px;
  border-radius: 0;
}
.ps-signup input[type="email"]::placeholder { color: #7C736A; }
.ps-signup input[type="email"]:focus { border-color: var(--wp--preset--color--clay); outline: none; }
.ps-signup .ps-form__status { color: var(--wp--preset--color--cream); flex: 1 1 100%; }

/* ==========================================================================
   7. Grids
   Core's grid layout emits auto-fill; the original design used fixed column
   counts with hairline separators, so those are declared explicitly.
   ========================================================================== */

.ps-grid-2 > .wp-block-group,
.ps-grid-3 > .wp-block-group,
.ps-grid-4 > .wp-block-group { min-width: 0; }

@media (min-width: 640px) {
  .ps-grid-2, .ps-grid-3, .ps-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .ps-grid-2 > *:nth-child(2n + 1),
  .ps-grid-3 > *:nth-child(2n + 1),
  .ps-grid-4 > *:nth-child(2n + 1) { border-left: 0; padding-left: 0; }
}
@media (min-width: 1000px) {
  .ps-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .ps-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }

  .ps-grid-3 > *:nth-child(2n + 1),
  .ps-grid-4 > *:nth-child(2n + 1) {
    border-left: 1px solid var(--wp--preset--color--rule);
    padding-left: clamp(20px, 2.4vw, 30px);
  }
  .ps-grid-3 > *:nth-child(3n + 1),
  .ps-grid-4 > *:nth-child(4n + 1) { border-left: 0; padding-left: 0; }

  .has-ink-background-color .ps-grid-3 > *:nth-child(2n + 1),
  .has-ink-background-color .ps-grid-4 > *:nth-child(2n + 1) { border-left-color: rgba(246, 242, 237, 0.14); }
}

/* Two-column split that stacks on phones. */
.ps-split { display: grid; grid-template-columns: 1fr; gap: clamp(34px, 6vw, 88px); align-items: start; }
.ps-split--center { align-items: center; }
@media (min-width: 860px) {
  .ps-split { grid-template-columns: 1fr 1fr; }
  .ps-split--narrow-first { grid-template-columns: 0.85fr 1.15fr; }
  .ps-split--narrow-second { grid-template-columns: 1.15fr 0.85fr; }
}
@media (max-width: 859px) {
  .ps-split > .ps-order-first { order: -1; }
}

/* ==========================================================================
   8. Post and archive furniture
   ========================================================================== */

.ps-post-meta {
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.wp-block-post-featured-image img { width: 100%; max-height: 60vh; object-fit: cover; }

/* ==========================================================================
   9. Utilities
   ========================================================================== */

.screen-reader-text,
.ps-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.ps-nowrap { white-space: nowrap; }

/* ==========================================================================
   10. Print
   ========================================================================== */

@media print {
  .ps-header, .ps-buy-bar, .skip-link, .wp-block-buttons, .ps-signup { display: none !important; }
  body { background: #fff; color: #000; padding-bottom: 0; font-size: 12pt; }
  .has-ink-background-color,
  .has-ink-deep-background-color,
  .has-blush-background-color { background: #fff !important; color: #000 !important; }
  a { color: #000; text-decoration: underline; }
}