/* ==========================================================================
   Bad Rep Agency — badrep.agency
   Design tokens, fluid grid and components.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand palette */
  --crimson:     #db0447;
  --black:       #000000;
  --white:       #ffffff;
  --lime:        #d0fc01;  /* "custom" text colour  */
  --lime-dark:   #c0e416;  /* "darkAccent" text colour */
  --shape-green: #41af23;
  --shape-lime:  #a4ea1a;
  --shape-olive: #8ba94f;
  --box-green:   #3e8321;  /* text-block background */
  --box-olive:   #a9b800;  /* text-block background */

  /* Layout */
  --gap: 11px;
  --gutter: 4vw;
  --site-max: 2000px;
  --logo-h: 50px;
  --header-pad-y: 2vw;
  --header-h: calc(var(--logo-h) + var(--header-pad-y) * 2);

  /* Fluid type unit. Every size is `16px + K * --u`. On desktop the unit
     tracks viewport width; below 768px it tracks the larger viewport edge,
     so type does not shrink when a phone is held in portrait. */
  --u: 1vw;

  --fs-h1:      calc(16px + 3.84 * var(--u));
  --fs-h2:      calc(16px + 2.16 * var(--u));
  --fs-h3:      calc(16px + 1.44 * var(--u));
  --fs-h4:      calc(16px + 0.24 * var(--u));
  --fs-body:    calc(16px + 0.48 * var(--u));
  --fs-large:   calc(16px + 0.84 * var(--u));
  --fs-marquee: calc(16px + 0.60 * var(--u));

  --font-display: 'Lacquer', 'Comic Sans MS', cursive, sans-serif;
  --font-body:    'Gaegu', 'Comic Sans MS', cursive, sans-serif;

  /* Per-section theme, overridden by the .theme-* classes below. */
  --bg: var(--white);
  --fg: var(--black);
  --accent: var(--crimson);
}

@media (max-width: 767px) {
  :root {
    --u: 1vmax;
    --gutter: 6vw;
    --logo-h: 37px;
    --header-pad-y: 6vw;
  }
}

/* Section themes ---------------------------------------------------------- */
.theme-light  { --bg: var(--white);   --fg: var(--black); --accent: var(--crimson); }
.theme-dark   { --bg: var(--black);   --fg: var(--white); --accent: var(--crimson); }
.theme-brand  { --bg: var(--crimson); --fg: var(--white); --accent: var(--crimson); }
.theme-olive  { --bg: var(--shape-olive); --fg: var(--black); --accent: var(--crimson); }

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--shape-olive);
  color: var(--black);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.2;
  letter-spacing: 0.04em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; border: 0; }

a { color: inherit; }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.06em;
}

h1 { font-size: var(--fs-h1); line-height: 1.221; }
h2 { font-size: var(--fs-h2); line-height: 1.299; }
h3 { font-size: var(--fs-h3); line-height: 1.333; }
h4 { font-size: var(--fs-h4); line-height: 1.389; }

p { margin: 0; }

blockquote { margin: 0 40px; }

ul { margin: 0; padding-left: 40px; }

/* Rich-text colour spans, mirroring the source content model. */
.c-accent { color: var(--accent); }
.c-black  { color: var(--black); }
.c-white  { color: var(--white); }
.c-lime   { color: var(--lime); }
.c-lime-d { color: var(--lime-dark); }

.t-large { font-size: var(--fs-large); line-height: 1.2; letter-spacing: 0.04em; }

/* Text alignment helpers, mirroring the per-block alignment in the source. */
.ta-c { text-align: center; }
.ta-r { text-align: right; }
.ta-j { text-align: justify; }


.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   3. Header
   -------------------------------------------------------------------------- */
.header {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--header-pad-y) var(--gutter);
  color: var(--white);
}

.header__logo img {
  display: block;
  height: var(--logo-h);
  width: auto;
}

.nav { display: flex; align-items: center; gap: 1em; }

