/* ==========================================================================
   FormaPePs — Brand reskin for Kadence + Gutenberg default block output
   --------------------------------------------------------------------------
   Author note: pure CSS, no PHP/HTML changes. Enqueue this file GLOBALLY,
   AFTER the Kadence theme stylesheet so these rules win the cascade.

   AESTHETIC DIRECTION
   "Montessori nursery brochure": warm, organic, playful-but-professional.
   Sage/moss green is the dominant brand color, warm cream for soft section
   fills and blob cards, deep forest green for body text, warm orange for
   CTAs/highlights. Organic asymmetric "blob" border-radii, hand-drawn
   feeling wavy ribbon dividers, generous airy spacing. No drop-shadow-on-
   white corporate cards, no purple/blue gradients, no system-ui look.

   FONTS
   - Headings: "Fredoka" — rounded, friendly, geometric-humanist display
     face. Reads warm and childhood-appropriate without being a cartoon
     comic font; holds up at large display sizes and in French accents.
   - Body: "Lora" — a warm, slightly calligraphic serif. Gives the
     "brochure / printed plaquette" editorial feel the client's flyer has,
     pairs with Fredoka's roundness, and stays highly readable at length.

   OPT-IN UTILITY CLASSES (add via block editor > Advanced >
   "Additional CSS class(es)"; the unstyled defaults already look on-brand,
   these are only for a richer look on specific blocks):
     .formapeps-card          -> cream organic "blob" card (use on a Group)
     .formapeps-card--green    -> sage-green filled card variant
     .formapeps-card--outline  -> bordered/no-fill card variant
     .formapeps-section-cream  -> full-width cream section background (Group)
     .formapeps-section-green   -> full-width sage section background (Group)
     .formapeps-wave-top        -> wavy ribbon divider above a section
     .formapeps-wave-bottom     -> wavy ribbon divider below a section
     .formapeps-grid-2          -> responsive 2-col layout for inner Columns
     .formapeps-highlight        -> small pink highlight box (use sparingly)
     .formapeps-lead            -> larger intro/lead paragraph
     .formapeps-eyebrow         -> small uppercase label above a heading
   ========================================================================== */


/* ==========================================================================
   FONTS
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Lora:ital,wght@0,400;0,500;0,600;1,400;1,500&display=swap');


/* ==========================================================================
   CSS VARIABLES / PALETTE
   ========================================================================== */
:root {
  /* Brand palette */
  --fp-green:        #7C9D7C;  /* dominant sage/moss */
  --fp-green-soft:   #8FAE8A;  /* lighter sage for hovers/tints */
  --fp-green-deep:   #5E7E60;  /* deeper sage for borders/active */
  --fp-forest:       #33483B;  /* body text / dark contrast */
  --fp-forest-ink:   #283A30;  /* near-black headings */
  --fp-cream:        #F1ECD9;  /* soft section backgrounds */
  --fp-cream-deep:   #EFE4C8;  /* card fills / warmer cream */
  --fp-orange:       #D9772E;  /* CTA / accent (logo orange) */
  --fp-orange-soft:  #E0853D;  /* hover orange */
  --fp-orange-deep:  #BC621F;  /* active / pressed orange */
  --fp-pink:         #F4A6C6;  /* rare highlight accent */
  --fp-white:        #FFFDF7;  /* warm off-white page base */

  /* Typography */
  --fp-font-head: 'Fredoka', 'Trebuchet MS', sans-serif;
  --fp-font-body: 'Lora', Georgia, 'Times New Roman', serif;

  /* Type scale (fluid) */
  --fp-h1: clamp(2.1rem, 5.2vw, 3.5rem);
  --fp-h2: clamp(1.7rem, 4vw, 2.6rem);
  --fp-h3: clamp(1.35rem, 3vw, 1.9rem);
  --fp-h4: clamp(1.15rem, 2.2vw, 1.35rem);
  --fp-body: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);

  /* Spacing / shape */
  --fp-radius-blob-1: 42% 58% 60% 40% / 55% 45% 55% 45%;
  --fp-radius-blob-2: 58% 42% 38% 62% / 42% 60% 40% 58%;
  --fp-radius-soft:   18px;
  --fp-radius-pill:   999px;
  --fp-shadow-soft:   0 14px 30px -18px rgba(51, 72, 59, 0.45);
  --fp-shadow-card:   0 18px 40px -22px rgba(51, 72, 59, 0.5);
  --fp-maxw:          min(1140px, 92vw);
}


