/*
Theme Name: MProficz
Theme URI:   https://mproficz.com
Description: GeneratePress child theme for the Matthieu Proficz portfolio. Brand colours and typography live in Appearance → Customize (Global Colors / Typography). This file only adds what GeneratePress can't do natively.
Author:      Matthieu Proficz
Template:    generatepress
Version:     1.0.0
Text Domain: mproficz
*/

/* ==========================================================================
   Fonts (self-hosted, no Google request)
   ========================================================================== */
@font-face { font-family: "Crimson Pro"; font-style: normal; font-weight: 300 700; font-display: swap; src: url(assets/fonts/crimson-pro-normal-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Crimson Pro"; font-style: normal; font-weight: 300 700; font-display: swap; src: url(assets/fonts/crimson-pro-normal-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Crimson Pro"; font-style: italic; font-weight: 300 700; font-display: swap; src: url(assets/fonts/crimson-pro-italic-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Crimson Pro"; font-style: italic; font-weight: 300 700; font-display: swap; src: url(assets/fonts/crimson-pro-italic-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 300 700; font-display: swap; src: url(assets/fonts/dm-sans-normal-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 300 700; font-display: swap; src: url(assets/fonts/dm-sans-normal-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "DM Sans"; font-style: italic; font-weight: 300 700; font-display: swap; src: url(assets/fonts/dm-sans-italic-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "DM Sans"; font-style: italic; font-weight: 300 700; font-display: swap; src: url(assets/fonts/dm-sans-italic-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ==========================================================================
   Tokens not covered by GeneratePress Global Colors
   (colours themselves come from the Customizer as --accent, --secondary, --base…)
   ========================================================================== */
:root {
  --mp-radius-pill: 999px;
  --mp-radius-card: 16px;
  --mp-duration: 160ms;
}

/* ==========================================================================
   Buttons — rounded (core Button block + GeneratePress buttons)
   ========================================================================== */
.wp-block-button__link,
.button,
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
  border-radius: var(--mp-radius-pill);
  padding: 0.75em 1.5em;
  font-weight: 600;
  transition: background-color var(--mp-duration) ease, color var(--mp-duration) ease, border-color var(--mp-duration) ease;
}

/* Outline style keeps the pill shape */
.is-style-outline .wp-block-button__link { border-radius: var(--mp-radius-pill); }

/* ==========================================================================
   Utility classes (add via block "Advanced → Additional CSS class(es)")
   ========================================================================== */

/* Small uppercase label — section eyebrows, footer column titles, fine print */
.mp-eyebrow {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.4;
}

/* ==========================================================================
   Footer — "Site Footer" synced pattern (Appearance → Patterns)
   ========================================================================== */
.site-footer { border-top: 0; }

.mp-footer a {
  color: var(--base-3);
  text-decoration: none;
}
.mp-footer a:hover { color: var(--secondary); text-decoration: underline; }

/* Vertical rhythm (GeneratePress has no theme.json, so block gap isn't output) */
.mp-footer .wp-block-image { margin: 0 0 16px; }
.mp-footer h2 { margin-bottom: 16px; }
.mp-footer p { margin-bottom: 10px; }
.mp-footer p.mp-eyebrow { margin-bottom: 12px; }
.mp-footer .wp-block-column > :last-child { margin-bottom: 0; }
.mp-footer .wp-block-columns { margin-bottom: 56px; }
.mp-footer .wp-block-columns .wp-block-columns { margin-bottom: 0; }
.mp-footer .mp-footer-rule { margin-bottom: 24px !important; }
.mp-footer .wp-block-group p { margin-bottom: 0; }

/* Hairline between the columns and the fine-print row */
.mp-footer-rule {
  border: 0;
  height: 1px;
  background: var(--contrast-2);
  opacity: 0.6;
  width: 100%;
}

@media (max-width: 768px) {
  .mp-footer { padding-top: 56px !important; padding-bottom: 32px !important; }
}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid var(--secondary);
}

/* keep header above admin bar when logged in */
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }

