/* ==========================================================================
   Creative Logo Design — base layer
   Deliberately conservative: this file ships on all 45 legacy service pages
   too, so it contains NO bare typographic element selectors (no `h1`, `p`,
   `body { font-size }`). Only accessibility and safety fixes that are
   strictly better everywhere. Section typography lives in home.css.
   ========================================================================== */

/* --- accessibility: a real, visible focus ring ------------------------- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--cld-magenta-300);
  outline-offset: 3px;
  border-radius: var(--cld-radius-sm);
}

/* Legacy CSS sets `outline: none` in a few places; this wins it back. */
.cld-scope :focus-visible,
.cld-header :focus-visible,
.cld-footer :focus-visible {
  outline: 2px solid var(--cld-magenta-300) !important;
  outline-offset: 3px;
}

::selection {
  background: var(--cld-magenta-500);
  color: #fff;
}

/* --- media never overflows its column ----------------------------------
   Wrapped in :where() so this rule carries zero specificity and can never
   beat a component that sets an explicit height (e.g. .cld-nav__logo).
   ----------------------------------------------------------------------- */
:where(.cld-scope, .cld-header, .cld-footer) :where(img, svg, video) {
  max-width: 100%;
  height: auto;
}

/* --- skip link ---------------------------------------------------------- */
.cld-skip-link {
  position: absolute;
  left: var(--cld-space-4);
  top: -100%;
  z-index: calc(var(--cld-z-drawer) + 10);
  padding: 0.75rem 1.25rem;
  background: #fff;
  color: var(--cld-text-on-light);
  font-family: var(--cld-font-display);
  font-weight: 700;
  font-size: var(--cld-fs-sm);
  border-radius: var(--cld-radius-sm);
  box-shadow: var(--cld-shadow-lg);
  transition: top var(--cld-dur-fast) var(--cld-ease-out);
}
.cld-skip-link:focus {
  top: var(--cld-space-4);
}

/* --- scroll behaviour ---------------------------------------------------- */
html {
  scroll-behavior: smooth;
  /* sticky header height, so in-page anchors don't hide under it */
  scroll-padding-top: 7rem;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* --- the redesign root --------------------------------------------------
   `.cld-scope` wraps the redesigned homepage content. Typography inside it
   opts out of the legacy `p { line-height: 100% }` / `h1 { font-size: 68px }`
   rules from creative.css.
   ------------------------------------------------------------------------ */
.cld-scope {
  font-family: var(--cld-font-body);
  font-size: var(--cld-fs-body);
  line-height: var(--cld-lh-body);
  color: var(--cld-text-on-light);
  overflow-x: clip;
}

.cld-scope :where(p) {
  line-height: var(--cld-lh-body);
  font-size: inherit;
  margin-bottom: var(--cld-space-4);
}

/* Element selectors are wrapped in :where() so these carry the specificity of
   `.cld-scope` alone (0,1,0). That is still enough to beat creative.css's bare
   `h1{font-size:68px}` (0,0,1), but it lets any single component class —
   .cld-skill__title, .cld-tile__label, .cld-office__city — override the size
   without needing a doubled selector. Written as `.cld-scope h3` these were
   (0,1,1) and silently won against every component. */
.cld-scope :where(h1, h2, h3, h4, h5, h6) {
  font-family: var(--cld-font-display);
  line-height: var(--cld-lh-snug);
  letter-spacing: var(--cld-tracking-tight);
  margin-bottom: var(--cld-space-4);
  text-wrap: balance;
  overflow-wrap: break-word;
}

.cld-scope :where(h1) { font-size: var(--cld-fs-h1); font-weight: 800; line-height: var(--cld-lh-tight); }
.cld-scope :where(h2) { font-size: var(--cld-fs-h2); font-weight: 800; }
.cld-scope :where(h3) { font-size: var(--cld-fs-h3); font-weight: 700; }
.cld-scope :where(h4) { font-size: var(--cld-fs-h4); font-weight: 700; }
.cld-scope :where(h5) { font-size: var(--cld-fs-h5); font-weight: 700; }

.cld-scope a { text-decoration: none; }

/* --- reduced motion: kill every decorative animation outright ----------- */
@media (prefers-reduced-motion: reduce) {
  .cld-scope *,
  .cld-header *,
  .cld-footer * {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
  .cld-reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}