/*
Theme Name: Cassandra Bodzak
Theme URI: https://cassandrabodzak.com
Author: Cassandra Bodzak
Description: Standalone WordPress theme for actress/author Cassandra Bodzak's personal site. Hero photos, the headshot slideshow, and identity text are edited in Appearance > Customize. The page sections (Stay in the Loop, From the Newsletter, About, Contact & Representation) are built from editable block patterns inserted into the front page in the Block Editor — replace photos via the Image block's "Replace" button, edit text inline, and edit button labels/links via the Button block toolbar. See README.txt for full setup steps.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
License: Private use for Cassandra Bodzak
Text Domain: cassandra-bodzak

NOTE ON FONTS: Beautiful Script, Handsome, and Safira March (loaded below from
cdnfonts.com) are licensed for personal use only. Purchase a commercial license
for these before this site goes live, or swap in licensed alternatives.
*/

@import url('https://fonts.googleapis.com/css2?family=Mea+Culpa&display=swap');
@import url('https://fonts.cdnfonts.com/css/beautiful-script');
@import url('https://fonts.cdnfonts.com/css/handsome-2');
@import url('https://fonts.cdnfonts.com/css/safira-march-personal-use');
@import url('https://fonts.cdnfonts.com/css/glacial-indifference-2');

/* ===========================================================
   THEME VARIABLES — edit these to restyle the whole site.
   =========================================================== */
:root {
  --color-bg: #e4ddd2;
  --color-bg-alt: #bdafa1;
  --color-bg-deep: #0b0b0b;
  --color-text: #0b0b0b;
  --color-text-muted: rgba(11,11,11,0.62);
  --color-text-on-deep: #e4ddd2;
  --color-accent: #0b0b0b;
  --color-accent-dark: #2b2b2b;
  --color-border: #bdafa1;

  --font-name: 'Mea Culpa', 'Beautiful Script', cursive;
  --font-heading: 'Mea Culpa', 'Beautiful Script', cursive;
  --font-subtitle: 'Safira March Personal Use', serif;
  --font-body: 'Glacial Indifference', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --max-width: 1180px;
  --gutter: 24px;
  --radius: 6px;
  --radius-pill: 999px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
}

a { color: var(--color-text); text-decoration: none; }
a:hover { color: var(--color-accent); }
img { max-width: 100%; display: block; }

.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.eyebrow {
  font-family: var(--font-subtitle);
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--color-accent);
  font-weight: 500;
}

/* Buttons — applies to both our own .btn markup and WP core Button blocks
   so block-editor buttons inherit the same look automatically. */
.btn,
.wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 30px;
  border-radius: var(--radius-pill);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 500;
  border: 1px solid transparent;
  cursor: pointer;
}

.btn-primary,
.wp-block-button__link {
  background: var(--color-accent);
  color: #fff;
}
.btn-primary:hover,
.wp-block-button__link:hover { background: var(--color-accent-dark); color: #fff; }

.btn-secondary,
.wp-block-button.btn-secondary .wp-block-button__link,
.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  border-color: currentColor;
  color: inherit;
}
.btn-secondary:hover,
.wp-block-button.btn-secondary .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:hover { color: var(--color-accent); border-color: var(--color-accent); }

/* ===========================================================
   MENU BAR
   =========================================================== */
.site-nav {
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 50;
}

.site-nav .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 28px;
  min-height: 70px;
  padding-top: 14px;
  padding-bottom: 14px;
}

.site-nav .logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.logo-signature {
  height: 34px;
  width: auto;
}

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  list-style: none;
  margin: 0;
  padding: 0;
  justify-content: flex-end;
  flex: 1 1 auto;
  min-width: 0;
}

