/*
Theme Name:   Twenty Twenty-Five: Your Party
Description:  Child theme applying the Your Party look: red/cream/ink, Anton + Open Sauce Sans, square corners, corner-triangle motif.
Template:     twentytwentyfive
Version:      1.0.0
Text Domain:  twentytwentyfive-yourparty
*/

/* =====================================================================
   YOUR PARTY LOOK for WordPress, Twenty Twenty-Five
   Red #FF3131 · Cream #FAF6E8 · Ink #042830 · Anton + Open Sauce Sans
   Square corners · hard shadows · the corner-triangle motif

   Helper classes (add in the block sidebar > Advanced > Additional CSS class):
     yp-hero-title   giant red Anton headline (use on a Heading block)
     yp-corner       corner triangle on any Group/Column/Cover
     yp-corner-ink   same, but ink triangle (for cream/white surfaces)
     yp-corner-cream cream triangle (for ink/red surfaces)
     yp-tag          red label chip
     yp-hard-shadow  18px offset ink shadow
     yp-panel-red    CTA panel, red accent      (also: yp-panel-ink, yp-panel-cream)
     yp-ink          ink background, cream text (Group block)
     yp-red          red background, cream text (Group block)
     yp-cards        on a Query Loop: posts become white cards with a corner
     yp-cta          on a Navigation Link: styles it as the red JOIN button
     yp-btn-ink      on a Button block: ink button, red on hover
   Headings: bold ("strong") text gets the red underline.
   ===================================================================== */


/* ---------- 1. TOKENS ------------------------------------------------ */
:root {
  --yp-red: #FF3131;
  --yp-cream: #FAF6E8;
  --yp-ink: #042830;
  --yp-cream-dark: #EEEAD9;
  --yp-red-tint: #FBE2E2;
  --yp-grey-tint: #E2E2E2;
  --yp-line: #e0e0e0;
  --yp-white: #fff;

  --yp-display: "Anton", Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  --yp-body: "Open Sauce Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --yp-shadow: 18px 18px 0 1px var(--yp-ink);
  --yp-ease: 0.3s ease;

  /* Map onto Twenty Twenty-Five's palette so every block follows the brand */
  --wp--preset--color--base: #FAF6E8;       /* page background */
  --wp--preset--color--contrast: #042830;   /* text */
  --wp--preset--color--accent-1: #FF3131;   /* red */
  --wp--preset--color--accent-2: #EEEAD9;   /* cream dark */
  --wp--preset--color--accent-3: #FBE2E2;   /* red tint */
  --wp--preset--color--accent-4: #E2E2E2;   /* grey tint */
  --wp--preset--color--accent-5: #042830;   /* ink */
  --wp--preset--color--accent-6: #e0e0e0;   /* borders */

  /* Fonts: Twenty Twenty-Five's body font is "manrope" */
  --wp--preset--font-family--manrope: var(--yp-body);
  --wp--preset--font-family--heading: var(--yp-display);
}


/* ---------- 2. BASE -------------------------------------------------- */
html,
body {
  background-color: var(--yp-cream);
}

:root body {
  color: var(--yp-ink);
  font-family: var(--yp-body);
  font-weight: 500;
}

:root p,
:root li {
  font-weight: 400;          /* source uses 100; 400 is the safe equivalent unless a thin face is loaded */
}

::selection {
  background: var(--yp-red);
  color: var(--yp-cream);
}

:root :focus-visible {
  outline: 3px solid var(--yp-ink);
  outline-offset: 3px;
}

/* Square everything */
:root .wp-block-image img,
:root .wp-block-post-featured-image img,
:root .wp-block-cover,
:root .wp-block-group,
:root .wp-block-column,
:root .wp-block-media-text,
:root .wp-block-button__link,
:root .wp-element-button,
:root input,
:root textarea,
:root select {
  border-radius: 0;
}


