/*
Theme Name: DME Amsterdam
Theme URI: https://dme-amsterdam.local
Author: Selfs
Author URI: https://www.selfs.nl
Description: Hand-coded theme for DME Amsterdam on the GGOTTL / Selfs architecture. ACF flexible-content sections on a single universal spacing scale.
Version: 1.0
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 8.0
Text Domain: dme
*/

/* ==========================================================================
   SPACING SCALE — the single source of vertical and internal rhythm
   ==========================================================================

   These six values are the ONLY spacing values in this theme. Nothing else
   may invent a margin or a padding: if a gap is needed, it comes from here.
   Adding a seventh value is a design decision, not a CSS fix — it is added
   here, in DME_SPACING_STEPS in functions.php, and in the ACF dropdown.

   8 and 16 stay fixed (small gaps read the same on any screen).
   32 and up scale fluidly, so 128px on a desktop lands near 64px on a phone.
   ========================================================================== */
:root {
    --space-8:   8px;
    --space-16:  16px;
    --space-32:  clamp(20px, 2.6vw, 32px);
    --space-48:  clamp(28px, 3.8vw, 48px);
    --space-64:  clamp(36px, 5vw,   64px);
    --space-128: clamp(64px, 9.5vw, 128px);

    /* The breathing room INSIDE any section that carries its own background,
       above and below its content. One universal value so coloured blocks
       are consistent site-wide. */
    --space-inset: var(--space-128);
}

/* --------------------------------------------------------------------------
   Space below — the gap after a section.

   Every section has ZERO top and bottom padding. The gap between two
   sections is set once, by the section above, through the "Space below"
   dropdown in the CMS, so two neighbours can never add up to a double gap.

   margin (not padding) is deliberate: the gap sits OUTSIDE the section, so
   the page background shows through it and a coloured block ends where its
   colour ends.
   -------------------------------------------------------------------------- */
.space-below-0   { --space-below: 0px;              margin-bottom: var(--space-below); }
.space-below-8   { --space-below: var(--space-8);   margin-bottom: var(--space-below); }
.space-below-16  { --space-below: var(--space-16);  margin-bottom: var(--space-below); }
.space-below-32  { --space-below: var(--space-32);  margin-bottom: var(--space-below); }
.space-below-48  { --space-below: var(--space-48);  margin-bottom: var(--space-below); }
.space-below-64  { --space-below: var(--space-64);  margin-bottom: var(--space-below); }
.space-below-128 { --space-below: var(--space-128); margin-bottom: var(--space-below); }

/* --space-below exposes the gap to the section itself, e.g. to centre a
   divider in it (the milestone title's line in sections.css). */

/* Matching helpers for spacing INSIDE a layout, when gap on a flex/grid
   container is not an option. */
.stack-8   > * + * { margin-top: var(--space-8); }
.stack-16  > * + * { margin-top: var(--space-16); }
.stack-32  > * + * { margin-top: var(--space-32); }
.stack-48  > * + * { margin-top: var(--space-48); }
.stack-64  > * + * { margin-top: var(--space-64); }

/* ==========================================================================
   Design tokens
   ========================================================================== */
