/* WordPress / Elementor shell.
 * Canvas: 1440px. 12 stretch columns, 48px margins, 24px gutters.
 * Reading column: 432px (4 cols). Body type comes from Site Settings.
 * Colour blocks are full viewport width; copy sits in the canvas.
 */

 :root {
  --tangerine-charcoal: #262626;
  --tangerine-cream: #fff9f5;
  --tangerine-sand: #f0dfcf;
  --tangerine-red: #f44349;
  --tc-canvas: 1440px;
  --tc-margin: 48px;
  --tc-gutter: 24px;
  --tc-cols: 12;
  --tc-col: 90px;
  --tc-read: 432px;
  --tc-span-3: 318px;
  --tc-span-4: 432px;
  --tc-span-6: 660px;
  --tc-span-8: 888px;
  --tc-hero: 900px;
  --tc-max: var(--tc-canvas);
  --gutter: var(--tc-margin);
}

html,
body.tangerine-theme {
  margin: 0;
  background: var(--tangerine-cream, #fff9f5);
  color: var(--tangerine-charcoal, #262626);
  overflow-x: clip;
}

.tc-page,
body.tangerine-theme .elementor {
  width: 100%;
  max-width: none;
  margin: 0;
  overflow: visible;
}

/* One article around the article widgets. No box of its own, so section layout stays put. */
.tc-article {
  display: block;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}

body.tangerine-theme .elementor {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

/* Full-bleed canvas — must beat Elementor boxed max-width or the page hugs the left. */
body.tangerine-theme .elementor-section,
body.tangerine-theme .elementor-container,
body.tangerine-theme .elementor-column,
body.tangerine-theme .elementor-widget-wrap,
body.tangerine-theme .e-con,
body.tangerine-theme .e-con-inner {
  max-width: none !important;
  width: 100%;
  overflow: visible;
}

body.tangerine-theme .elementor-section.elementor-section-boxed > .elementor-container {
  max-width: none !important;
  width: 100% !important;
}

body.tangerine-theme .elementor-column-gap-default > .elementor-column > .elementor-element-populated {
  padding: 0;
}

/* Full-width colour; 1440 canvas + 48px margins.
   Widgets that set their own side gutters are excluded — do NOT zero their
   padding (that ripped About content off the Figma canvas). */
body.tangerine-theme .tc-w:not(.tc-w-hero):not(.tc-w-bleed):not(.tc-w-header):not(.tc-w-marquee):not(.tc-w-chosen):not(.tc-w-adv):not(.tc-w-stats):not(.tc-w-scatter):not(.tc-w-work):not(.tc-w-quote):not(.tc-w-split):not(.tc-w-loop):not(.tc-w-why):not(.tc-w-cta):not(.tc-w-cols--stack):not(.tc-case) {
  --tc-side: max(var(--tc-margin), calc((100% - var(--tc-canvas)) / 2 + var(--tc-margin)));
  padding-left: var(--tc-side);
  padding-right: var(--tc-side);
}

/* Elementor editor / preview: keep About widgets full-bleed and readable. */
.elementor-editor-active .tc-w-hero,
.elementor-editor-preview .tc-w-hero,
body.tangerine-theme .tc-w-hero {
  min-height: var(--tc-hero, 900px);
}

.elementor-editor-active .tc-w-hero--about,
.elementor-editor-preview .tc-w-hero--about,
body.tangerine-theme .tc-w-hero--about {
  min-height: 720px;
  height: 720px;
}

.elementor-editor-active .tc-w-hero__media,
.elementor-editor-preview .tc-w-hero__media,
body.tangerine-theme .tc-w-hero__media {
  min-height: inherit !important;
  height: 100% !important; /* beats saved Elementor height:0 */
}

.elementor-widget-tc-hero-media,
.elementor-widget-tc-quote,
.elementor-widget-tc-media-copy,
.elementor-widget-tc-proof-loop,
.elementor-widget-tc-why-us,
.elementor-widget-tc-contact-cta,
.elementor-widget-tc-hero-media > .elementor-widget-container,
.elementor-widget-tc-quote > .elementor-widget-container,
.elementor-widget-tc-media-copy > .elementor-widget-container,
.elementor-widget-tc-proof-loop > .elementor-widget-container,
.elementor-widget-tc-why-us > .elementor-widget-container,
.elementor-widget-tc-contact-cta > .elementor-widget-container {
  overflow: visible;
  width: 100%;
  max-width: none;
}

.elementor-editor-active .tc-w-cta__shell,
.elementor-editor-preview .tc-w-cta__shell {
  min-height: 420px;
}

.elementor-editor-active .tc-w-loop__track,
.elementor-editor-preview .tc-w-loop__track,
body.tangerine-theme .tc-w-loop__track {
  overflow: visible;
}

body.tangerine-theme .elementor-widget-tc-story-track,
body.tangerine-theme .elementor-widget-tc-story-track > .elementor-widget-container {
  overflow: visible;
}

body.tangerine-theme .elementor-widget-tc-client-list,
body.tangerine-theme .elementor-widget-tc-client-list > .elementor-widget-container {
  overflow: visible;
}

body.tangerine-theme .elementor-widget-tc-header,
body.tangerine-theme .elementor-widget-tc-header > .elementor-widget-container {
  height: 0 !important;
  margin: 0 !important;
  overflow: visible;
}

/* The bar is position:fixed. Elementor still gives its column min-height:1px, which paints as a line above the hero. Collapse that shell only — display:none would hide the header too. */
body.tangerine-theme:not(.elementor-editor-active):not(.elementor-editor-preview) .elementor-location-header,
body.tangerine-theme:not(.elementor-editor-active):not(.elementor-editor-preview) .elementor-location-header :is(.elementor-section, .elementor-container, .elementor-column, .elementor-column-wrap, .elementor-widget-wrap, .e-con, .e-con-inner),
body.tangerine-theme:not(.elementor-editor-active):not(.elementor-editor-preview) .elementor-top-section:has(.elementor-widget-tc-header),
body.tangerine-theme:not(.elementor-editor-active):not(.elementor-editor-preview) .elementor-top-section:has(.elementor-widget-tc-header) :is(.elementor-container, .elementor-column, .elementor-column-wrap, .elementor-widget-wrap) {
  min-height: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* The fixed header takes no space. A leftover widget gap shows as a line above the hero video. */
body.tangerine-theme .elementor-widget-tc-hero-media {
  margin-top: 0 !important;
}

body.tangerine-theme .tc-w-hero video.tc-w-hero__media {
  top: -1px;
  height: calc(100% + 2px) !important;
}

/* Clip orbit on the MORE WORK section only — Elementor wrappers must stay
   overflow:visible so the negative-margin pull under the stack still works.
   Inner .tc-w-scatter__clip / __field stay overflow:visible (see scatter-field/style.css). */
body.tangerine-theme .tc-w-scatter--pill,
body.tangerine-theme .elementor .tc-w-scatter--pill {
  overflow: hidden !important;
  clip-path: inset(0) !important;
  -webkit-clip-path: inset(0) !important;
}

body.menu-open {
  overflow: hidden;
}

/* Shared tablet and mobile canvas spacing. */
@media (max-width: 900px) {
  :root { 
    --tc-margin: 32px;
    --gutter: 32px;
    --tc-gutter: 20px; 
  }

  body.tangerine-theme .tc-w:not(.tc-w-hero):not(.tc-w-bleed):not(.tc-w-header):not(.tc-w-marquee):not(.tc-w-chosen):not(.tc-w-adv):not(.tc-w-stats):not(.tc-w-scatter):not(.tc-w-work):not(.tc-w-quote):not(.tc-w-split):not(.tc-w-loop):not(.tc-w-why):not(.tc-w-cta):not(.tc-w-cols--stack):not(.tc-case) { 
    --tc-side: var(--tc-margin); 
  }
}

@media (max-width: 600px) {
  :root { 
    --tc-margin: 20px; 
    --gutter: 20px; 
    --tc-gutter: 16px; 
  }
}


/* Contact sand introduction — centred 60px sentence on desktop, left-aligned on mobile. */
body.tangerine-theme.tangerine-page-contact .tc-w-intro {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 420px;
  padding: 120px 48px;
  background: #f0dfcf;
}

body.tangerine-theme.tangerine-page-contact .tc-w-intro__title {
  max-width: 811px;
  margin: 0;
  text-transform: none;
}

@media (max-width: 900px) {
  body.tangerine-theme.tangerine-page-contact .tc-w-intro {
    min-height: 0;
    justify-content: flex-start;
    padding: 72px var(--tc-margin);
  }

  body.tangerine-theme.tangerine-page-contact .tc-w-intro__title {
    max-width: 640px;
  }
}

@media (max-width: 600px) {
  body.tangerine-theme.tangerine-page-contact .tc-w-intro {
    padding: 48px 20px 40px;
  }

}

/* First focusable control. Off-screen until the keyboard lands on it. */
.tc-skip {
  position: fixed;
  left: 16px;
  top: 16px;
  z-index: 100000;
  padding: 12px 18px;
  background: var(--tangerine-cream, #fff9f5);
  color: var(--tangerine-charcoal, #262626);
  font-size: 14px;
  line-height: 1.2;
  text-decoration: none;
  transform: translateY(-200%);
}

.tc-skip:focus {
  transform: none;
  outline: 2px solid var(--tangerine-charcoal, #262626);
  outline-offset: 2px;
}

#content:focus {
  outline: none;
}