/* ---------- 3. TYPOGRAPHY ------------------------------------------- */
:root h1,
:root h2,
:root h3,
:root h4,
:root h5,
:root h6,
:root .wp-block-post-title,
:root .wp-block-query-title,
:root .wp-block-site-title {
  font-family: var(--yp-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0;
  line-height: 1.05;
}

:root h1,
:root .wp-block-post-title { color: var(--yp-red); font-size: clamp(3rem, 7vw, 5.625rem); line-height: 1; }  /* ≈90px */
:root h2 { color: var(--yp-ink); font-size: clamp(2.5rem, 5vw, 4.375rem); }                               /* ≈70px */
:root h3 { color: var(--yp-red); font-size: clamp(1.75rem, 3vw, 2.8125rem); }                             /* ≈45px */
:root h4 { color: var(--yp-ink); font-size: 1.75rem; }
:root h5 { color: var(--yp-ink); font-size: 1.25rem; }
:root h6 { color: var(--yp-ink); font-size: 1.125rem; }

:root .wp-block-site-title,
:root .wp-block-site-title a {
  font-size: 2.8125rem;      /* 45px */
  color: var(--yp-red);
  text-decoration: none;
}

/* Bold inside a heading = red underline hit */
:root h1 strong, :root h1 b,
:root h2 strong, :root h2 b,
:root h3 strong, :root h3 b,
:root h4 strong, :root h4 b,
:root h5 strong, :root h5 b,
:root h6 strong, :root h6 b {
  font-weight: 600;
  border-bottom: 7px solid var(--yp-red);
  padding-bottom: 5px;
}

/* Giant homepage headline */
:root .yp-hero-title {
  color: var(--yp-red);
  font-size: clamp(4.375rem, 13vw, 12rem);
  line-height: 0.95;
  letter-spacing: -0.3rem;
  font-weight: 400;
}

/* Body copy size in content */
:root .wp-block-post-content,
:root .entry-content {
  font-size: 1.25rem;        /* 20px */
}

/* Links in content: red with a 1px inset underline (not text-decoration) */
:root .wp-block-post-content a:not(.wp-element-button):not(.wp-block-button__link),
:root .wp-block-post-excerpt a:not(.wp-element-button),
:root .entry-content a:not(.wp-element-button) {
  color: var(--yp-red);
  text-decoration: none;
  box-shadow: inset 0 -1px 0 var(--yp-red);
  transition: color var(--yp-ease), box-shadow var(--yp-ease);
}
:root .wp-block-post-content a:not(.wp-element-button):not(.wp-block-button__link):hover {
  color: var(--yp-ink);
  box-shadow: inset 0 -1px 0 var(--yp-ink);
}

/* Pull quotes */
:root .wp-block-quote,
:root .wp-block-pullquote {
  border: 0;
  padding-left: 0;
}
:root .wp-block-quote p,
:root .wp-block-pullquote p {
  font-family: var(--yp-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(2rem, 4vw, 3rem);   /* ≈48px */
  line-height: 1.2;
  color: var(--yp-red);
  padding-left: 30px;
  margin-bottom: 0;
}
:root .wp-block-quote cite,
:root .wp-block-pullquote cite {
  padding-left: 30px;
  color: var(--yp-ink);
  font-style: normal;
}

/* Lists, rules */
:root hr,
:root .wp-block-separator {
  border: 0;
  border-top: 1px solid var(--yp-cream-dark);
  background: none;
  opacity: 1;
}
:root .wp-block-separator.is-style-wide { border-top: 4px solid var(--yp-red); }


/* ---------- 4. BUTTONS ---------------------------------------------- */
:root .wp-block-button__link,
:root .wp-element-button,
:root .wp-block-search__button,
:root .wp-block-post-comments-form .form-submit input[type="submit"] {
  position: relative;
  display: inline-block;
  padding: 10px 70px;
  border: 0;
  border-radius: 0;
  background-color: var(--yp-red);
  color: var(--yp-cream);
  font-family: var(--yp-display);
  font-size: 1.875rem;       /* 30px */
  font-weight: 400;
  line-height: 1.2;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  box-shadow: none;
  transition: background-color var(--yp-ease), color var(--yp-ease);
}

/* Corner triangle (skipped on the search submit and comment submit, which can't hold ::before) */
:root .wp-block-button__link::before,
:root .wp-element-button:not(input):not(button.wp-block-search__button)::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 0;
  height: 0;
  border-top: 15px solid var(--yp-cream);
  border-right: 15px solid transparent;
}

:root .wp-block-button__link:hover,
:root .wp-block-button__link:focus-visible,
:root .wp-element-button:hover,
:root .wp-element-button:focus-visible {
  background-color: var(--yp-ink);
  color: var(--yp-cream);
}

/* Outline style = cream button with red text (site's "cream-red" variant) */
:root .wp-block-button.is-style-outline > .wp-block-button__link,
:root .wp-block-button.is-style-outline > .wp-element-button {
  background-color: var(--yp-cream);
  color: var(--yp-red);
  border: 1px solid var(--yp-red);
}
:root .wp-block-button.is-style-outline > .wp-block-button__link::before {
  border-top-color: var(--yp-red);
}
:root .wp-block-button.is-style-outline > .wp-block-button__link:hover {
  background-color: var(--yp-red);
  color: var(--yp-cream);
  border-color: var(--yp-red);
}
:root .wp-block-button.is-style-outline > .wp-block-button__link:hover::before {
  border-top-color: var(--yp-cream);
}

/* Ink button */
:root .wp-block-button.yp-btn-ink > .wp-block-button__link {
  background-color: var(--yp-ink);
  color: var(--yp-cream);
}
:root .wp-block-button.yp-btn-ink > .wp-block-button__link:hover {
  background-color: var(--yp-red);
}

/* Button on an ink/red surface: invert */
:root .yp-ink .wp-block-button__link,
:root .has-accent-5-background-color .wp-block-button__link {
  background-color: var(--yp-cream);
  color: var(--yp-ink);
}
:root .yp-ink .wp-block-button__link::before,
:root .has-accent-5-background-color .wp-block-button__link::before {
  border-top-color: var(--yp-red);
}
:root .yp-ink .wp-block-button__link:hover,
:root .has-accent-5-background-color .wp-block-button__link:hover {
  background-color: var(--yp-red);
  color: var(--yp-cream);
}


/* ---------- 5. HEADER & NAVIGATION ---------------------------------- */
:root header.wp-block-template-part,
:root .wp-block-template-part > .wp-block-group:first-child {
  background-color: transparent;
}

:root .wp-block-navigation,
:root .wp-block-navigation a,
:root .wp-block-navigation .wp-block-navigation-item__content {
  font-family: var(--yp-display);
  font-size: 1.5rem;         /* 24px */
  font-weight: 400;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--yp-red);
  transition: color var(--yp-ease), background-color var(--yp-ease);
}
:root .wp-block-navigation a:hover,
:root .wp-block-navigation a:focus-visible {
  color: var(--yp-ink);
}