.site-branding { display: flex; flex-direction: column; justify-content: center; }
.main-title { line-height: 1.15; letter-spacing: -0.01em; }
.site-description { line-height: 1.3; letter-spacing: 0.02em; }

/* Navigation: pill links, current page highlighted with the primary colour */
.main-navigation .main-nav ul li a {
  border-radius: var(--mp-radius-pill);
  padding-left: 18px;
  padding-right: 18px;
  margin: 0 2px;
  line-height: 40px;
  transition: background-color var(--mp-duration) ease, color var(--mp-duration) ease;
}

.main-navigation .main-nav ul li:hover > a,
.main-navigation .main-nav ul li:focus-within > a {
  background-color: var(--secondary);
  color: var(--contrast);
}

.main-navigation .main-nav ul li.current-menu-item > a,
.main-navigation .main-nav ul li.current-menu-ancestor > a,
.main-navigation .main-nav ul li.current_page_item > a {
  background-color: var(--accent);
  color: var(--base-3);
}

/* Make the nav wrapper give the pills room to breathe vertically */
.main-navigation .inside-navigation { align-items: center; }
.main-navigation .main-nav > ul { display: flex; align-items: center; gap: 2px; }

/* Mobile menu toggle keeps the same rounded language */
.main-navigation .menu-toggle { border-radius: var(--mp-radius-pill); }
@media (max-width: 768px) {
  .main-navigation .main-nav ul li a { border-radius: 0; margin: 0; }
  .main-navigation .main-nav > ul { display: block; }
}

/* ==========================================================================
   Page building blocks (core blocks + these classes)
   Add a class via the block's  Advanced → Additional CSS class(es)
   ========================================================================== */

/* Sections — put on a full-width Group */
.mp-section        { padding: 96px 32px; }
.mp-section-tight  { padding: 56px 32px; }
@media (max-width: 768px) {
  .mp-section       { padding: 64px 20px; }
  .mp-section-tight { padding: 40px 20px; }
}

/* Vertical rhythm inside a Group/Column — children separated by a fixed gap */
.mp-stack > * { margin-top: 0; margin-bottom: 16px; }
.mp-stack > :last-child { margin-bottom: 0; }
.mp-stack-lg > * { margin-top: 0; margin-bottom: 24px; }
.mp-stack-lg > :last-child { margin-bottom: 0; }
.mp-stack .wp-block-image,
.mp-stack-lg .wp-block-image { margin-bottom: 16px; }

/* Text */
.mp-lede { font-size: 20px; line-height: 1.55; color: var(--contrast-2); max-width: 58ch; }
.mp-measure { max-width: 62ch; }
.mp-hero h1 { font-size: 64px; line-height: 1.02; max-width: 16ch; }
@media (max-width: 1024px) { .mp-hero h1 { font-size: 52px; } }
@media (max-width: 640px)  { .mp-hero h1 { font-size: 40px; } .mp-lede { font-size: 18px; } }

/* Fact list (label + value pairs) */
.mp-fact-label { font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--contrast-3); margin-bottom: 2px !important; }
.mp-fact-value { font-size: 15px; color: var(--contrast); margin-bottom: 16px !important; }

/* Tag pills — a Buttons block with this class; each Button becomes a tag */
.mp-tags { gap: 8px; }
.mp-tags .wp-block-button__link {
  padding: 5px 12px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--contrast-2);
  background: var(--base);
  border: 1px solid var(--secondary);
  pointer-events: none;
}
.mp-tags.mp-tags-dark .wp-block-button__link {
  color: var(--base-2);
  background: transparent;
  border-color: var(--contrast-2);
}

/* Ghost button (outline pill) — put on the Buttons block */
.mp-btn-ghost .wp-block-button__link {
  color: var(--accent);
  background: transparent;
  border: 1px solid var(--secondary);
}
.mp-btn-ghost .wp-block-button__link:hover {
  color: var(--base-3);
  background: var(--accent);
  border-color: var(--accent);
}