:root {
    /* Colour — sampled from the DME design exports. */
    --color-bg:        #FAFAFA;  /* page */
    --color-beige:     #F0ECE9;  /* light sections, footer */
    --color-dark:      #3A332D;  /* dark sections, mobile menu */
    --color-ink:       #1A1A1A;  /* text on light */
    --color-paper:     #F0ECE9;  /* text, labels and buttons on dark */
    --color-soft:      #CCC9C4;  /* statements on dark */
    --color-line:      #8A8A8A;  /* label and wordmark rules on light */
    --color-line-soft: #E3E1DE;  /* very subtle divider on light (milestone title) */
    --color-rule:      #D6D3CF;  /* thin rules under listing headings */
    --color-line-dark: #5E5653;  /* dividers on dark */
    --color-ground-dark: #39322D; /* behind background videos and the photo slideshow */

    /* Type — see assets/css/fonts.css. */
    --font-serif: "Minion Pro", Georgia, "Times New Roman", serif;
    --font-sans:  "Circular", system-ui, -apple-system, "Segoe UI", sans-serif;

    /* Layout. The design is a 1440px frame: 64px margins, two columns with
       a 48px gutter (42px in the design, rounded to the scale), and an
       800px column for running text. */
    --container-max:        1440px;
    --container-pad:        var(--space-64);
    --container-pad-mobile: var(--space-32);
    --gutter:               var(--space-48);
    --text-column:          800px;

    /* Phones only: the gap between a photo and its own text when they
       stack (Image + text, Text + staggered images, Services, Contact
       details, milestone cards). Fixed 48px, not the fluid --space-48
       (which is ~28px on a phone) — asked for, for all these elements. */
    --space-stack-mobile:   48px;

    /* The full header sits over the top of the page and the first section
       clears it (see sections.css). The compact bar that replaces it once
       the page is scrolled is fixed and needs no clearance. */
    --logo-width:    108px;
    --logo-height:   106px;
    --header-height: calc(var(--space-32) + var(--logo-height));

    --radius: 8px;
    --ease:   cubic-bezier(0.22, 1, 0.36, 1);
}

@media (max-width: 767px) {
    :root {
        --logo-width:  84px;
        --logo-height: 82px;
    }
}

/* ==========================================================================
   Reset / base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

/* No scroll-behavior: smooth — it conflicts with ScrollTrigger's pins (a
   pinned section could lag behind its place after a fast scroll). */
html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--font-serif);
    font-size: 1.3125rem; /* 21px */
    line-height: 1.42;
    color: var(--color-ink);
    background: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6, p, blockquote, figure, address { margin: 0; }
h1, h2, h3, h4, h5, h6 { font-weight: 400; }
address { font-style: normal; }

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* ==========================================================================
   Container
   ========================================================================== */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-pad);
}

@media (max-width: 767px) {
    .container { padding-inline: var(--container-pad-mobile); }
}

/* ==========================================================================
   Sections
   ==========================================================================
   Sections have no vertical padding of their own. The only vertical padding
   is --space-inset, applied automatically above and below the content of
   anything that carries a background, so its content never touches the
   colour edge.
   ========================================================================== */
[element-theme="2"],
.theme-dark,
.has-background {
    padding-block: var(--space-inset);
}

[element-theme="2"],
.theme-dark {
    background: var(--color-dark);
    color: var(--color-paper);
}

.bg-beige { background: var(--color-beige); }

/* Full-bleed sections (heroes, banners) opt out of the inset entirely. */
.is-bleed { padding-block: 0 !important; }

/* ==========================================================================
   Typography
   ==========================================================================
   Body text is Minion Pro. The classes below are the design's recurring
   text styles; layouts use these rather than restating sizes.
   ========================================================================== */

/* Ruled uppercase label — "ABOUT", "ACQUIRE", "MISSION". Typed in normal
   case in the CMS; CSS sets the capitals.
   Capitals leave the descender space below the baseline empty, so equal
   padding looks heavier at the bottom. With Minion Pro's metrics (ascent
   0.714em, descent 0.286em, cap height 0.65em) and line-height 1, this
   padding puts the same 0.36em between each rule and the capitals. In em,
   because it corrects the type, not the layout. */
.label {
    display: inline-block;
    font-family: var(--font-serif);
    font-size: clamp(1.5rem, 1.95vw, 1.75rem);
    line-height: 1;
    text-transform: uppercase;
    border-block: 1px solid var(--color-line);
    padding: 0.3em 0 0.075em;
}

/* Large serif statement — intros and the Mission block. */
.statement {
    font-family: var(--font-serif);
    font-size: clamp(1.75rem, 2.5vw, 2.25rem);
    line-height: 1.22;
}

