/*
Theme Name: PsychologyWit FSE
Theme URI: https://psychwit.com
Author: Nikola Kostov
Author URI: https://www.linkedin.com/in/nikola-kostov/
Description: A full site editing block theme for PsychologyWit, built to the PsychologyWit design system: teal and coral brand, Poppins headings, Mulish body copy.
Requires at least: 6.8
Tested up to: 7.0
Requires PHP: 7.4
Version: 2.1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: psychwit-fse
Tags: blog, one-column, block-patterns, full-site-editing, block-templates, custom-colors, custom-menu, featured-images, threaded-comments, translation-ready

PsychologyWit FSE is licensed under the GPL, like WordPress itself.
*/


/*
 * Design tokens and block styling live in theme.json.
 * Only rules theme.json cannot express belong here.
 */

/* Logo mark — the concentric coral/teal rings from the style guide. */
.psychwit-logo-mark {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  line-height: 0;
}

/* Footer logo sits in a white pill, per the SiteFooter design. */
.psychwit-footer-logo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--wp--preset--color--base);
  padding: 10px 18px;
  border-radius: var(--wp--custom--radius--input);
  text-decoration: none;
}

.psychwit-footer-logo span {
  font-family: var(--wp--preset--font-family--poppins);
  font-weight: 600;
  font-size: 20px;
  color: var(--wp--preset--color--teal);
  line-height: 1;
}

/* Footer link lists: plain, stacked, 11px apart per the design. */
.psychwit-footer .psychwit-footer-list,
.psychwit-footer .wp-block-categories {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

/* Social icons sit 14px apart. */
.psychwit-footer .wp-block-social-links {
  gap: 14px;
}

.psychwit-footer a {
  text-decoration: none;
  transition: color 0.15s;
}

/* Social icons lift on hover, matching the design's translateY. */
.psychwit-footer .wp-block-social-link {
  transition: transform 0.15s;
}

.psychwit-footer .wp-block-social-link:hover {
  transform: translateY(-3px);
}

/* Article cards use the design's soft shadow rather than a border. */
.psychwit-card {
  border-radius: var(--wp--custom--radius--card);
  overflow: hidden;
  box-shadow: var(--wp--custom--shadow--card);
  background: var(--wp--preset--color--base);
}

/* Checkboxes use the teal accent from the form spec. */
input[type='checkbox'],
input[type='radio'] {
  accent-color: var(--wp--preset--color--teal);
}

/* --------------------------------------------------------------------- Hero */

.psychwit-hero__title {
  font-size: 42px;
  line-height: 1.15;
  letter-spacing: -0.5px;
}

/* Visually hidden, still read by assistive tech. */
.screen-reader-text {
  border: 0;
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

/* Author bio card. */
.psychwit-author-bio {
  border-radius: 20px;
  padding: 28px;
}

/* Uploaded author photos may not be square; fill the circle instead of squashing. */
img.avatar {
  object-fit: cover;
}

/* The 404 "4 (logo) 4" lockup. */
.psychwit-404-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 8px;
}

.psychwit-404-mark span {
  font-family: var(--wp--preset--font-family--poppins);
  font-weight: 700;
  font-size: 96px;
  line-height: 1;
  color: var(--wp--preset--color--ink);
  letter-spacing: -2px;
}

.psychwit-404-mark svg {
  display: block;
}

/* --------------------------------------------------------------- Empty state */

.psychwit-empty {
  text-align: center;
}

/* Uppercase meta label treatment (Caption · 13/600). */
.psychwit-eyebrow {
  font-family: var(--wp--preset--font-family--poppins);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

/* =================================================================== Legal */

/* Hero pill nav (Privacy / Terms). */
.psychwit-legal-nav {
  margin-top: 26px;
}

.psychwit-legal-pill {
  margin: 0;
}

.psychwit-legal-pill a {
  display: inline-block;
  padding: 9px 20px;
  border-radius: var(--wp--custom--radius--pill);
  font-family: var(--wp--preset--font-family--poppins);
  font-weight: 500;
  background: rgba(255, 255, 255, 0.7);
  color: var(--wp--preset--color--ink);
  text-decoration: none;
  transition: background 0.15s;
}

.psychwit-legal-pill a:hover,
.psychwit-legal-pill a[aria-current="page"] {
  background: var(--wp--preset--color--base);
}

/* Two-column layout: sticky TOC + prose. */
.psychwit-legal-aside {
  flex-grow: 0;
}

/* Stack the TOC above the prose on narrow screens. */
@media (max-width: 781px) {
  .psychwit-legal-columns {
    flex-wrap: wrap;
  }
  .psychwit-toc {
    position: static;
  }
}

/* -------------------------------------------------------------- Image slots
 *
 * The design sizes these as fixed-height crops - hero 340px, about story
 * 420px - rather than letting the source file's aspect ratio decide. Without
 * it the image ends up shorter than the prose beside it and the row reads
 * lopsided, with dead space above and below the picture.
 */

.psychwit-hero__image,
.psychwit-about__story {
  margin: 0;
}

.psychwit-hero__image img,
.psychwit-about__story img {
  display: block;
  width: 100%;
  object-fit: cover;
}

.psychwit-hero__image img {
  height: 340px;
}

.psychwit-about__story img {
  height: 420px;
}

/* Stacked columns get shorter crops so the image never dominates the fold. */
@media (max-width: 781px) {
  .psychwit-hero__image img {
    height: 260px;
  }

  .psychwit-about__story img {
    height: 320px;
  }
}

/* --------------------------------------------------------- Guide pages */

/* Hero check bullets, inline and wrapping. */
.psychwit-guide-points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
}

.psychwit-guide-points li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 15.5px;
  color: #3f3d33;
}