/* Case study card — a Columns block: [media column][body column] */
.mp-card {
  gap: 0 !important;
  background: var(--base-3);
  border: 1px solid var(--secondary);
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 40px;
  transition: box-shadow var(--mp-duration) ease, border-color var(--mp-duration) ease, transform var(--mp-duration) ease;
}
.mp-card:last-child { margin-bottom: 0; }
.mp-card:hover {
  border-color: #c6c3ef;
  box-shadow: 0 2px 6px rgba(26, 21, 35, 0.04), 0 24px 60px rgba(26, 21, 35, 0.08);
}
.mp-card-media {
  display: flex;
  align-items: center;
  background: var(--base);
  padding: 32px;
}
.mp-card-media .wp-block-image { margin: 0; width: 100%; }
.mp-card-media img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(26, 21, 35, 0.06), 0 16px 40px rgba(26, 21, 35, 0.10);
}
.mp-card-media a { display: block; }
.mp-card-body { padding: 48px; }
.mp-card-body h2 { font-size: 32px; line-height: 1.15; }
.mp-card-index { color: var(--accent); }
@media (max-width: 782px) {
  .mp-card-media { padding: 24px; }
  .mp-card-body  { padding: 28px 24px 32px; }
  .mp-card-body h2 { font-size: 26px; }
}

/* Small card (work in progress, notes) */
.mp-mini {
  background: var(--base-3);
  border: 1px solid var(--secondary);
  border-radius: 16px;
  padding: 32px;
}
.mp-mini h3 { font-size: 24px; }
.mp-mini p, .mp-mini ul { font-size: 15px; color: var(--contrast-2); }
.mp-mini ul { margin: 0; padding-left: 0; list-style: none; }
.mp-mini ul li { position: relative; padding-left: 18px; margin-bottom: 6px; }
.mp-mini ul li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.mp-note { font-size: 13px !important; color: var(--contrast-3) !important; }
.mp-grid-2 { gap: 24px; }
.mp-grid-2 > .wp-block-column { margin-bottom: 0; }
@media (max-width: 782px) { .mp-grid-2 > .wp-block-column + .wp-block-column { margin-top: 24px; } }

/* Process steps — dark section */
.mp-step-num {
  font-family: "Crimson Pro", serif;
  font-size: 56px;
  font-weight: 500;
  line-height: 1;
  color: var(--secondary);
  margin-bottom: 16px !important;
}
.mp-step p { font-size: 15px; color: var(--contrast-3); }
.mp-step strong { color: var(--base-3); font-weight: 600; }
.mp-on-dark h2 { color: var(--base-3); }

/* Eyebrow variants */
.mp-eyebrow.mp-eyebrow-accent { color: var(--accent); }

/* ==========================================================================
   Work grid — two columns of project tiles
   Columns block: class "mp-tiles"; each tile: Group with class "mp-tile"
   ========================================================================== */
.mp-tiles { gap: 40px; }
.mp-tiles > .wp-block-column { margin-bottom: 0; }

.mp-tile { margin-bottom: 72px; }
.mp-tile:last-child { margin-bottom: 0; }

/* image: same proportions for every tile, fills its box, rounded, nothing else */
.mp-tile .wp-block-image { margin: 0 0 20px; }
.mp-tile .wp-block-image a,
.mp-tile .wp-block-image img { display: block; width: 100%; }
.mp-tile .wp-block-image a { border-radius: 16px; overflow: hidden; }
.mp-tile .wp-block-image img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: top center;
  border-radius: 16px;
  transition: transform 400ms ease;
}
.mp-tile:hover .wp-block-image img { transform: scale(1.02); }