/* Red JOIN-style CTA: add class "yp-cta" to a Navigation Link */
:root .wp-block-navigation .yp-cta {
  position: relative;
  background-color: var(--yp-red);
  margin-left: 15px;
}
:root .wp-block-navigation .yp-cta > a,
:root .wp-block-navigation .yp-cta .wp-block-navigation-item__content {
  color: var(--yp-cream);
  padding: 10px 20px;
}
:root .wp-block-navigation .yp-cta::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  border-top: 12px solid var(--yp-cream);
  border-right: 12px solid transparent;
  z-index: 1;
  pointer-events: none;
}
:root .wp-block-navigation .yp-cta:hover { background-color: var(--yp-ink); }
:root .wp-block-navigation .yp-cta:hover > a { color: var(--yp-cream); }

/* Dropdown submenus */
:root .wp-block-navigation__submenu-container {
  background-color: var(--yp-cream);
  border: 1px solid var(--yp-cream-dark);
  border-radius: 0;
}

/* Mobile overlay = full red drawer, cream links */
:root .wp-block-navigation__responsive-container.is-menu-open {
  background-color: var(--yp-red) !important;
  color: var(--yp-cream) !important;
}
:root .wp-block-navigation__responsive-container.is-menu-open a,
:root .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  color: var(--yp-cream) !important;
  opacity: 1;
}
:root .wp-block-navigation__responsive-container.is-menu-open a:hover { color: var(--yp-ink) !important; }
:root .wp-block-navigation__responsive-container-open,
:root .wp-block-navigation__responsive-container-close { color: var(--yp-ink); }
:root .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close { color: var(--yp-cream); }


/* ---------- 6. FOOTER ------------------------------------------------ */
:root footer.wp-block-template-part,
:root footer.wp-block-template-part > .wp-block-group {
  background-color: var(--yp-ink);
  color: var(--yp-cream);
}
:root footer.wp-block-template-part p,
:root footer.wp-block-template-part li {
  color: var(--yp-cream);
  font-size: 0.8125rem;      /* 13px fine print */
}
:root footer.wp-block-template-part a {
  color: var(--yp-cream);
  font-family: var(--yp-display);
  font-size: 1.125rem;       /* 18px */
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: none;
  transition: color var(--yp-ease);
}
:root footer.wp-block-template-part a:hover { color: var(--yp-red); }
:root footer.wp-block-template-part :focus-visible { outline-color: var(--yp-cream); }
:root footer.wp-block-template-part .wp-block-social-links a { font-size: inherit; }