.site-nav ul li a {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.nav-toggle { display: none; }

@media (max-width: 720px) {
  .site-nav ul {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    gap: 0;
    padding: 6px 0 16px;
  }
  .site-nav ul.is-open { display: flex; }
  .site-nav ul li { width: 100%; }
  .site-nav ul li a { display: block; padding: 12px 4px; }
  .nav-toggle {
    display: block;
    background: none;
    border: none;
    font-size: 1.3rem;
    cursor: pointer;
    line-height: 1;
    padding: 4px 6px;
  }
}

/* "Books"-style dropdown submenus (WP nested menu items) */
.site-nav li.menu-item-has-children {
  position: relative;
}

.site-nav li.menu-item-has-children > a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.site-nav ul.sub-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  margin-top: 14px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 10px 0;
  min-width: 220px;
  list-style: none;
  box-shadow: 0 10px 24px rgba(0,0,0,0.08);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(-6px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
  z-index: 60;
  text-align: center;
}

.site-nav li.menu-item-has-children:hover > ul.sub-menu,
.site-nav li.menu-item-has-children:focus-within > ul.sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.site-nav ul.sub-menu li a {
  display: block;
  padding: 8px 18px;
  white-space: nowrap;
}

@media (max-width: 720px) {
  /* Collapsed ("mini") by default on mobile — tap the parent item to
     expand just that section, instead of the whole submenu always
     being expanded inline (which made the mobile menu very long and
     hard to back out of). */
  .site-nav ul.sub-menu {
    position: static;
    display: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: none;
    text-align: left;
    padding: 0 0 0 16px;
    margin: 4px 0 4px;
    max-height: 50vh;
    overflow-y: auto;
  }
  .site-nav li.menu-item-has-children.submenu-open > ul.sub-menu {
    display: block;
  }
  .site-nav li.menu-item-has-children > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }
  .site-nav li.menu-item-has-children .submenu-caret {
    font-size: 0.7rem;
    transition: transform 0.15s ease;
  }
  .site-nav li.menu-item-has-children.submenu-open .submenu-caret {
    transform: rotate(180deg);
  }
}

/* ===========================================================
   HERO — built from Customizer settings (Appearance > Customize
   > Hero Section), not the block editor, so the slideshow can
   stay a simple JS rotator.
   =========================================================== */
.hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  background: var(--color-bg-alt);
}

@media (max-width: 880px) {
  .hero { grid-template-columns: 1fr; }
}

.hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 64px var(--gutter);
  gap: 18px;
}

.hero-copy h1 {
  margin: 0;
  line-height: 1.05;
}

.hero-signature {
  width: 100%;
  max-width: 620px;
  height: auto;
}

.hero-identity {
  font-family: var(--font-subtitle);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-style: normal;
  font-size: 0.65rem;
  color: var(--color-accent-dark);
  margin: 0;
  white-space: nowrap;
}

@media (max-width: 480px) {
  .hero-identity { white-space: normal; }
}

.hero-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  font-size: 0.9rem;
  color: var(--color-text-muted);
  margin: 0;
}

.hero-facts span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 8px;
}

.hero-slideshow {
  position: relative;
  overflow: hidden;
  min-height: 420px;
}

.hero-track {
  display: flex;
  height: 100%;
  transition: transform 0.5s ease;
}

.hero-slide {
  flex: 0 0 100%;
  height: 100%;
  position: relative;
  min-height: 420px;
}

.hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.hero-dots {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
}

.hero-dots button {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.6);
  cursor: pointer;
  padding: 0;
}
.hero-dots button.active { background: #fff; }

.hero-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.35);
  color: #fff;
  border: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.1rem;
  z-index: 2;
}
.hero-arrow.prev { left: 16px; }
.hero-arrow.next { right: 16px; }

/* ===========================================================
   SECTION SHARED STYLES — used by the block patterns inserted
   into the front page content.
   =========================================================== */
.block,
section.block,
.wp-block-group.block {
  padding: 72px var(--gutter);
}

.section-heading {
  font-family: var(--font-heading);
  font-size: 2.1rem;
  margin: 0 0 12px;
  text-align: center;
}

.section-heading-img,
.section-heading-img.wp-block-image,
.section-heading-img img {
  display: block;
  width: auto;
  margin: 0 auto 12px;
}

.section-heading-img.wp-block-image img { margin: 0 auto; }

/* Standalone pages (Acting, Work With Me, individual book pages) —
   auto-created on theme activation, styled to match the rest of the site. */
.page-intro {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  padding-top: 56px;
}

.page-title {
  font-family: var(--font-heading);
  font-size: 3rem;
  margin: 0 0 8px;
}

.page-intro p:not(.section-sub) {
  text-align: left;
  font-size: 1.05rem;
  margin: 0 auto 16px;
  max-width: 640px;
}

.section-sub {
  text-align: center;
  color: var(--color-text-muted);
  max-width: 620px;
  margin: 0 auto 40px;
  font-size: 0.95rem;
}

/* ===========================================================
   MINI NEWSLETTER SIGNUP
   =========================================================== */
.mini-signup-block {
  background: var(--color-bg);
  text-align: center;
  padding-top: 20px;
  padding-bottom: 20px;
}

.mini-signup-block .section-heading,
.mini-signup-block .section-heading-img { margin-bottom: 4px; }
.mini-signup-block .section-sub { margin-bottom: 14px; }