/* ==========================================================================
   GLOBAL RESETS & BODY
   ========================================================================== */
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  background-color: var(--fp-white);
  color: var(--fp-forest);
  font-family: var(--fp-font-body);
  font-size: var(--fp-body);
  line-height: 1.7;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--fp-green-soft);
  color: var(--fp-white);
}

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

/* Honour reduced motion */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}


/* ==========================================================================
   TYPOGRAPHY
   ========================================================================== */
h1, h2, h3, h4, h5, h6,
.wp-block-heading {
  font-family: var(--fp-font-head);
  color: var(--fp-forest-ink);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 0.6em;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

h1, .wp-block-heading.has-text-align-center.is-style-h1,
h1.wp-block-heading {
  font-size: var(--fp-h1);
  font-weight: 700;
}

h2, h2.wp-block-heading { font-size: var(--fp-h2); font-weight: 600; }
h3, h3.wp-block-heading { font-size: var(--fp-h3); font-weight: 600; }
h4, h4.wp-block-heading { font-size: var(--fp-h4); font-weight: 500; }
h5, h5.wp-block-heading { font-size: 1.05rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
h6, h6.wp-block-heading { font-size: 0.9rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fp-green-deep); }

/* Decorative leaf-ish underline accent under H2s for the "ribbon" feel */
h2.wp-block-heading::after,
.entry-content > h2::after {
  content: "";
  display: block;
  width: 64px;
  height: 5px;
  margin-top: 0.45em;
  border-radius: var(--fp-radius-pill);
  background: linear-gradient(90deg, var(--fp-orange) 0%, var(--fp-green) 100%);
}
h2.wp-block-heading.has-text-align-center::after,
.has-text-align-center h2::after { margin-left: auto; margin-right: auto; }

p, .wp-block-paragraph {
  margin: 0 0 1.1em;
  max-width: 70ch;
}
.has-text-align-center p,
p.has-text-align-center { margin-left: auto; margin-right: auto; }

strong, b { color: var(--fp-forest-ink); font-weight: 600; }
em, i { color: var(--fp-green-deep); }

/* Lists */
ul, ol,
.wp-block-list {
  margin: 0 0 1.2em;
  padding-left: 1.4em;
  max-width: 70ch;
}
.wp-block-list li,
ul li, ol li { margin: 0.35em 0; }

/* Custom organic bullet for unordered lists */
ul.wp-block-list,
.entry-content ul:not(.wp-block-list):not([class*="menu"]) {
  list-style: none;
  padding-left: 1.6em;
}
ul.wp-block-list > li,
.entry-content ul:not(.wp-block-list):not([class*="menu"]) > li {
  position: relative;
}
ul.wp-block-list > li::before,
.entry-content ul:not(.wp-block-list):not([class*="menu"]) > li::before {
  content: "";
  position: absolute;
  left: -1.35em;
  top: 0.62em;
  width: 0.6em;
  height: 0.6em;
  background: var(--fp-orange);
  border-radius: 60% 40% 55% 45% / 50% 55% 45% 50%;
}

ol.wp-block-list { list-style: none; counter-reset: fp-counter; padding-left: 2em; }
ol.wp-block-list > li { counter-increment: fp-counter; position: relative; }
ol.wp-block-list > li::before {
  content: counter(fp-counter);
  position: absolute;
  left: -2em;
  top: 0.1em;
  width: 1.5em;
  height: 1.5em;
  display: grid;
  place-items: center;
  font-family: var(--fp-font-head);
  font-size: 0.8em;
  font-weight: 600;
  color: var(--fp-white);
  background: var(--fp-green);
  border-radius: 50% 50% 50% 0;
}

/* Blockquote */
blockquote, .wp-block-quote {
  margin: 1.8em 0;
  padding: 1.4em 1.6em 1.4em 2em;
  background: var(--fp-cream);
  border: none;
  border-left: 6px solid var(--fp-orange);
  border-radius: 6px var(--fp-radius-soft) var(--fp-radius-soft) 6px;
  font-style: italic;
  color: var(--fp-forest);
  position: relative;
}
blockquote p, .wp-block-quote p { font-size: 1.1em; }
.wp-block-quote cite,
blockquote cite {
  display: block;
  margin-top: 0.6em;
  font-family: var(--fp-font-head);
  font-style: normal;
  font-weight: 500;
  font-size: 0.9em;
  color: var(--fp-green-deep);
}

/* Lead / eyebrow helpers */
.formapeps-lead {
  font-size: clamp(1.15rem, 1.05rem + 0.6vw, 1.4rem);
  line-height: 1.6;
  color: var(--fp-forest-ink);
}
.formapeps-eyebrow {
  display: inline-block;
  font-family: var(--fp-font-head);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fp-orange-deep);
  margin-bottom: 0.4em;
}


