/* =============================================================================
   Bembos Brand Hub — Brand Guidelines Page Styles
   Chapter covers + Standards.site-style content
   ============================================================================= */

/* --------------------------------------------------------------------------- */
/* Bembos proprietary fonts                                                     */
/* --------------------------------------------------------------------------- */

@font-face {
  font-family: 'HeadingNow';
  src: url('../fonts/HeadingNow498Heavy.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'HeadingNowBold';
  src: url('../fonts/HeadingNow36Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'PortuguesaScript';
  src: url('../fonts/PortuguesaScript.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'DuplicateSlabMedium';
  src: url('../fonts/DuplicateSlabMedium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------- */
/* Extended variables                                                            */
/* --------------------------------------------------------------------------- */

:root {
  --bembos-blue:        #1100CF;
  --bembos-blue-dark:   #0D00A3;
  --bembos-blue-light:  #3322E0;
  --bembos-blue-10:     rgba(17, 0, 207, 0.10);
  --bembos-blue-20:     rgba(17, 0, 207, 0.20);
  --bembos-yellow:      #FFE100;
  --bembos-accent-red:  #FF352E;
  --bembos-cover-bg:    #ffe1a3;
  --font-heading-now:   'HeadingNow', 'Montserrat', Arial, sans-serif;
  --font-heading-now-bold: 'HeadingNowBold', 'Montserrat', Arial, sans-serif;
  --font-portuguesa:    'PortuguesaScript', cursive;
  --font-duplicate-slab: 'DuplicateSlabMedium', serif;
}

/* --------------------------------------------------------------------------- */
/* Typography utilities for editor use                                         */
/* --------------------------------------------------------------------------- */

.font-heading-now,
.font-heading-now :is(p, h1, h2, h3, h4, h5, h6, span, strong, em, li, a) {
  font-family: var(--font-heading-now) !important;
}

.font-heading-now-bold,
.font-heading-now-bold :is(p, h1, h2, h3, h4, h5, h6, span, strong, em, li, a) {
  font-family: var(--font-heading-now-bold) !important;
}

.font-portuguesa,
.font-portuguesa :is(p, h1, h2, h3, h4, h5, h6, span, strong, em, li, a) {
  font-family: var(--font-portuguesa) !important;
}

.font-duplicate-slab,
.font-duplicate-slab :is(p, h1, h2, h3, h4, h5, h6, span, strong, em, li, a) {
  font-family: var(--font-duplicate-slab) !important;
}

/* --------------------------------------------------------------------------- */
/* Color copy cards                                                            */
/* --------------------------------------------------------------------------- */

.color-copy-card {
  position: relative;
  cursor: pointer;
  overflow: visible;
  z-index: 1;
}

.color-copy-card:focus-visible {
  outline: 3px solid rgba(17, 0, 207, 0.35);
  outline-offset: 4px;
}

.color-copy-card__cursor-label {
  position: absolute;
  left: 0;
  top: 0;
  transform: none;
  pointer-events: none;
  z-index: 30;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 80px;
  padding: 8px 12px;
  border-radius: 9px;
  background: #1e9bff;
  color: #ffffff;
  font-family: var(--font-duplicate-slab);
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
  opacity: 0;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.16);
  transition: opacity 0.16s ease;
}

.color-copy-card:hover .color-copy-card__cursor-label,
.color-copy-card:focus-visible .color-copy-card__cursor-label,
.color-copy-card.is-copied .color-copy-card__cursor-label {
  opacity: 1;
}

/* --------------------------------------------------------------------------- */
/* Image diagonal accent                                                       */
/* --------------------------------------------------------------------------- */

.diagonal-red,
.diagonal-red .wp-block-image,
.diagonal-red.wp-block-image {
  position: relative;
}

.diagonal-red .wp-block-image,
.diagonal-red.wp-block-image {
  display: block;
  margin-bottom: 0;
  overflow: hidden;
}

.diagonal-red img,
.diagonal-red .wp-block-image img,
.diagonal-red.wp-block-image img {
  display: block;
  width: 100%;
}

.diagonal-red::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cline x1='0' y1='100' x2='100' y2='0' stroke='%23FF352E' stroke-width='0.8' vector-effect='non-scaling-stroke' shape-rendering='geometricPrecision'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
  z-index: 2;
}

/* =============================================================================
   PORTADA DE CAPÍTULO — estilo Standards.site
   ============================================================================= */

/* Bleed out of bembos-main padding (--content-padding: 32px) */
.bembos-chapter-cover {
  --chapter-cover-diagonal-color: var(--chapter-page-bg, transparent);
  position: relative;
  z-index: 1;
  background-color: var(--chapter-cover-bg, var(--bembos-cover-bg));
  background-image: var(--chapter-cover-bg-image, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: visible;
  min-height: 800px;
  padding: 48px 56px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.bembos-chapter-cover::after {
  content: '';
  position: absolute;
  top: 100%;
  left: -2%;
  width: 104%;
  height: clamp(170px, 22vw, 280px);
  background: var(--chapter-cover-diagonal-color);
  transform: skewY(-4deg);
  transform-origin: top left;
  z-index: 1;
}

.bembos-chapter-cover--has-svg {
  background-image: none !important;
}

.bembos-chapter-cover--no-diagonal {
  margin-bottom: 0;
}

.bembos-chapter-cover--no-diagonal::after {
  display: none;
}

.bembos-chapter-cover__media {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  z-index: 1;
}

/* "Chapter X" label */
.bembos-chapter-cover__number {
  font-family: var(--font-duplicate-slab);
  font-size: clamp(2.5rem, 4vw, 4.4rem);
  color: var(--chapter-cover-number-color, var(--bembos-blue));
  transform: skewX(-8deg) rotate(-4deg);
  z-index: 2;
  margin: 0 auto 12px;
}

/* Chapter title — massive HeadingNow */
.bembos-chapter-cover__title {
  font-family: var(--font-heading-now);
  font-size: clamp(6rem, 15vw, 15rem);
  color: var(--chapter-cover-title-color, var(--bembos-blue));
  text-transform: uppercase;
  transform: skewX(-10deg) rotate(-5deg);
  transform-origin: center center;
  position: relative;
  z-index: 2;
  max-width: min(92vw, 1500px);
  margin: 0 auto;
  line-height: 1;
  text-wrap: balance;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* =============================================================================
   PORTADA DE INICIO (home-bembos)
   ============================================================================= */

.bembos-home-cover {
  position: relative;
  background: var(--bembos-blue);
  overflow: hidden;
  min-height: 420px;
  display: flex;
  align-items: center;
  margin: -32px -32px 0;
}

/* Yellow accent bar at bottom */
.bembos-home-cover::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 12px;
  background: var(--bembos-yellow);
}

/* Red diagonal accent */
.bembos-home-cover::before {
  content: '';
  position: absolute;
  top: 0;
  right: 120px;
  width: 8px;
  height: 60%;
  background: var(--bembos-accent-red);
  transform: skewX(-12deg);
}

.bembos-home-cover__inner {
  padding: 64px 56px;
  position: relative;
  z-index: 1;
}

.bembos-home-cover__eyebrow {
  font-family: var(--font-heading-now);
  font-size: clamp(0.9rem, 1.4vw, 1.1rem);
  font-weight: 900;
  color: rgba(255,255,255,0.7);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin: 0 0 8px;
}

.bembos-home-cover__brand {
  font-family: var(--font-heading-now) !important;
  font-size: clamp(5rem, 14vw, 12rem) !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  text-transform: uppercase !important;
  letter-spacing: -0.04em !important;
  line-height: 0.85 !important;
  margin: 0 0 16px !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
}

.bembos-home-cover__year {
  font-family: var(--font-heading-now);
  font-size: 1.1rem;
  color: var(--bembos-yellow);
  font-weight: 900;
  letter-spacing: 0.06em;
  margin: 0;
}

.bembos-home-cover__summary {
  max-width: 720px;
}

.bembos-home-cover__summary p {
  margin: 0;
  font-family: var(--font-duplicate-slab);
  font-size: clamp(1rem, 1.6vw, 1.3rem);
  line-height: 1.45;
  color: rgba(255,255,255,0.84);
}

.bembos-home-page {
  background: var(--chapter-page-bg, #f2f2f2);
}

.bembos-home-main {
  background: var(--chapter-page-bg, #f2f2f2);
}

.bembos-home-sections {
  padding: 48px 56px 72px;
}

.bembos-home-sections__intro {
  display: grid;
  gap: 10px;
  max-width: 720px;
  margin-bottom: 36px;
}

.bembos-home-sections__kicker {
  font-family: var(--font-heading-now-bold);
  font-size: 0.95rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bembos-blue);
}

.bembos-home-sections__intro h2 {
  margin: 0;
  font-family: var(--font-heading-now);
  font-size: clamp(2.2rem, 5vw, 4.4rem);
  line-height: 0.95;
  color: var(--bembos-blue);
  text-transform: uppercase;
}

.bembos-home-sections__intro p {
  margin: 0;
  font-family: var(--font-duplicate-slab);
  font-size: 1rem;
  color: rgba(17,0,207,0.82);
}

.bembos-home-sections__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.bembos-home-card {
  min-width: 0;
}

.bembos-home-card__link {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 100%;
  padding: 28px;
  background: #ffffff;
  border: 2px solid rgba(17,0,207,0.08);
  box-shadow: 0 18px 42px rgba(17,0,207,0.08);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.bembos-home-card__link:hover,
.bembos-home-card__link:focus-visible {
  color: inherit;
  transform: translateY(-3px);
  border-color: rgba(17,0,207,0.22);
  box-shadow: 0 24px 48px rgba(17,0,207,0.12);
}

.bembos-home-card__eyebrow {
  font-family: var(--font-heading-now-bold);
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(17,0,207,0.54);
}

.bembos-home-card__title {
  margin: 0;
  font-family: var(--font-heading-now);
  font-size: clamp(2rem, 3.4vw, 3.6rem);
  line-height: 0.95;
  color: var(--bembos-blue);
  text-transform: uppercase;
}

.bembos-home-card__description {
  margin: 0;
  font-family: var(--font-duplicate-slab);
  color: #3a3a5b;
  line-height: 1.4;
}

.bembos-home-card__children {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.bembos-home-card__children li {
  font-family: var(--font-duplicate-slab);
  font-size: 0.98rem;
  line-height: 1.2;
  color: var(--bembos-blue);
}

.bembos-home-card__cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading-now-bold);
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--bembos-blue);
}

.bembos-home-body {
  padding: 0 56px 72px;
}

.bembos-home-empty-state {
  padding: 28px;
  background: #ffffff;
  border: 2px dashed rgba(17,0,207,0.24);
}

.bembos-home-empty-state h2,
.bembos-home-empty-state p {
  margin: 0;
}

.bembos-home-empty-state h2 {
  margin-bottom: 12px;
  font-family: var(--font-heading-now-bold);
  color: var(--bembos-blue);
}

.bembos-home-empty-state p {
  font-family: var(--font-duplicate-slab);
}

/* =============================================================================
   CONTENIDO DE CAPÍTULO
   ============================================================================= */

.bembos-chapter-page {
  position: relative;
  background: var(--chapter-page-bg, transparent);
}

.bembos-chapter-content {
  position: relative;
  z-index: 2;
  /* padding: 56px 0 72px; */
}

.entry-content .kt-inside-inner-col {
  padding: 0 60px;
}

.bembos-chapter-content > .entry-content > :not(.kb-row-layout-wrap):not(.wp-block-kadence-rowlayout) {
  padding: 0 60px;
}

.wp-block-column.is-layout-flow.wp-block-column-is-layout-flow .kt-inside-inner-col {
    padding: 0;
}

/* --------------------------------------------------------------------------- */
/* Section headings                                                             */
/* --------------------------------------------------------------------------- */

.bembos-chapter-content h2,
.bembos-chapter-content .entry-content h2 {
  font-family: var(--font-heading-now);
  font-size: clamp(1.4rem, 2.5vw, 1.9rem);
  font-weight: 900;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  background: var(--bembos-blue);
  color: #fff;
  padding: 16px 24px;
  margin: 56px -0px 28px;
  border-radius: 0;
  line-height: 1.1;
}

.bembos-chapter-content h3,
.bembos-chapter-content .entry-content h3 {
  font-family: var(--font-heading-now-bold);
  font-size: clamp(2.4rem, 5vw, 4.2rem);
  color: var(--bembos-blue);
}

/* --------------------------------------------------------------------------- */
/* Paragraphs                                                                    */
/* --------------------------------------------------------------------------- */

.bembos-chapter-content p,
.bembos-chapter-content .entry-content p {
  font-family: var(--font-duplicate-slab);
  line-height: normal;
  margin: 10px 0;
}

/* --------------------------------------------------------------------------- */
/* Code blocks — typography specs                                               */
/* --------------------------------------------------------------------------- */

.bembos-chapter-content pre.wp-block-code {
  font-family: var(--font-heading-now);
  font-size: clamp(1.8rem, 4vw, 3rem);
  background: var(--bembos-blue);
  color: var(--bembos-yellow);
  padding: 28px 32px;
  border-radius: 8px;
  letter-spacing: -0.02em;
  line-height: 1.1;
  text-transform: uppercase;
  overflow: auto;
  margin: 24px 0;
}

/* --------------------------------------------------------------------------- */
/* Color swatches                                                               */
/* --------------------------------------------------------------------------- */

.bembos-chapter-content .wp-block-html ul,
.bembos-chapter-content .wp-block-html ol {
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 20px 0 32px;
}

.bembos-chapter-content .wp-block-html li {
  text-align: center;
}

.bembos-chapter-content .wp-block-html li div {
  border: 1px solid rgba(0,0,0,0.12) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.10);
  transition: transform 0.15s ease;
}

.bembos-chapter-content .wp-block-html li:hover div {
  transform: scale(1.06);
}

.bembos-chapter-content .wp-block-html li small {
  font-family: 'SFMono-Regular', Consolas, monospace;
  font-size: 11px;
  color: #555;
  display: block;
  margin-top: 6px;
}

/* --------------------------------------------------------------------------- */
/* Images                                                                        */
/* --------------------------------------------------------------------------- */

.bembos-chapter-content .wp-block-image img {
  max-width: 100%;
  height: auto;
}

.bembos-chapter-content .entry-content img.bembos-image-reveal {
  opacity: 0;
  transform: translateY(28px) scale(0.985);
  transition:
    opacity 700ms ease,
    transform 850ms cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

.bembos-chapter-content .entry-content img.bembos-image-reveal.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
  .bembos-chapter-content .entry-content img.bembos-image-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* --------------------------------------------------------------------------- */
/* Separators                                                                    */
/* --------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------- */
/* Slogan using Portuguesa Script                                                */
/* --------------------------------------------------------------------------- */

.bembos-slogan,
.slogan-text {
  font-family: var(--font-portuguesa);
  font-size: clamp(2rem, 5vw, 4.5rem);
  color: var(--bembos-blue);
  line-height: 1.2;
  margin: 24px 0;
  display: block;
}

/* --------------------------------------------------------------------------- */
/* Responsive                                                                     */
/* --------------------------------------------------------------------------- */

@media (max-width: 768px) {
  .bembos-chapter-cover,
  .bembos-home-cover {
    margin: -16px -16px 0;
    padding: 36px 20px 64px;
    min-height: 320px;
  }

  .bembos-chapter-cover__number {
    font-size: clamp(1.9rem, 7vw, 2.8rem);
    margin-bottom: 6px;
  }

  .bembos-home-sections,
  .bembos-home-body {
    padding: 28px 20px 48px;
  }

  .bembos-home-sections__grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .bembos-home-card__link {
    padding: 20px;
  }

  .bembos-home-card__title {
    font-size: clamp(1.7rem, 11vw, 2.8rem);
  }

  .bembos-chapter-cover__title {
    font-size: clamp(3rem, 14vw, 5.6rem) !important;
    transform: skewX(-8deg) rotate(-4deg);
    max-width: 100%;
    line-height: 0.92;
  }

  .bembos-chapter-content {
    padding: 32px 0 48px;
  }

  .entry-content .kt-inside-inner-col {
    padding: 0 20px;
  }

  .bembos-chapter-content > .entry-content > :not(.kb-row-layout-wrap):not(.wp-block-kadence-rowlayout) {
    padding: 0 20px;
  }

  .bembos-chapter-page {
    margin: 0;
    padding: 0;
  }

  .bembos-chapter-content .chapter-content-band {
    margin: -84px -16px 0;
    padding: 120px 16px 64px;
  }

  .bembos-chapter-content .chapter-content-band::before {
    top: -86px;
    height: 110px;
    transform: rotate(4deg);
  }

  .bembos-chapter-content h2,
  .bembos-chapter-content .entry-content h2 {
    margin: 40px 0 20px;
    padding: 12px 16px;
    font-size: 1.2rem;
  }
}