/* ---------- 7. FORMS ------------------------------------------------- */
:root input[type="text"],
:root input[type="email"],
:root input[type="url"],
:root input[type="tel"],
:root input[type="search"],
:root input[type="password"],
:root input[type="number"],
:root textarea,
:root select,
:root .wp-block-search__input {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--yp-line);
  border-radius: 0;
  background-color: var(--yp-cream);
  color: var(--yp-ink);
  font-family: var(--yp-body);
  font-size: 1rem;
  box-sizing: border-box;
}
:root input::placeholder,
:root textarea::placeholder,
:root .wp-block-search__input::placeholder {
  color: var(--yp-red);
  font-family: var(--yp-body);
  font-size: 1.25rem;        /* 20px */
  opacity: 1;
}
:root input:focus,
:root textarea:focus,
:root select:focus {
  border-color: var(--yp-ink);
  outline: 3px solid var(--yp-ink);
  outline-offset: 0;
}
:root .wp-block-search__inside-wrapper { border: 0; padding: 0; gap: 10px; }
:root .wp-block-search__button { padding: 10px 24px; font-size: 1.5rem; }
:root .wpcf7-not-valid-tip,
:root .woocommerce-error { color: var(--yp-red); }
:root input[type="submit"],
:root .wpcf7-submit {
  background-color: var(--yp-red);
  color: var(--yp-cream);
  border: 0;
  border-radius: 0;
  max-width: 200px;
  width: 100%;
  padding: 10px;
  font-family: var(--yp-display);
  font-size: 1.875rem;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color var(--yp-ease);
}
:root input[type="submit"]:hover,
:root .wpcf7-submit:hover { background-color: var(--yp-ink); }


/* ---------- 8. POSTS, CARDS, TAGS ----------------------------------- */
/* Category / term pills */
:root .taxonomy-category a,
:root .wp-block-post-terms a,
:root .yp-tag {
  display: inline-block;
  background-color: var(--yp-red);
  color: var(--yp-cream);
  font-family: var(--yp-display);
  font-size: 1.0625rem;      /* 17px */
  font-weight: 400;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1.2;
  padding: 3px 10px 1px;
  box-shadow: none;
}
:root .wp-block-post-terms { font-size: 1rem; }
:root .wp-block-post-terms a:hover { background-color: var(--yp-ink); }
:root .wp-block-post-terms .wp-block-post-terms__separator { display: none; }

/* Query Loop → cards (add class "yp-cards" to the Query Loop / Post Template) */
:root .yp-cards .wp-block-post-template { gap: 30px; row-gap: 60px; }
:root .yp-cards .wp-block-post-template > li {
  position: relative;
  overflow: hidden;
  background-color: var(--yp-white);
  min-height: 288px;
}
:root .yp-cards .wp-block-post-template > li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  border-top: 30px solid var(--yp-red);
  border-right: 30px solid transparent;
}
:root .yp-cards .wp-block-post-featured-image { margin: 0; }
:root .yp-cards .wp-block-post-featured-image img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}
:root .yp-cards .wp-block-post-title,
:root .yp-cards .wp-block-post-template h2,
:root .yp-cards .wp-block-post-template h3 {
  font-size: 1.75rem;        /* 28px */
  color: var(--yp-red);
  line-height: 1.2;
  padding: 24px 24px 0;
  margin: 0 0 20px;
}
:root .yp-cards .wp-block-post-title a { color: var(--yp-red); text-decoration: none; }
:root .yp-cards .wp-block-post-title a:hover { color: var(--yp-ink); }
:root .yp-cards .wp-block-post-excerpt,
:root .yp-cards .wp-block-post-date,
:root .yp-cards .wp-block-post-terms { padding: 0 24px 24px; font-size: 1.125rem; line-height: 1.5; }
:root .yp-cards .wp-block-post-terms { padding-bottom: 0; padding-top: 16px; }

/* Pagination */
:root .wp-block-query-pagination a,
:root .wp-block-query-pagination-numbers .page-numbers {
  font-family: var(--yp-display);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--yp-red);
  box-shadow: none;
}
:root .wp-block-query-pagination-numbers .current { color: var(--yp-ink); }
:root .wp-block-query-pagination a:hover { color: var(--yp-ink); }

/* Post navigation */
:root .wp-block-post-navigation-link a { color: var(--yp-red); text-decoration: none; }


/* ---------- 9. HELPER CLASSES --------------------------------------- */
/* Corner triangle on any block */
:root .yp-corner,
:root .yp-corner-ink,
:root .yp-corner-cream { position: relative; }