/* ==========================================================================
   HEADER & NAVIGATION
   ========================================================================== */
header.site-header,
.site-header,
.kadence-header {
  background: var(--fp-white);
  border-bottom: 2px solid rgba(124, 157, 124, 0.25);
}

/* Site title fallback (when no logo image) */
.site-title a,
.site-branding .site-title,
.site-name a {
  font-family: var(--fp-font-head);
  font-weight: 700;
  font-size: clamp(1.5rem, 4vw, 2rem);
  color: var(--fp-orange) !important;
  letter-spacing: -0.01em;
  text-decoration: none;
}
.site-description,
.site-branding .site-description {
  font-family: var(--fp-font-body);
  font-style: italic;
  color: var(--fp-green-deep);
  font-size: 0.85rem;
}

/* Primary navigation links (Kadence + generic fallbacks) */
.kadence-navigation a,
.primary-navigation a,
.main-navigation a,
nav.navigation a,
.menu > li > a,
.header-navigation a {
  font-family: var(--fp-font-head);
  font-weight: 500;
  font-size: 1rem;
  color: var(--fp-forest) !important;
  text-decoration: none;
  letter-spacing: 0.01em;
  border-radius: var(--fp-radius-pill);
  transition: color 0.2s ease, background-color 0.2s ease;
}

.kadence-navigation a:hover,
.primary-navigation a:hover,
.main-navigation a:hover,
nav.navigation a:hover,
.menu > li > a:hover,
.header-navigation a:hover,
.menu > li.current-menu-item > a,
.current-menu-item > a {
  color: var(--fp-orange) !important;
}

/* Underline-grow accent on nav items */
.menu > li > a,
.header-navigation .menu > li > a {
  position: relative;
}
.menu > li > a::after,
.header-navigation .menu > li > a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0.1em;
  width: 0;
  height: 3px;
  border-radius: var(--fp-radius-pill);
  background: var(--fp-orange);
  transform: translateX(-50%);
  transition: width 0.25s ease;
}
.menu > li > a:hover::after,
.menu > li.current-menu-item > a::after {
  width: 60%;
}

/* Mobile toggle button */
.menu-toggle,
.mobile-toggle-open-container button,
button.menu-toggle-open {
  color: var(--fp-forest) !important;
  background: var(--fp-cream);
  border-radius: var(--fp-radius-soft);
}


/* ==========================================================================
   FOOTER
   ========================================================================== */