.mini-signup-form {
  display: flex;
  justify-content: center;
  gap: 10px;
  max-width: 380px;
  margin: 0 auto;
  flex-wrap: wrap;
}

.mini-signup-form input[type="email"] {
  flex: 1;
  min-width: 200px;
  padding: 12px 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 0.9rem;
}

.mini-signup-form button { border: none; }

.mini-signup-form .formkit-alert {
  flex-basis: 100%;
  margin: 0 0 4px;
  padding: 0;
  list-style: none;
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: #b5443b;
}

.mini-signup-form .formkit-alert:empty { display: none; }

/* ===========================================================
   LATEST NEWSLETTERS (rendered by the [cassandra_newsletters]
   shortcode — see inc/newsletters.php)
   =========================================================== */
.newsletters-block {
  background: var(--color-bg-alt);
  padding-top: 28px;
}

.newsletters-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: var(--max-width);
  margin: 0 auto;
}

@media (max-width: 760px) {
  .newsletters-grid { grid-template-columns: 1fr; }
}

.newsletter-card {
  border: 1px solid rgba(11, 11, 11, 0.15);
  border-radius: var(--radius);
  overflow: hidden;
  text-align: left;
  background: var(--color-bg);
}

.newsletter-card .newsletter-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 900 / 597;
  object-fit: cover;
  margin: 0;
}

.newsletter-card .newsletter-body { padding: 22px 26px 26px; }
.newsletter-card .eyebrow { display: block; margin-bottom: 8px; }

.newsletter-card h3 {
  font-family: var(--font-body);
  font-weight: 400;
  margin: 0 0 8px;
  font-size: 1.2rem;
}

.newsletter-card p {
  color: var(--color-text-muted);
  font-size: 0.9rem;
  margin: 0 0 14px;
}

.newsletter-card .read-more {
  color: var(--color-accent);
  font-weight: 500;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.newsletters-empty-notice {
  max-width: 620px;
  margin: 0 auto;
  text-align: center;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius);
  padding: 24px;
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

/* ===========================================================
   BIO / ABOUT
   =========================================================== */
.bio-block { background: var(--color-bg); }

.bio-grid.wp-block-columns {
  gap: 48px;
  align-items: center;
  max-width: var(--max-width);
  margin: 0 auto;
}

.bio-photo-col { flex: 1; }
.bio-copy-col { flex: 1.4; }

.bio-photo {
  border-radius: 50% 50% 0 0;
  overflow: hidden;
  aspect-ratio: 4/5;
  margin: 0;
}

.bio-photo img { width: 100%; height: 100%; object-fit: cover; }

.bio-copy p { font-size: 1.05rem; }

.bio-copy .read-more {
  color: var(--color-accent);
  font-weight: 500;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ===========================================================
   SOCIAL LINKS — footer widget area (core Social Icons block)
   =========================================================== */
.site-footer .wp-block-social-links { justify-content: center; margin-bottom: 20px; }
.site-footer .wp-social-link a { color: var(--color-text); }

/* Fallback icon links rendered by cb_default_social_links() in footer.php
   when the Footer widget area hasn't been customized yet. */
.social-icons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
  margin-bottom: 20px;
}
.social-icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text);
}
.social-icons a:hover {
  color: var(--color-accent);
  transform: translateY(-3px);
}
.social-icons svg { width: 28px; height: 28px; fill: currentColor; }

.footer-copy {
  font-size: 0.8rem;
  opacity: 0.7;
  margin: 0;
  text-align: center;
}

/* ===========================================================
   CONTACT & REPRESENTATION
   =========================================================== */
.contact-block { background: var(--color-bg-alt); }

.rep-grid.wp-block-columns {
  max-width: 920px;
  margin: 0 auto;
  gap: 24px;
}

.rep-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 22px 18px;
  min-height: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.rep-card .eyebrow { display: block; margin-bottom: 6px; font-size: 0.7rem; letter-spacing: 1.5px; }
.rep-card h4 { margin: 0; font-family: var(--font-body); font-weight: 500; font-size: 0.95rem; }
.rep-card p { margin: 2px 0; font-size: 0.9rem; color: var(--color-text-muted); }
.rep-card a { color: var(--color-accent); }

/* ===========================================================
   FOOTER
   =========================================================== */
.site-footer {
  background: var(--color-bg);
  color: var(--color-text);
  text-align: center;
  padding: 40px var(--gutter) 32px;
}