.nav__list {
  display: flex;
  align-items: center;
  gap: 1em;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav__link {
  display: inline-block;
  padding: 0.1em 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  letter-spacing: 0.04em;
  color: var(--white);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.nav__link:hover,
.nav__link[aria-current="page"] { border-bottom-color: currentColor; }

/* Dropdown folders */
.nav__item--folder { position: relative; }

.nav__folder {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: max-content;
  margin: 0;
  padding: 0.6em 1em;
  list-style: none;
  background: var(--black);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}

.nav__item--folder:hover .nav__folder,
.nav__item--folder:focus-within .nav__folder {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.nav__folder a {
  display: block;
  padding: 0.2em 0;
  color: var(--white);
  text-decoration: none;
  white-space: nowrap;
}

.nav__folder a:hover { color: var(--crimson); }

/* Burger (mobile) */
.burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 34px;
  height: 34px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}

.burger span {
  display: block;
  height: 1px;
  background: var(--white);
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 767px) {
  .burger { display: flex; }

  .nav {
    position: fixed;
    inset: 0;
    z-index: 99;
    flex-direction: column;
    justify-content: center;
    padding: var(--header-h) var(--gutter) 2rem;
    background: var(--crimson);
    overflow-y: auto;
    transform: translateY(-100%);
    transition: transform 0.3s ease;
  }

  .nav.is-open { transform: none; }

  .nav__list { flex-direction: column; align-items: flex-start; gap: 0.4em; }
  .nav__link { font-size: var(--fs-h3); font-family: var(--font-display); }

  .nav__folder {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    padding: 0 0 0 1em;
    background: none;
  }
}

/* --------------------------------------------------------------------------
   4. Fluid grid
   Reproduces the source layout engine: a 26-column grid (gutter + 24 cells +
   gutter) on desktop, 10 columns (gutter + 8 cells + gutter) on mobile.
   Row height scales with the container so blocks keep their proportions.
   -------------------------------------------------------------------------- */
.section {
  position: relative;
  background: var(--bg);
  color: var(--fg);
}

.grid {
  --grid-gutter: calc(var(--gutter) - var(--gap));
  --cell-max: calc((var(--site-max) - (var(--gap) * 23)) / 24);
  --container-width: min(var(--site-max), calc(100vw - var(--gutter) * 2));
  --row-height: calc(var(--container-width) * 0.0215);

  display: grid;
  position: relative;
  grid-template-columns:
    minmax(var(--grid-gutter), 1fr)
    repeat(24, minmax(0, var(--cell-max)))
    minmax(var(--grid-gutter), 1fr);
  grid-template-rows: repeat(var(--rows, 1), minmax(var(--row-height), auto));
  gap: var(--gap);
  overflow-x: clip;
}

@media (max-width: 767px) {
  .grid {
    --cell-max: calc((var(--site-max) - (var(--gap) * 7)) / 8);
    grid-template-columns:
      minmax(var(--grid-gutter), 1fr)
      repeat(8, minmax(0, var(--cell-max)))
      minmax(var(--grid-gutter), 1fr);
    grid-template-rows: repeat(var(--rows-m, 1), minmax(24px, auto));
  }
}

/* A block places itself with the --d (desktop) / --m (mobile) grid areas.
   Text blocks stay block-level so their margins collapse the way the
   source's rich-text container does. */
.b {
  display: block;
  grid-area: var(--d);
  min-width: 0;
}

@media (max-width: 767px) {
  .b { grid-area: var(--m); }
}

.b--center,
.b--img {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.b--center { align-items: center; }

/* --------------------------------------------------------------------------
   4a. Rich-text rhythm
   Spacing between paragraphs is a fixed 16px in the source; list spacing is
   relative to the type size. First and last children sit flush so a block's
   text aligns with the top of its grid area.
   -------------------------------------------------------------------------- */
.b > p,
.b > h1,
.b > h2,
.b > h3,
.b > h4,
.b > blockquote { margin-block: 16px; }

.b > ul { margin-block: 1em; }

.b > :first-child { margin-top: 0; }
.b > :last-child  { margin-bottom: 0; }

.b li > p { margin-block: 0.5em; }
.b ul ul  { margin-block: 0.5em; }

/* Images fill their block and never crop. The flex basis keeps the block
   sized by the grid rather than by the picture's intrinsic height. */
.b--img { align-items: stretch; }

.b--img img {
  display: block;
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

/* Decorative colour rectangles that sit behind the copy. */
.shape {
  width: 100%;
  height: 100%;
  background: var(--shape, var(--shape-olive));
}

/* First section clears the absolutely positioned header. */
.section--first { padding-top: var(--header-h); }

/* Vertical padding, matching the source section settings. */
.section--padded { padding-block: calc(6.6 * var(--u)); }

/* Torn-paper divider between sections.
   Two layers at the section's bottom edge:
   ::before  a sawtooth of the NEXT section's colour spiking upward,
   ::after   a row of thick dashes in THIS section's colour hanging over it.
   Together they read as a ripped paper edge. Set --tear and --tear-next. */
.section--tear {
  position: relative;
  padding-bottom: 1vw;
}

.section--tear::before,
.section--tear::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

.section--tear::before {
  height: 12px;
  background: var(--tear-next, transparent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2060%2012'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0,12%20L15,0%20L60,12%20Z'%20fill='%23fff'/%3E%3C/svg%3E") bottom left / 6vw 12px repeat-x;
          mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2060%2012'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0,12%20L15,0%20L60,12%20Z'%20fill='%23fff'/%3E%3C/svg%3E") bottom left / 6vw 12px repeat-x;
}

.section--tear::after {
  height: 18px;
  transform: translateY(50%);
  background-image: repeating-linear-gradient(
    to right,
    var(--tear) 0 29px,
    transparent 29px 63px
  );
}

/* Text blocks that carry their own background, padding or outline. */
.b--box {
  background: var(--box-bg, transparent);
  padding: var(--box-pad, 0);
  border: var(--box-border, 0 solid transparent);
}

/* --------------------------------------------------------------------------
   4b. Hand-drawn text highlights
   Two shapes from the source: a curved underline and a marker sweep drawn
   behind the words.
   -------------------------------------------------------------------------- */
.hl {
  background-repeat: no-repeat;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.hl--underline {
  background-position: 0 100%;
  background-size: 100% 0.34em;
  padding-bottom: 0.06em;
}

.hl--marker {
  background-position: 0 50%;
  background-size: 100% 1em;
  padding: 0 0.15em;
}

.hl--underline.hl--accent {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 14' preserveAspectRatio='none'%3E%3Cpath d='M2,9 C70,3 130,12 200,7 C270,2 330,11 398,6' fill='none' stroke='%23db0447' stroke-width='4' stroke-linecap='square'/%3E%3C/svg%3E");
}

.hl--underline.hl--lime {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 14' preserveAspectRatio='none'%3E%3Cpath d='M2,9 C70,3 130,12 200,7 C270,2 330,11 398,6' fill='none' stroke='%23c0e416' stroke-width='4' stroke-linecap='square'/%3E%3C/svg%3E");
}

.hl--underline.hl--theme {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 14' preserveAspectRatio='none'%3E%3Cpath d='M2,9 C70,3 130,12 200,7 C270,2 330,11 398,6' fill='none' stroke='%23000000' stroke-width='4' stroke-linecap='square'/%3E%3C/svg%3E");
}

.hl--marker.hl--lime {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cpath d='M3,6 L197,3 L196,35 L4,37 Z' fill='%23c0e416'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 3.875em;
  padding: 0 2.2em;
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: 0.04em;
  text-align: center;
  text-decoration: none;
  border: 0;
  border-radius: 0;
  background: var(--btn-bg);
  color: var(--btn-fg);
  transition: opacity 0.2s ease;
}

.btn:hover { opacity: 0.8; }

/* The button inverts against its section. */
.theme-light .btn { --btn-bg: var(--crimson); --btn-fg: var(--white); }
.theme-brand .btn { --btn-bg: var(--white);   --btn-fg: var(--crimson); }
.theme-dark  .btn { --btn-bg: var(--white);   --btn-fg: var(--black); }

/* --------------------------------------------------------------------------
   6. Marquee
   Text is set along a shallow sine path and scrolls horizontally.
   -------------------------------------------------------------------------- */
.marquee {
  width: 100%;
  overflow: hidden;
  line-height: 1;
  mix-blend-mode: multiply;
}

.marquee svg {
  display: block;
  width: 100%;
  height: 63px;
  overflow: visible;
  fill: currentColor;
}

.marquee text {
  font-family: var(--font-display);
  font-size: var(--fs-marquee);
  letter-spacing: -0.06em;
}

@media (prefers-reduced-motion: reduce) {
  .marquee text { animation: none !important; }
  html { scroll-behavior: auto; }
}

/* --------------------------------------------------------------------------
   6b. Scheduler
   The Calendly widget fills its grid block. The fallback only appears if the
   widget fails to load.
   -------------------------------------------------------------------------- */
.scheduler { width: 100%; }

/* Calendly sets its own height as the user moves through the steps, so the
   widget is left to grow and the grid row expands with it. */
.scheduler .calendly-inline-widget {
  width: 100%;
  min-height: 700px;
}

.scheduler__fallback {
  max-width: 34em;
  margin-inline: auto;
  padding: 2em 1em;
  text-align: center;
  font-size: var(--fs-large);
  color: var(--black);
}

.scheduler__fallback[hidden] { display: none; }

.scheduler__fallback a { color: var(--crimson); }

/* --------------------------------------------------------------------------
   7. Footer
   The source site ends on an empty black strip; this matches it. Swap in
   real footer content by adding markup inside .footer.
   -------------------------------------------------------------------------- */
.footer {
  background: var(--black);
  color: var(--white);
  font-size: var(--fs-body);
}

.footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  align-items: center;
  justify-content: space-between;
  padding: 2vw var(--gutter);
}

.footer a { text-decoration: none; }
.footer a:hover { text-decoration: underline; }