footer.site-footer,
.site-footer,
.kadence-footer {
  background: var(--fp-forest);
  color: var(--fp-cream);
  border-top: 6px solid var(--fp-green);
}
footer.site-footer a,
.site-footer a,
.kadence-footer a {
  color: var(--fp-cream-deep);
  text-decoration: none;
  transition: color 0.2s ease;
}
footer.site-footer a:hover,
.site-footer a:hover,
.kadence-footer a:hover {
  color: var(--fp-orange-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
}
footer.site-footer h1, footer.site-footer h2,
footer.site-footer h3, footer.site-footer h4,
.site-footer .wp-block-heading {
  color: var(--fp-white);
}
footer.site-footer h2::after,
.site-footer h2::after { display: none; }

.site-footer-wrap .site-bottom-footer-wrap,
.footer-credits,
.site-info {
  font-size: 0.85rem;
  color: rgba(241, 236, 217, 0.7);
}


/* ==========================================================================
   BUTTONS & LINKS
   ========================================================================== */
/* In-content text links */
.entry-content a,
.wp-block-paragraph a,
.wp-block-list a,
p a {
  color: var(--fp-orange-deep);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
  text-decoration-color: rgba(217, 119, 46, 0.4);
  transition: text-decoration-color 0.2s ease, color 0.2s ease;
}
.entry-content a:hover,
p a:hover {
  color: var(--fp-orange);
  text-decoration-color: var(--fp-orange);
}

/* Core / Kadence buttons */
.wp-block-button__link,
.wp-element-button,
.kb-button,
.kt-button,
input[type="submit"],
button.button,
.button {
  display: inline-block;
  font-family: var(--fp-font-head);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.01em;
  line-height: 1.2;
  color: var(--fp-white) !important;
  background: var(--fp-orange);
  background-image: none;
  border: none;
  border-radius: var(--fp-radius-pill);
  padding: 0.8em 1.8em;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 8px 18px -10px rgba(217, 119, 46, 0.8);
  transition: transform 0.18s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
.wp-block-button__link:hover,
.wp-element-button:hover,
.kb-button:hover,
input[type="submit"]:hover,
button.button:hover,
.button:hover {
  background: var(--fp-orange-soft);
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -10px rgba(217, 119, 46, 0.9);
  color: var(--fp-white) !important;
}
.wp-block-button__link:active,
.wp-element-button:active,
.button:active {
  background: var(--fp-orange-deep);
  transform: translateY(0);
}

/* Outline button variant (core "is-style-outline") -> sage outline */
.wp-block-button.is-style-outline .wp-block-button__link,
.is-style-outline .wp-element-button {
  background: transparent;
  color: var(--fp-green-deep) !important;
  border: 2px solid var(--fp-green);
  box-shadow: none;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.is-style-outline .wp-element-button:hover {
  background: var(--fp-green);
  color: var(--fp-white) !important;
}

/* Focus visibility for accessibility */
a:focus-visible,
button:focus-visible,
.wp-block-button__link:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid var(--fp-green-deep);
  outline-offset: 2px;
}


/* ==========================================================================
   CARDS & CONTENT BOXES — utility classes
   ========================================================================== */
.formapeps-card {
  background: var(--fp-cream-deep);
  color: var(--fp-forest);
  border-radius: 32px 32px 32px 8px;   /* fallback */
  border-radius: var(--fp-radius-blob-1);
  padding: clamp(1.5rem, 4vw, 2.6rem);
  box-shadow: var(--fp-shadow-card);
  border: 1px solid rgba(124, 157, 124, 0.22);
}
.formapeps-card > :last-child { margin-bottom: 0; }
.formapeps-card h2::after,
.formapeps-card h3::after { display: none; }

/* alternate blob radius for every 2nd card in a row for organic variety */
.formapeps-card:nth-of-type(even) { border-radius: var(--fp-radius-blob-2); }

.formapeps-card--green {
  background: var(--fp-green);
  color: var(--fp-white);
  border-color: var(--fp-green-deep);
}
.formapeps-card--green h1,
.formapeps-card--green h2,
.formapeps-card--green h3,
.formapeps-card--green h4,
.formapeps-card--green strong,
.formapeps-card--green em { color: var(--fp-white); }
.formapeps-card--green a { color: var(--fp-cream-deep); }

.formapeps-card--outline {
  background: transparent;
  border: 2px dashed var(--fp-green);
  box-shadow: none;
}

/* Style the core "card"-ish blocks (Group/Column with a background) so
   client-set background colours still read as on-brand organic cards,
   even with zero extra classes. */
.wp-block-group.has-background,
.wp-block-column.has-background {
  border-radius: var(--fp-radius-soft);
  padding: clamp(1.25rem, 3vw, 2rem);
}

/* Make core "card"/"feature" image+text blocks softer */
.wp-block-image img {
  border-radius: var(--fp-radius-soft);
}
.wp-block-image.is-style-rounded img,
.wp-block-image.is-style-fp-blob img {
  border-radius: var(--fp-radius-blob-1);
}

/* Small pink highlight box — use sparingly */
.formapeps-highlight {
  background: var(--fp-pink);
  color: var(--fp-forest-ink);
  border-radius: 18px 18px 18px 4px;
  padding: 1rem 1.3rem;
  font-family: var(--fp-font-head);
  font-weight: 500;
  display: inline-block;
}


/* ==========================================================================
   SECTION BACKGROUND UTILITIES
   ========================================================================== */
/* Full-bleed-ish coloured sections. Inner content stays constrained. */
.formapeps-section-cream,
.formapeps-section-green {
  position: relative;
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
  margin-block: 0;
}
.formapeps-section-cream { background: var(--fp-cream); }
.formapeps-section-green {
  background: var(--fp-green);
  color: var(--fp-white);
}
.formapeps-section-green h1,
.formapeps-section-green h2,
.formapeps-section-green h3,
.formapeps-section-green h4 { color: var(--fp-white); }
.formapeps-section-green h2::after {
  background: linear-gradient(90deg, var(--fp-cream-deep), var(--fp-orange));
}
.formapeps-section-green a { color: var(--fp-cream-deep); }
.formapeps-section-green .wp-block-button__link {
  background: var(--fp-white);
  color: var(--fp-green-deep) !important;
}
.formapeps-section-green .wp-block-button__link:hover {
  background: var(--fp-cream-deep);
}

/* Default content width helper for grouped sections */
.wp-block-group.alignfull > :where(:not(.alignfull):not(.alignwide)),
.wp-block-group.is-layout-constrained > :where(:not(.alignfull):not(.alignwide)) {
  max-width: var(--fp-maxw);
  margin-inline: auto;
}

/* 2-up responsive grid utility (apply to a Columns/Group wrapper) */
.formapeps-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 3vw, 2rem);
}


