/*
 * gjc-site.css — the one site-wide stylesheet of gudjob.net.
 *
 * Source of truth: design/mu-plugins/gjc-site-css/ in the gudjob-website repo; installed as
 * wp-content/mu-plugins/gjc-site-css/ and printed by mu-plugin gjc-site-css.php right before
 * Additional CSS (wp_head 100), after every widget / Elementor stylesheet in <head>.
 *
 * What belongs here: tokens the kit has no slot for, site-wide base rules, fixes for the theme
 * and for plugins, and small page rules scoped by a body class. What does not: CSS of one
 * component (→ that widget's style.css), colours and fonts (→ Elementor kit).
 * Additional CSS (Customizer) stays empty — use it only for an emergency fix, then move it here.
 *
 * Replaces (2026-10-09): Additional CSS + Elementor Custom Code 21383 (no orphans),
 * 21556 (legal pages), 23318 (portfolio title wrapping). Portfolio singles: gjc-site-portfolio.css.
 */

/* ── 1. Tokens ─────────────────────────────────────────────────────────────── */

:root {
  --gjc-primary-shadow: 0 0.25rem 0.75rem color-mix(in srgb, var(--e-global-color-primary, #050505) 10%, transparent);
  --gjc-home-type-hero: 4.75rem;
  --gjc-home-type-section: 3.125rem;
  --gjc-home-type-feature: 2rem;
  --gjc-home-type-lead: 1.0625rem;
  --gjc-home-type-body: 1rem;
  --gjc-home-type-recognition: 2.25rem;
  --gjc-home-type-cta: 3.125rem;
  --gjc-home-type-ui: 0.8125rem;
  --gjc-home-leading-display: 1.06;
}

/* Single-source responsive type scale. */
@media (max-width: 1100px) {
  :root {
    --gjc-home-type-hero: 3.5rem;
    --gjc-home-type-section: 2.75rem;
    --gjc-home-type-feature: 1.875rem;
    --gjc-home-type-cta: 2.625rem;
    --gjc-home-type-recognition: 2.375rem;
  }
}

@media (max-width: 767px) {
  :root {
    --gjc-home-type-hero: 2.875rem;
    --gjc-home-type-section: 2.125rem;
    --gjc-home-type-feature: 1.625rem;
    --gjc-home-type-cta: 2.25rem;
    --gjc-home-type-recognition: 2.125rem;
    --gjc-home-type-lead: 1rem;
  }
}

/* ── 2. Base ───────────────────────────────────────────────────────────────── */

/* Links never underline. */
html body a,
html body a:hover,
html body a:focus,
html body a:active {
  text-decoration: none !important;
}

/* No single orphan word on the last line of a paragraph. */
body p {
  text-wrap: pretty;
}

/* No horizontal scroll from full-bleed (100vw) sections and marquees. */
html {
  overflow-x: clip;
}

body {
  overflow-x: clip;
}

/* Touch devices: a hover transform swallows the first tap ("tap again to navigate").
   Disable hover transforms on touch and remove the tap delay / double-tap zoom. */
@media (hover: none), (pointer: coarse) {
  a[href]:hover, button:hover, [role="button"]:hover, input[type="submit"]:hover, input[type="button"]:hover {
    transform: none !important;
    translate: none !important;
    scale: none !important;
  }
  a[href], button, [role="button"], input[type="submit"], input[type="button"] {
    touch-action: manipulation;
  }
}

/* ── 3. Typography by role ─────────────────────────────────────────────────── */

/* Every heading uses the display token (Merriweather). The :not(.page-id-20355) only sets the
   specificity (0,2,2) that the rules below and the widgets are tuned against — page 20355 no
   longer exists; keep the selector as it is. */
body:not(.page-id-20355) .elementor h1,
body:not(.page-id-20355) .elementor h2,
body:not(.page-id-20355) .elementor h3,
body:not(.page-id-20355) .elementor h4,
body:not(.page-id-20355) .elementor h5,
body:not(.page-id-20355) .elementor h6,
body:not(.page-id-20355) .elementor .elementor-heading-title {
  font-family: var(--e-global-typography-4b2bf32-font-family) !important;
  font-weight: var(--e-global-typography-4b2bf32-font-weight) !important;
  line-height: var(--e-global-typography-4b2bf32-line-height) !important;
  letter-spacing: var(--e-global-typography-4b2bf32-letter-spacing) !important;
}

/* Merriweather = display headings (hero, section, row titles, >= ~28px). Manrope = card / UI
   titles (< ~24px): add the class "gjc-ui-title" to the heading or its wrapper (Elementor >
   Advanced > CSS Classes, or in a widget template). Beats the rule above, incl. mobile. */
html body .elementor .gjc-ui-title,
html body .elementor .gjc-ui-title :is(h1, h2, h3, h4, h5, h6, .elementor-heading-title),
html body .elementor :is(h1, h2, h3, h4, h5, h6, .elementor-heading-title).gjc-ui-title {
  font-family: var(--e-global-typography-text-font-family, Manrope, sans-serif) !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
  letter-spacing: normal !important;
}

@media (max-width: 767px) {
  body:not(.page-id-20355) .elementor h1,
  body:not(.page-id-20355) .elementor h2,
  body:not(.page-id-20355) .elementor h3,
  body:not(.page-id-20355) .elementor h4,
  body:not(.page-id-20355) .elementor h5,
  body:not(.page-id-20355) .elementor h6,
  body:not(.page-id-20355) .elementor .elementor-heading-title {
    line-height: 1.26 !important;
  }
}

/* Project titles wrap in balanced lines; the premium overview keeps natural ("pretty") breaks. */
[class*="gjc-"][class*="__project-title"],
[class*="gjc-"][class*="portfolio"][class*="__title"] {
  text-wrap: balance !important;
  hyphens: auto;
  -webkit-hyphens: auto;
}

.gjc-portfolio-premium-overview h1,
[class*="premium-overview"] [class*="title"],
[class*="portfolio-premium"] [class*="title"] {
  text-wrap: pretty !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

/* ── 4. Theme (Hello Elementor) ────────────────────────────────────────────── */

/* Elementor content owns the page headings: hide the title Hello prints. */
body .site-main > .page-header {
  display: none !important;
}

h1.entry-title {
  display: none !important;
}

/* Clearfix on the header / footer locations — PRO Elements' header and footer documents added it to their own CSS. */
.elementor-location-header::before,
.elementor-location-footer::before {
  content: "";
  display: table;
  clear: both;
}

/* ── 5. Plugins ────────────────────────────────────────────────────────────── */

/* Elementor galleries / lightbox: images without captions. */
.elementor-image-carousel-caption,
.elementor-gallery-item__title,
.elementor-gallery-item__description,
.elementor-slideshow__title {
  display: none !important;
}

/* dFlip writes inline layout values after load, so these declarations must win. */
._df_thumb,
._df_button,
._df_custom {
  display: block !important;
  float: none !important;
  clear: both;
  margin: 0 auto !important;
  box-sizing: border-box;
}

._df_thumb {
  width: 40% !important;
  max-width: 100% !important;
}

@media (max-width: 767px) {
  ._df_thumb {
    width: 100% !important;
  }
}

/* dFlip popup thumbs: its .df-popup-thumb margin (30px 15px 15px) overrides its own centring. */
._df_thumb.df-popup-thumb {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ── 6. Pages ──────────────────────────────────────────────────────────────── */

/* /bio/ (7971): link list. */
.biolist a {
  padding: 0.625rem 1.25rem;
  border-radius: 999px;
  box-shadow: var(--gjc-primary-shadow);
}

/* Colokit x Doraemon (portfolio 21650): section rhythm — the first body section keeps the
   standard 40px, later ones get more air. */
body.postid-21650 .gjc-portfolio-legacy-case + .gjc-portfolio-legacy-case {
  margin-top: 6rem;
}

/* Legal pages — Privacy (21559) & Terms (21561): heading widget + text editor, 75rem canvas. */
body.page-id-21559 .elementor-section,
body.page-id-21561 .elementor-section {
  width: min(100% - 2.5rem, 75rem) !important;
  max-width: none !important;
  margin: 0 auto;
}

body.page-id-21559 .elementor-section .elementor-container,
body.page-id-21561 .elementor-section .elementor-container {
  max-width: 100% !important;
}

body.page-id-21559 .elementor-widget-heading,
body.page-id-21561 .elementor-widget-heading {
  margin-bottom: 2.25rem;
}

body.page-id-21559 .elementor-widget-heading .elementor-heading-title,
body.page-id-21561 .elementor-widget-heading .elementor-heading-title {
  max-width: 40rem;
}

body.page-id-21559 .elementor-widget-text-editor,
body.page-id-21561 .elementor-widget-text-editor {
  max-width: 60rem;
}

body.page-id-21559 .elementor-widget-text-editor p,
body.page-id-21561 .elementor-widget-text-editor p {
  text-wrap: pretty;
}

body.page-id-21559 .elementor-widget-text-editor a,
body.page-id-21561 .elementor-widget-text-editor a {
  color: var(--e-global-color-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

body.page-id-21559 .elementor-widget-text-editor h2,
body.page-id-21559 .elementor-widget-text-editor h3,
body.page-id-21561 .elementor-widget-text-editor h2,
body.page-id-21561 .elementor-widget-text-editor h3 {
  font-family: var(--e-global-typography-primary-font-family, Manrope);
  font-weight: 600;
  line-height: 1.2;
  margin: 2.5rem 0 1rem;
  color: var(--e-global-color-primary);
}

body.page-id-21559 .elementor-widget-text-editor h2,
body.page-id-21561 .elementor-widget-text-editor h2 {
  font-size: 1.5rem;
}

body.page-id-21559 .elementor-widget-text-editor h3,
body.page-id-21561 .elementor-widget-text-editor h3 {
  font-size: 1.25rem;
}

@media (max-width: 48rem) {
  body.page-id-21559 .elementor-section,
  body.page-id-21561 .elementor-section {
    width: 100%;
    padding: 0 1.25rem;
  }
}

/* Thank-you pages — contact (6873) and application (7390), Elementor Canvas. Moved from their page "Custom CSS"
   (a PRO Elements feature) on 2026-10-09; :where() keeps the original specificity. */
:where(body.page-id-6873, body.page-id-7390) .elementor-widget-button {
  display: flex;
  justify-content: center;
}

:where(body.page-id-6873, body.page-id-7390) .elementor-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  min-height: 48px;
  padding: 0 1.125rem;
  gap: 0.625rem;
  border: none !important;
  transition: background-color .25s ease, transform .25s ease, box-shadow .25s ease;
}

:where(body.page-id-6873, body.page-id-7390) .elementor-button:hover {
  transform: translateY(-0.125rem);
  box-shadow: 0 0.45rem 1rem color-mix(in srgb, var(--e-global-color-accent) 35%, transparent);
}

:where(body.page-id-6873, body.page-id-7390) .elementor-button:focus-visible {
  outline: 2px solid var(--e-global-color-accent);
  outline-offset: 3px;
}

:where(body.page-id-6873, body.page-id-7390) .elementor-button::before {
  content: "";
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  flex: 0 0 1.5rem;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.8%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M19 12H5M12 19l-7-7 7-7%27/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.8%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M19 12H5M12 19l-7-7 7-7%27/%3E%3C/svg%3E") center / contain no-repeat;
}

@media (prefers-reduced-motion: reduce) {
  :where(body.page-id-6873, body.page-id-7390) .elementor-button {
    transition: none;
  }
  :where(body.page-id-6873, body.page-id-7390) .elementor-button:hover {
    transform: none;
    box-shadow: none;
  }
}