:root .yp-corner::before,
:root .yp-corner-ink::before,
:root .yp-corner-cream::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 0;
  height: 0;
  border-top: 30px solid var(--yp-red);
  border-right: 30px solid transparent;
  pointer-events: none;
}
:root .yp-corner-ink::before   { border-top-color: var(--yp-ink); }
:root .yp-corner-cream::before { border-top-color: var(--yp-cream); }

/* Surfaces */
:root .yp-ink {
  background-color: var(--yp-ink);
  color: var(--yp-cream);
}
:root .yp-ink h1, :root .yp-ink h2, :root .yp-ink h3,
:root .yp-ink h4, :root .yp-ink h5, :root .yp-ink h6,
:root .yp-ink p, :root .yp-ink li { color: var(--yp-cream); }
:root .yp-ink a:not(.wp-element-button) { color: var(--yp-cream); box-shadow: inset 0 -1px 0 var(--yp-red); }

:root .yp-red {
  background-color: var(--yp-red);
  color: var(--yp-cream);
}
:root .yp-red h1, :root .yp-red h2, :root .yp-red h3,
:root .yp-red h4, :root .yp-red h5, :root .yp-red h6,
:root .yp-red p, :root .yp-red li { color: var(--yp-cream); }
:root .yp-red a:not(.wp-element-button) { color: var(--yp-cream); box-shadow: inset 0 -1px 0 var(--yp-cream); }
:root .yp-red .wp-block-button__link { background-color: var(--yp-cream); color: var(--yp-red); }
:root .yp-red .wp-block-button__link::before { border-top-color: var(--yp-red); }
:root .yp-red .wp-block-button__link:hover { background-color: var(--yp-ink); color: var(--yp-cream); }

/* Hard offset shadow */
:root .yp-hard-shadow { box-shadow: var(--yp-shadow); }

/* CTA panels with a thick left rule */
:root .yp-panel-red,
:root .yp-panel-ink,
:root .yp-panel-cream {
  border-left: 10px solid var(--yp-red);
  background-color: var(--yp-red-tint);
  padding: 24px;
}
:root .yp-panel-ink   { border-left-color: var(--yp-ink);        background-color: var(--yp-grey-tint); }
:root .yp-panel-cream { border-left-color: var(--yp-cream-dark); background-color: var(--yp-cream-dark); }
:root .yp-panel-red h2, :root .yp-panel-red h3, :root .yp-panel-red h4 { color: var(--yp-red); }

/* Giant background triangle for hero sections: add "yp-triangle-bg" to a Group/Cover */
:root .yp-triangle-bg { position: relative; overflow: hidden; }
:root .yp-triangle-bg::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  border-style: solid;
  border-width: min(600px, 53vw) min(600px, 53vw) 0 0;
  border-color: var(--yp-red) transparent transparent transparent;
  pointer-events: none;
}
:root .yp-triangle-bg > * { position: relative; z-index: 1; }

/* Utility spacing from the original theme (subset) */
:root .yp-pt-50 { padding-top: 100px; }
:root .yp-pb-50 { padding-bottom: 100px; }
:root .yp-mt--50 { margin-top: -100px; }
:root .yp-mb--50 { margin-bottom: -100px; }


/* ---------- 10. RESPONSIVE ------------------------------------------ */
@media (max-width: 1000px) {
  :root .wp-block-navigation .yp-cta { margin-left: 0; }
}

@media (max-width: 781px) {
  :root h2 { font-size: 3.125rem; }
  :root .yp-cards .wp-block-post-template { row-gap: 40px; }
}

@media (max-width: 767px) {
  :root .yp-hero-title { font-size: 18vw; line-height: 1; letter-spacing: -0.3rem; }
  :root .yp-pt-50 { padding-top: 50px; }
}

@media (max-width: 480px) {
  :root .wp-block-button__link,
  :root .wp-element-button { padding: 10px 20px; font-size: 1.4375rem; }  /* 23px */
  :root h1 strong, :root h2 strong, :root h3 strong,
  :root h4 strong, :root h5 strong, :root h6 strong {
    border-bottom-width: 4px;
    padding-bottom: 2px;
  }
  :root h1, :root .wp-block-post-title { font-size: 3.125rem; }
  :root h2 { font-size: 2.5rem; }
  :root .yp-hero-title { font-size: 70px; letter-spacing: -3px; }
}

@media (prefers-reduced-motion: reduce) {
  :root * { transition: none !important; }
}