/* Very large capitals — "WHAT'S NEW", project names. */
.display {
    font-family: var(--font-serif);
    font-size: clamp(3.5rem, 9vw, 8.125rem);
    line-height: 0.92;
    text-transform: uppercase;
}

/* Large sentence-case title — milestone titles. */
.title {
    font-family: var(--font-serif);
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    line-height: 1;
}

/* Small sans heading — "A great header", "Service". */
.heading,
.wysiwyg :is(h2, h3, h4) {
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: clamp(1.25rem, 1.55vw, 1.375rem);
    line-height: 1.3;
}

/* Light sans quote with a rule on the left. */
.quote,
.wysiwyg blockquote,
.is-quote {
    font-family: var(--font-sans);
    font-weight: 300;
    font-size: clamp(1.75rem, 2.1vw, 1.875rem);
    line-height: 1.15;
    border-left: 1px solid currentColor;
    padding-left: var(--space-32);
}

/* Small uppercase sans — dates. */
.meta {
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: 0.75rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

/* "RESHAPING CITY ICONS" — ruled serif capitals. Balanced like .label: at
   line-height 0.95 this padding leaves about 0.25em between each rule and
   the capitals. */
.wordmark {
    display: inline-block;
    font-family: var(--font-serif);
    font-size: clamp(2.5rem, 3.35vw, 3rem);
    line-height: 0.95;
    text-transform: uppercase;
    border-block: 1px solid var(--color-line);
    padding: 0.2em 0 0;
}

[element-theme="2"] :is(.label, .wordmark),
.theme-dark :is(.label, .wordmark) { border-color: currentColor; }

[element-theme="2"] .statement,
.theme-dark .statement { color: var(--color-soft); }

/* Introduction format from the WYSIWYG dropdown. */
.is-intro {
    font-size: clamp(1.75rem, 2.5vw, 2.25rem);
    line-height: 1.22;
}

/* ==========================================================================
   WYSIWYG content
   ==========================================================================
   Rhythm for ACF WYSIWYG output. Add the class `wysiwyg` to the wrapper.
   ========================================================================== */
.wysiwyg > * + * { margin-top: var(--space-16); }
.wysiwyg > * + :is(h2, h3, h4) { margin-top: var(--space-48); }
.wysiwyg > :is(h2, h3, h4) + * { margin-top: var(--space-8); }
.wysiwyg > * + :is(blockquote, .is-quote),
.wysiwyg > :is(blockquote, .is-quote) + * { margin-top: var(--space-64); }

.wysiwyg a {
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 45px;
    padding-inline: var(--space-32);
    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: 1.2;
    color: inherit;
    background: transparent;
    border: 1px solid currentColor;
    border-radius: var(--radius);
    cursor: pointer;
    transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease);
}

.btn:hover,
.btn:focus-visible {
    background: var(--color-ink);
    border-color: var(--color-ink);
    color: var(--color-bg);
}

[element-theme="2"] .btn:is(:hover, :focus-visible),
.theme-dark .btn:is(:hover, :focus-visible),
.btn--light:is(:hover, :focus-visible) {
    background: var(--color-paper);
    border-color: var(--color-paper);
    color: var(--color-dark);
}

/* ==========================================================================
   Reveal (gsap_scripts.js adds .is-visible)
   ========================================================================== */
.sectionfadein { opacity: 0; transform: translateY(32px); }

/* A slow, soft fade with a long glide upwards. */
.sectionfadein.is-visible {
    opacity: 1;
    transform: none;
    transition:
        opacity 1.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        transform 2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* If JS never runs, nothing stays invisible. */
.no-js .sectionfadein { opacity: 1; transform: none; }

/* ==========================================================================
   Utilities
   ========================================================================== */
@media (min-width: 768px) {
    .hide-on-desktop { display: none !important; }
}

@media (max-width: 767px) {
    .hide-on-mobile { display: none !important; }
}

.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}