/* ==========================================================================
   DECORATIVE WAVE DIVIDER UTILITY
   --------------------------------------------------------------------------
   Wavy green "ribbon" between sections, drawn purely with an inline SVG
   data-URI background so no image asset is required. Add .formapeps-wave-top
   or .formapeps-wave-bottom to a Group/section block.
   ========================================================================== */
.formapeps-wave-top,
.formapeps-wave-bottom {
  position: relative;
}
.formapeps-wave-top::before,
.formapeps-wave-bottom::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 44px;
  background-repeat: repeat-x;
  background-size: 120px 44px;
  background-position: center;
  pointer-events: none;
  /* sage-green wavy ribbon */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='44' viewBox='0 0 120 44'%3E%3Cpath d='M0 22 C 20 2, 40 2, 60 22 S 100 42, 120 22 L120 44 L0 44 Z' fill='%237C9D7C'/%3E%3C/svg%3E");
}
.formapeps-wave-top::before {
  top: 0;
  transform: translateY(-99%) scaleY(-1);
}
.formapeps-wave-bottom::after {
  bottom: 0;
  transform: translateY(99%);
}

/* Standalone divider: a Separator block becomes a swirly ribbon line */
.wp-block-separator,
hr.wp-block-separator {
  border: none;
  height: 22px;
  max-width: var(--fp-maxw);
  margin: 2.5rem auto;
  background-repeat: repeat-x;
  background-position: center;
  background-size: 140px 22px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='22' viewBox='0 0 140 22'%3E%3Cpath d='M0 11 C 23 -3, 47 25, 70 11 S 117 -3, 140 11' fill='none' stroke='%23D9772E' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
  opacity: 0.85;
}
.wp-block-separator.is-style-dots { background: none; height: auto; }