/* caption: title left, meta right; baseline underneath */
.mp-tile-caption { align-items: baseline; }
.mp-tile-caption h3,
.mp-tile-caption p { margin: 0; }
.mp-tile-caption h3 { font-size: 26px; line-height: 1.2; }
.mp-tile-caption h3 a { color: var(--contrast); text-decoration: none; }
.mp-tile-caption h3 a:hover { color: var(--accent); }
.mp-tile-caption .mp-eyebrow { color: var(--contrast-3); white-space: nowrap; padding-left: 16px; }
.mp-tile-baseline { margin: 8px 0 0 !important; font-size: 16px; line-height: 1.5; color: var(--contrast-2); max-width: 52ch; }
@media (max-width: 640px) {
  .mp-tile { margin-bottom: 48px; }
  .mp-tile-caption { flex-direction: column; align-items: flex-start; gap: 4px; }
  .mp-tile-caption .mp-eyebrow { padding-left: 0; }
  .mp-tile-caption h3 { font-size: 22px; }
}
.mp-hero-meta { color: var(--contrast-3); }

/* Full-width blocks: GeneratePress' 100vw maths ignores the scrollbar, which
   leaves a few px of horizontal scroll. Clip it (clip ≠ hidden: no scroll container). */
.site-content { overflow-x: clip; }

/* ==========================================================================
   Case study page
   Columns block "mp-case": [column "mp-case-aside"] [column "mp-case-main"]
   Each section: Group with class "mp-case-section" + an HTML anchor (id)
   ========================================================================== */
.mp-case { max-width: 1360px; margin-left: auto; margin-right: auto; gap: 64px; }
.mp-case > .wp-block-column { margin-bottom: 0; }

/* side rail */
.mp-case-aside { flex-basis: 220px !important; flex-grow: 0; }
.mp-case-nav { position: sticky; top: 104px; }
.mp-case-nav p,
.mp-case-nav ul { margin: 0; }
.mp-case-back a {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; color: var(--contrast);
  text-decoration: none; margin-bottom: 28px;
}
.mp-case-back a:hover { color: var(--accent); }
.mp-case-nav ul { list-style: none; padding: 0; }
.mp-case-nav li { margin: 0; padding: 0; }
.mp-case-nav li a {
  display: block; padding: 6px 12px; margin-left: -12px;
  border-radius: var(--mp-radius-pill);
  font-size: 14px; line-height: 1.4; color: var(--contrast-3);
  text-decoration: none;
  transition: color var(--mp-duration) ease, background-color var(--mp-duration) ease;
}
.mp-case-nav li a:hover { color: var(--contrast); }
.mp-case-nav li a.is-active { color: var(--accent); background: var(--base); font-weight: 600; }

/* main column */
.mp-case-main { min-width: 0; }
.mp-case-main > * { margin-bottom: 0; }
.mp-case-section { padding-top: 24px; padding-bottom: 72px; scroll-margin-top: 96px; }
.mp-case-section:last-child { padding-bottom: 0; }
.mp-case-section h2 { font-size: 36px; line-height: 1.15; margin-bottom: 20px; max-width: 24ch; }
.mp-case-section h3 { font-size: 22px; margin-bottom: 8px; }
.mp-case-section p { max-width: 68ch; }
.mp-case-section .mp-eyebrow { margin-bottom: 14px; color: var(--accent); }
.mp-case-section p.mp-lede { font-size: 19px; }
.mp-case-hero h1 { font-size: 56px; line-height: 1.05; margin-bottom: 24px; max-width: 18ch; }
@media (max-width: 1024px) { .mp-case-hero h1 { font-size: 44px; } .mp-case-section h2 { font-size: 30px; } }

/* facts row */
.mp-case-facts { gap: 24px; margin: 8px 0 0; }
.mp-case-facts > .wp-block-column { margin-bottom: 0; }
.mp-case-facts .mp-fact-label { margin-bottom: 4px !important; }
.mp-case-facts .mp-fact-value { margin-bottom: 0 !important; }