/* The PDF cover, drawn at its 900x1200 print size and scaled to 340px so
 * the type stays true to the printed sheet. A tinted offset slab behind. */
.psychwit-guide-cover {
  position: relative;
  width: 340px;
  max-width: 100%;
  margin: 0 auto;
}

.psychwit-guide-cover::before {
  content: '';
  position: absolute;
  inset: 14px -14px -14px 14px;
  border-radius: 18px;
  background: var(--psychwit-cover-shadow, #e8d6ab);
}

.psychwit-guide-cover__page {
  position: relative;
  width: 340px;
  height: 453px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 22px 44px rgba(31, 36, 33, 0.22);
}

.psychwit-guide-cover__page > * {
  position: relative;
  z-index: 1;
}

.psychwit-guide-cover__page::after {
  content: '';
  display: block;
}

/* Everything inside is authored in 900px-wide units and scaled as one. */
.psychwit-guide-cover__page {
  font-family: var(--wp--preset--font-family--mulish);
  color: var(--wp--preset--color--ink);
  zoom: 0.37778;
  width: 900px;
  height: 1200px;
  border-radius: 42px;
  display: flex;
  flex-direction: column;
}

.psychwit-guide-cover__ring,
.psychwit-guide-cover__blob {
  position: absolute;
  border-radius: 50%;
  z-index: 0;
}

.psychwit-guide-cover__brand {
  padding: 64px 72px 0;
  display: flex;
  align-items: center;
  gap: 14px;
}

.psychwit-guide-cover__brand span {
  font-family: var(--wp--preset--font-family--poppins);
  font-weight: 600;
  font-size: 30px;
  color: var(--wp--custom--color--teal-hover);
  letter-spacing: -0.3px;
}

.psychwit-guide-cover__title {
  padding: 0 72px;
}

.psychwit-guide-cover__kicker {
  margin: 0 0 24px;
  font-family: var(--wp--preset--font-family--poppins);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: 3px;
  text-transform: uppercase;
}

.psychwit-guide-cover__h1 {
  margin: 0 0 18px;
  font-family: var(--wp--preset--font-family--poppins);
  font-weight: 700;
  line-height: 1.03;
  color: var(--wp--preset--color--coral);
}

.psychwit-guide-cover__script {
  margin: 0 0 30px;
  font-family: var(--wp--preset--font-family--caveat);
  font-weight: 700;
  font-size: 58px;
  line-height: 1;
  color: var(--wp--preset--color--teal);
}

.psychwit-guide-cover__sub {
  margin: 0;
  font-family: var(--wp--preset--font-family--poppins);
  font-weight: 600;
  font-size: 27px;
  line-height: 1.35;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  max-width: 620px;
}

.psychwit-guide-cover__rule {
  display: block;
  width: 110px;
  height: 7px;
  border-radius: 4px;
  background: var(--wp--preset--color--teal);
}

.psychwit-guide-cover__foot {
  margin-top: auto;
  padding: 0 72px 64px;
}

.psychwit-guide-cover__lede {
  margin: 0 0 38px;
  font-size: 25px;
  line-height: 1.5;
  max-width: 620px;
}

.psychwit-guide-cover__steps {
  list-style: none;
  margin: 0 0 44px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-family: var(--wp--preset--font-family--poppins);
  font-weight: 600;
  font-size: 23px;
}

.psychwit-guide-cover__steps li {
  display: flex;
  align-items: center;
  gap: 16px;
}

.psychwit-guide-cover__steps span {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--wp--preset--color--base);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 18px;
  color: var(--wp--custom--color--teal-hover);
}

.psychwit-guide-cover__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 44px;
}

.psychwit-guide-cover__pills span {
  padding: 11px 22px;
  border-radius: 999px;
  background: var(--wp--preset--color--base);
  font-family: var(--wp--preset--font-family--poppins);
  font-weight: 600;
  font-size: 18px;
  color: var(--wp--custom--color--teal-hover);
}

.psychwit-guide-cover__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-top: 2px solid;
  padding-top: 28px;
  font-family: var(--wp--preset--font-family--poppins);
  font-weight: 600;
  font-size: 20px;
}

.psychwit-guide-cover__meta em {
  font-family: var(--wp--preset--font-family--caveat);
  font-style: normal;
  font-weight: 700;
  font-size: 34px;
  color: var(--wp--preset--color--coral);
}

/* "STEP 01" labels on the how-it-works row. */
.psychwit-guide-step {
  font-family: var(--wp--preset--font-family--poppins);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 1.2px;
  color: #8a6f39;
}