/* ==========================================================================
   FORMS
   ========================================================================== */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="search"],
input[type="password"],
input[type="date"],
select,
textarea,
.wpcf7-form-control:not(.wpcf7-submit) {
  font-family: var(--fp-font-body);
  font-size: 1rem;
  color: var(--fp-forest);
  background: var(--fp-white);
  border: 2px solid rgba(124, 157, 124, 0.45);
  border-radius: var(--fp-radius-soft);
  padding: 0.7em 0.95em;
  width: 100%;
  max-width: 100%;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
textarea { min-height: 140px; resize: vertical; }

input:focus,
select:focus,
textarea:focus,
.wpcf7-form-control:focus {
  border-color: var(--fp-green);
  box-shadow: 0 0 0 4px rgba(124, 157, 124, 0.18);
  outline: none;
}

::placeholder { color: rgba(51, 72, 59, 0.5); }

label {
  font-family: var(--fp-font-head);
  font-weight: 500;
  color: var(--fp-forest-ink);
  display: inline-block;
  margin-bottom: 0.35em;
}

/* Contact Form 7 submit + search submit reuse the orange pill button */
.wpcf7-submit,
.search-submit {
  font-family: var(--fp-font-head);
  font-weight: 600;
  color: var(--fp-white);
  background: var(--fp-orange);
  border: none;
  border-radius: var(--fp-radius-pill);
  padding: 0.8em 1.8em;
  cursor: pointer;
  width: auto;
  transition: background-color 0.2s ease, transform 0.18s ease;
}
.wpcf7-submit:hover,
.search-submit:hover { background: var(--fp-orange-soft); transform: translateY(-2px); }

/* CF7 validation messaging colours */
.wpcf7 .wpcf7-not-valid-tip { color: var(--fp-orange-deep); }
.wpcf7 .wpcf7-response-output {
  border-radius: var(--fp-radius-soft);
  border-width: 2px;
}


/* ==========================================================================
   RESPONSIVE ADJUSTMENTS  (mobile-first base above; tweaks below)
   ========================================================================== */
@media (max-width: 781px) {
  body { line-height: 1.65; }

  /* Core columns already stack at 781px via WP; ensure our grid utility does */
  .formapeps-grid-2 { grid-template-columns: 1fr; }

  /* Tighten blob radii on small screens so cards don't look lopsided */
  .formapeps-card,
  .formapeps-card:nth-of-type(even) {
    border-radius: 26px 26px 26px 10px;
  }

  /* Nav: remove the grow-underline (touch targets); colour change only */
  .menu > li > a::after,
  .header-navigation .menu > li > a::after { display: none; }

  .formapeps-section-cream,
  .formapeps-section-green { padding-block: 2.25rem; }

  .formapeps-wave-top::before,
  .formapeps-wave-bottom::after { height: 30px; background-size: 90px 30px; }
}

@media (max-width: 480px) {
  blockquote, .wp-block-quote { padding: 1.1em 1.1em 1.1em 1.4em; }
  .wp-block-button { width: 100%; }
  .wp-block-button__link,
  .wp-element-button { display: block; text-align: center; }
}

/* Larger screens: a touch more breathing room in body copy */
@media (min-width: 1200px) {
  .entry-content { font-size: 1.125rem; }
}