/* figures */
.mp-case-main .wp-block-image { margin: 0; }
.mp-case-main .wp-block-image img { width: 100%; height: auto; border-radius: 12px; display: block; }
.mp-case-main .wp-block-image figcaption {
  margin: 10px 0 0; text-align: left;
  font-size: 12px; letter-spacing: 0.04em; color: var(--contrast-3);
}
.mp-figure { margin-top: 32px; }
.mp-figure-row { gap: 24px; margin-top: 32px; }
.mp-figure-row > .wp-block-column { margin-bottom: 0; }
/* tall screenshots: fixed height box, scrolls inside */
.mp-figure-scroll img { height: 520px; object-fit: cover; object-position: top; }
.mp-figure-scroll .wp-block-image a,
.mp-figure-scroll .wp-block-image > img { border-radius: 12px; }
.mp-figure-frame img { background: var(--base-2); border: 1px solid var(--secondary); }

/* lists with dots */
.mp-list { list-style: none; padding: 0; margin: 0; max-width: 68ch; }
.mp-list li { position: relative; padding-left: 20px; margin-bottom: 10px; color: var(--contrast-2); }
.mp-list li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

/* callout */
.mp-callout { background: var(--base); border-radius: 16px; padding: 28px 32px; margin-top: 32px; max-width: 68ch; }
.mp-callout p { margin: 0; }
.mp-callout p + p { margin-top: 6px; }
.mp-callout .mp-eyebrow { margin-bottom: 8px; }
.mp-callout-text { font-family: "Crimson Pro", serif; font-size: 24px; line-height: 1.3; color: var(--contrast); }

/* numbered steps */
.mp-steps { gap: 32px; margin-top: 32px; }
.mp-steps > .wp-block-column { margin-bottom: 0; }
.mp-steps .mp-step-index { font-family: "Crimson Pro", serif; font-size: 32px; color: var(--secondary); margin-bottom: 8px !important; line-height: 1; }
.mp-steps h3 { font-size: 20px; }
.mp-steps p { font-size: 15px; color: var(--contrast-2); margin: 0; }

/* outcome metrics */
.mp-metrics { gap: 32px; margin-top: 32px; }
.mp-metrics > .wp-block-column { border-top: 1px solid var(--secondary); padding-top: 20px; margin-bottom: 0; }
.mp-metric-num { font-family: "Crimson Pro", serif; font-size: 56px; line-height: 1; color: var(--accent); margin-bottom: 10px !important; }
.mp-metrics p { font-size: 15px; color: var(--contrast-2); margin: 0; }

/* pull quote */
.mp-case-main .wp-block-quote.mp-quote {
  border: 0; padding: 0; margin: 48px 0 0;
  font-family: "Crimson Pro", serif; font-size: 28px; line-height: 1.3; color: var(--contrast); max-width: 30ch;
}
.mp-case-main .wp-block-quote.mp-quote p { margin: 0; max-width: none; font-style: italic; }
.mp-case-main .wp-block-quote.mp-quote cite { display: block; margin-top: 12px; font-family: "DM Sans", sans-serif; font-style: normal; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--contrast-3); }

/* next case study */
.mp-case-next { border-top: 1px solid var(--secondary); padding-top: 40px; margin-top: 24px; }
.mp-case-next h2 { font-size: 28px; margin-bottom: 20px; }
.mp-case-next .wp-block-buttons { gap: 12px; }

/* tablet / mobile: rail becomes a horizontal scroller above the content */
@media (max-width: 1024px) {
  .mp-case { gap: 40px; }
  .mp-case-aside { flex-basis: 180px !important; }
}
@media (max-width: 782px) {
  .mp-case-aside { flex-basis: auto !important; }
  .mp-case-nav { position: static; }
  .mp-case-back a { margin-bottom: 12px; }
  .mp-case-nav ul { display: flex; gap: 4px; overflow-x: auto; padding-bottom: 8px; margin: 0 -20px; padding-left: 20px; padding-right: 20px; scrollbar-width: none; }
  .mp-case-nav ul::-webkit-scrollbar { display: none; }
  .mp-case-nav li a { white-space: nowrap; margin-left: 0; border: 1px solid var(--secondary); }
  .mp-case-section { padding-bottom: 56px; }
  .mp-case-hero h1 { font-size: 36px; }
  .mp-figure-scroll img { height: 360px; }
}