/*
Theme Name: GGD Studio
Theme URI: https://ggdstudio.co.za
Author: Greyling Graphic Design
Description: Custom classic PHP theme for GGD Studio. Mobile first, built around ACF.
Version: 0.22.18
Requires at least: 6.5
Requires PHP: 8.0
Text Domain: ggdstudio
*/

/* Mobile first: base styles are for small screens. */
:root {
  /* GGD design system tokens, extracted from greylinggraphicdesign.co.za */
  --ggd-blue: #285bd3;
  --ggd-periwinkle: #ccdaff;
  --ggd-periwinkle-80: #d6e1ff; /* periwinkle at 80% on white */
  --ggd-charcoal: #3f444b;
  --ggd-ink: #181818;
  --ggd-text: #4a4a4a;
  --ggd-text-soft: #54595f;
  --ggd-text-nav: #707070;
  --ggd-rule: #b7b4b4;
  --ggd-surface: #ffffff;
  --ggd-font: "Titillium Web", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ggd-space: 1rem;
  --ggd-max: 72rem;

  /* OSSU sub-brand colours, for the OSSU section later (not used in the main menu). The red is taken from the OSSU logo. */
  --ossu-black: #000000;
  --ossu-charcoal: #3f444b;
  --ossu-red: #be2026;
  --ossu-white: #ffffff;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ggd-surface);
  color: var(--ggd-text);
  font-family: var(--ggd-font);
  font-size: 1rem;
  letter-spacing: 0.025em;
  line-height: 1.6;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--ggd-blue); }
h1, h2, h3 { color: var(--ggd-ink); line-height: 1.2; }
h2 { font-weight: 400; }
h3 { font-weight: 600; color: var(--ggd-text-soft); }
p { color: var(--ggd-text-soft); }

/* Image captions are always italic. */
figcaption, .wp-element-caption, .wp-caption-text { font-style: italic; }

/* NO WIDOWS AND ORPHANS (standard setting for all text on the site):
   - headings are balanced, so no heading ends on a single stranded word
   - paragraphs, list items and captions avoid a short last line ("pretty")
   - widows/orphans: at least 2 lines stay together if text is split across columns or printed pages
   assets/js/typography.js covers browsers that do not support text-wrap yet (it joins the last two words). */
h1, h2, h3, h4, h5, h6, .hero-lead, .tile h3, .project-card h3 { text-wrap: balance; }
p, li, dd, figcaption, blockquote, .tile p, .project-card p { text-wrap: pretty; orphans: 2; widows: 2; }

/* Header and menu */
.site-title { font-weight: 700; text-transform: uppercase; text-decoration: none; color: var(--ggd-ink); }
.site-nav a { color: var(--ggd-text-soft); font-weight: 700; text-decoration: none; }
.site-nav a:hover, .site-nav .current-menu-item a { color: var(--ggd-blue); }

/* BUTTON STANDARD (all buttons, now and in future):
   - transparent background, ALL CAPS text, text and frame in the same colour
   - frame thickness = stroke thickness of the letters (Titillium Web 600 has a stem of 0.11em)
   - equal space between the capital letters and the frame on all four sides (--btn-gap).
     Vertical padding is trimmed by the font's built-in space above the capitals (0.1875em)
     and below the baseline (0.1275em) so the visible gap is equal top, bottom, left, right.
   - colour: brand blue on light backgrounds, periwinkle on dark ones (add class "on-dark"
     to any dark section, or use the .btn--light variant). Hover fills the button. */
:root {
  --btn-gap: .667em;
  --btn-stroke: .165em;
  /* Frame thickness for every boxed block (tiles, error boxes...): same as the main button frame (.11em of 1rem). */
  --frame-stroke: .22rem;
  --btn-colour: var(--ggd-blue);
  --btn-hover-text: var(--ggd-surface);
}
.on-dark { --btn-colour: var(--ggd-periwinkle); --btn-hover-text: var(--ggd-charcoal); }
.button, .btn, .wp-block-button__link, .nav-toggle {
  display: inline-block;
  box-sizing: border-box;
  margin: 0;
  padding: calc(var(--btn-gap) - .1875em) var(--btn-gap) calc(var(--btn-gap) - .1275em);
  background: transparent;
  color: var(--btn-colour);
  border: var(--btn-stroke) solid var(--btn-colour);
  border-radius: 999px;
  font: inherit;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}
.button:hover, .btn:hover, .wp-block-button__link:hover, .nav-toggle:hover,
.button:focus-visible, .btn:focus-visible, .nav-toggle:focus-visible {
  background: var(--btn-colour);
  color: var(--btn-hover-text);
}

/* Intro panel in pale periwinkle */
.hero { background: var(--ggd-periwinkle); padding-inline: var(--ggd-space); }
.hero h1 { margin: 0; text-transform: uppercase; color: var(--ggd-charcoal); font-weight: 300; font-size: clamp(2rem, 8.5vw, 3rem); }
.hero p { color: #fff; font-weight: 300; }
/* Supporting line under the headline: charcoal, because white on pale periwinkle is hard to read at small sizes. */
.hero .hero-lead { color: var(--ggd-charcoal); font-weight: 400; font-size: 1.125rem; margin: 1rem 0 1.25rem; }
.hero .hero-lead + p { margin: 0; }

/* Landing page section headings in brand blue */
.services-tiles h2, .projects h2, .how-i-work h2, .closing h2 { color: var(--ggd-blue); }

/* Service tiles on the landing page */
.services-tiles { margin-top: 2rem; }
.tile-grid { display: grid; gap: var(--ggd-space); grid-template-columns: 1fr; }
.tile { display: block; border: var(--frame-stroke) solid var(--ggd-periwinkle); padding: 1.25rem; color: var(--ggd-ink); text-decoration: none; }
.tile h3 { margin: 0 0 .5rem; color: var(--ggd-blue); font-size: 1.25rem; }
.tile p { margin: 0; color: var(--ggd-text-soft); }
.tile:hover, .tile:focus-visible { border-color: var(--ggd-blue); background: var(--ggd-periwinkle-80); }
@media (min-width: 48em) { .tile-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64em) { .tile-grid { grid-template-columns: repeat(3, 1fr); } }

/* How I work (landing page) */
.how-i-work { margin-top: 2rem; }
.how-i-work p { max-width: 42rem; }

/* What happens next (landing page) */
.how-i-work h3 { margin: 1.5rem 0 .5rem; }
.steps { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 1.5rem; }
.steps li { margin: 0; padding: 1.25rem; background: color-mix(in srgb, var(--ggd-periwinkle) 20%, #fff); box-sizing: border-box; }
.step-icon { display: block; width: 3.5rem; height: 3.5rem; margin-bottom: .6rem; fill: none; stroke: var(--ggd-blue); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.steps strong { display: block; color: var(--ggd-ink); }
@media (min-width: 40em) { .steps { grid-template-columns: repeat(3, 1fr); gap: 2rem; } }

/* Short about teaser (landing page) */
.about-teaser { display: flex; align-items: center; gap: 1rem; margin-top: 2rem; }
.about-teaser-photo { width: 5rem; height: 5rem; object-fit: cover; flex: none; border-radius: 50%; }
.about-teaser p { margin: 0; max-width: 42rem; }
.about-teaser a { color: var(--ggd-blue); }

/* About page */
.about-page .about { margin-top: 1.5rem; }
.about-page section + section { margin-top: 2rem; }
.brands p { max-width: 42rem; }
.testimonials-score { color: var(--ggd-text-soft); }
.testimonial { margin: 0; padding: 1.25rem; background: color-mix(in srgb, var(--ggd-periwinkle) 20%, #fff); box-sizing: border-box; display: flex; flex-direction: column; }
.testimonial p { margin: 0 0 1rem; font-size: 1.1rem; }
.testimonial cite { font-style: normal; font-weight: 600; color: var(--ggd-blue); display: block; margin-top: auto; }
.testimonial-role { display: block; font-weight: 400; color: var(--ggd-text-soft); }
/* Cards: stacked without JavaScript, a grid when motion is reduced, and a self-moving row of cards when JavaScript runs. */
.carousel-track { display: grid; gap: 1rem; }
@media (min-width: 40em) { .carousel-track { grid-template-columns: repeat(2, 1fr); } }
.carousel.is-active .carousel-track { display: flex; column-gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.carousel.is-active .carousel-track::-webkit-scrollbar { display: none; }
.carousel.is-active .carousel-slide { flex: 0 0 100%; scroll-snap-align: start; }
@media (min-width: 40em) { .carousel.is-active .carousel-slide { flex-basis: calc((100% - 1rem) / 2); } }

/* About (landing page) */
.about { margin-top: 2rem; display: grid; gap: 1.25rem; align-items: start; }
.about-photo { width: 100%; max-width: 16rem; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 50%; }
.about-text h2 { margin-top: 0; }
.about-text p { max-width: 42rem; }
@media (min-width: 48em) { .about { grid-template-columns: 16rem 1fr; gap: 2rem; } }

/* Services page */
.service { border-top: 1px solid var(--ggd-periwinkle); padding-top: 1rem; margin-top: 1.5rem; }
.service h2 { margin-top: 0; }
.service-jobs { color: var(--ggd-text-soft); }
.services-note { margin-top: 2rem; }

/* Closing section on the landing page */
.closing { border-top: 1px solid var(--ggd-periwinkle); margin-top: 2rem; padding-block: 1.5rem 2rem; }
.closing h2 { margin-top: 0; }
.closing .closing-contact a, .closing .closing-rates a { color: var(--ggd-blue); }
.closing .closing-contact span { margin-inline: .5em; color: var(--ggd-text-soft); }

/* Footer in charcoal */
.site-footer.site-footer { max-width: none; padding-inline: var(--ggd-space); background: var(--ggd-charcoal); color: var(--ggd-rule); }
.site-footer p { color: var(--ggd-rule); }
/* Footer content sits on the same left edge as the header and the page content:
   same maximum width, centred box, same side padding. */
.site-footer .footer-logo, .site-footer p { max-width: var(--ggd-max); margin-inline: auto; padding-inline: var(--ggd-space); }
.site-footer .footer-about { color: var(--ggd-surface); }
.site-footer .footer-contact { margin-top: .75rem; }
.site-footer a:not(.btn) { color: var(--ggd-periwinkle); }
.site-footer .footer-sep { margin-inline: .5em; }
.site-footer .footer-links .btn + .btn { margin-left: .5rem; }

.site-header, .site-main, .site-footer {
  width: 100%;
  max-width: var(--ggd-max);
  margin-inline: auto;
  padding: var(--ggd-space);
}

/* Sky pages (every page except OSSU and BLXM): the two side areas beside the white content column are periwinkle at 80%.
   Header and main stay white and together form the column; the footer is untouched. */
body.ggd-sky { background: var(--ggd-periwinkle-80); }
body.ggd-sky .site-header, body.ggd-sky .site-main { background: var(--ggd-surface); }

.site-header { display: flex; justify-content: space-between; align-items: center; }

/* Upscale for larger screens */
@media (min-width: 48em) {
  :root { --ggd-space: 1.5rem; }
}

/* Project cards: one column on phones, more on larger screens */
.project-grid { display: grid; gap: var(--ggd-space); grid-template-columns: 1fr; }
.project-card h3 { margin: .5rem 0 0; }
.project-card a { text-decoration: none; color: inherit; }
.hero { padding-block: calc(var(--ggd-space) * 2); }
.project-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 2.5rem; margin: 1rem 0 1.5rem; }
.project-meta > div { display: flex; align-items: baseline; gap: .5rem; }
.project-meta dt { font-weight: 600; color: var(--ggd-blue); text-transform: uppercase; letter-spacing: .06em; }
.project-meta dd { margin: 0; }

@media (min-width: 48em) {
  .project-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 64em) {
  .project-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Logo: dark letters on light grounds, light letters on the charcoal footer */
.ggd-logo { display: block; width: 7rem; height: auto; }
.ggd-logo__blue { fill: var(--ggd-blue); }
.ggd-logo__light { fill: var(--ggd-ink); }
.site-footer .ggd-logo { width: 6rem; margin-bottom: .5rem; }
.site-footer .ggd-logo__blue { fill: var(--ggd-periwinkle); }
.site-footer .ggd-logo__light { fill: var(--ggd-surface); }
.footer-logo { display: flex; align-items: center; gap: var(--ggd-space); flex-wrap: wrap; }
.footer-logo .ggd-logo { margin-bottom: 0; }
@media (min-width: 48em) { .ggd-logo { width: 8rem; } }

/* Navigation. Phones: a "Menu" button opens the list. Wider screens: links in a row. */
.site-header { flex-wrap: wrap; }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--ggd-space); flex-wrap: wrap; }
.site-nav a { display: inline-block; padding: .5rem 0; }
.site-nav .current-menu-item > a, .site-nav .current-menu-ancestor > a { color: var(--ggd-blue); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .4em; }
.site-nav ul { align-items: center; }
/* "Send a brief" button in the header: standard small outlined button */
.site-nav .menu-cta { border-top: 0; }
.site-nav .menu-cta a.btn { display: inline-block; font-size: .8rem; font-weight: 700; padding: calc(var(--btn-gap) - .1875em) var(--btn-gap) calc(var(--btn-gap) - .1275em); color: var(--btn-colour); text-decoration: none; }
.site-nav .menu-cta a.btn:hover, .site-nav .menu-cta a.btn:focus-visible { color: var(--btn-hover-text); }
.nav-toggle { display: none; }
.site-nav a:focus-visible, .btn:focus-visible, .nav-toggle:focus-visible { outline: 3px solid var(--btn-colour, var(--ggd-blue)); outline-offset: 3px; }

/* Phone layout only, and only when JavaScript is running (otherwise the list simply shows) */
@media (max-width: 47.99em) {
  .js .nav-toggle { display: inline-block; }
  .js .site-nav { margin-left: auto; }
  .js .site-nav ul { display: none; flex-direction: column; gap: 0; position: absolute; left: 0; right: 0; background: var(--ggd-surface); padding: var(--ggd-space); border-bottom: 1px solid var(--ggd-rule); z-index: 10; }
  .js .site-nav.is-open ul { display: flex; }
  .site-header { position: relative; }
  .site-nav li { border-top: 1px solid var(--ggd-periwinkle); }
  .site-nav li:first-child { border-top: 0; }
  .site-nav a { display: block; padding: .75rem 0; font-size: 1.125rem; }
  .site-nav .menu-cta { padding-top: .75rem; }
}


/* Rate card */
.rate-card { max-width: var(--ggd-max); margin: 0 auto; padding: 2rem var(--ggd-space); }
.rate-list { list-style: none; margin: 0 0 2rem; padding: 0; }
.rate-list li { display: flex; flex-direction: column; gap: .25rem; padding: .9rem 0; border-bottom: 1px solid var(--ggd-rule); }
.rate-price small { display: block; color: var(--ggd-text-soft); }
.rate-note { color: var(--ggd-text-soft); font-size: .9rem; }
@media (min-width: 48em) {
  .rate-list li { flex-direction: row; justify-content: space-between; align-items: baseline; }
  .rate-price { text-align: right; }
}
.rate-name small { display: block; color: var(--ggd-text-soft); font-size: .85rem; }

/* Project cards: always square, so the grid reads as a tidy mosaic */
.project-card img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
/* Project page images */
.project .wp-block-image img, .project .wp-block-gallery img { width: 100%; height: auto; display: block; }

/* Smaller button size: same standard, everything scales with the font size (gap and stroke are in em) */
.btn--small { font-size: .8rem; }

/* ALIGNMENT RULE: desktop = everything left-aligned on one shared left edge.
   Phones = centred (hero, section headings, project captions, buttons, footer).
   Long reading text (paragraphs, lists, prices) stays left-aligned on phones for readability.
   The copyright line is centred on every screen size. */
@media (max-width: 47.99em) {
  .hero, .projects h2, .project-card, .projects > p, .services-tiles h2, .how-i-work, .closing, .site-footer { text-align: center; }
  .site-footer .footer-logo { justify-content: center; }
  .site-footer .ggd-logo { margin-inline: auto; }
}

/* Footer always reaches the bottom of the screen: on short pages the main area grows to push
   the charcoal footer down, and a long shadow of the same colour fills the area beyond the
   page edge (scroll bounce, browser overscroll), so white never shows below the copyright. */
body { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.admin-bar body { min-height: calc(100vh - 32px); }
.site-main { flex: 1 0 auto; }
.site-footer.site-footer { flex-shrink: 0; box-shadow: 0 100vh 0 0 var(--ggd-charcoal); }
html { overflow-x: clip; }
@media (max-width: 782px) { .admin-bar body { min-height: calc(100vh - 46px); } }

/* Landing page only: soft white wisps of cloud behind the page (drawn by assets/js/clouds.js).
   They show in the periwinkle side areas; the white page and the footer cover the rest. */
.ggd-clouds {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}

/* Brief form (Contact page) */
/* The form uses the full width of the page. Short fields sit in two columns on wider screens; long answers and choice lists span both. */
.brief { max-width: none; }
.brief-form { margin-top: 1.5rem; }
.brief-section { border: 0; border-top: 1px solid var(--ggd-periwinkle); margin: 0 0 1.5rem; padding: 1rem 0 0; min-width: 0; }
.brief-section[hidden] { display: none !important; }
.brief-section legend { font-size: 1.25rem; font-weight: 600; color: var(--ggd-ink); padding: 0 .5rem 0 0; }
.brief-section > legend { font-weight: 700; color: var(--ggd-blue); letter-spacing: .06em; text-transform: uppercase; }
.brief-section > legend .brief-only, .brief-section > legend .brief-req { font-weight: 400; color: var(--ggd-text-soft); letter-spacing: normal; text-transform: none; }
.brief-toggle { font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; font-weight: inherit; background: none; border: 0; padding: .35rem 0; margin: 0; cursor: pointer; text-align: left; display: inline-flex; align-items: center; gap: .6rem; }
.brief-toggle:focus-visible { outline: 3px solid var(--ggd-blue); outline-offset: 2px; }
/* The plus/minus: two bars. Closed = plus. Opening turns the whole sign half a turn while the upright bar lies down, which leaves the minus. */
.brief-icon { position: relative; width: .95em; height: .95em; flex: none; transition: transform .4s ease; }
.brief-icon::before, .brief-icon::after { content: ""; position: absolute; left: 0; top: calc(50% - 1px); width: 100%; height: 2px; background: var(--ggd-blue); transition: transform .4s ease; }
.brief-icon::after { transform: rotate(90deg); }
.brief-section:not(.is-collapsed) .brief-icon { transform: rotate(180deg); }
.brief-section:not(.is-collapsed) .brief-icon::after { transform: rotate(0deg); }
.brief-section.is-collapsed { margin-bottom: .5rem; padding-bottom: 0; }
/* Sliding panel: the height animates between its full size and nothing. */
.brief-section.has-panel:not([hidden]) { display: block !important; }
.brief-body { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .4s ease; }
.brief-section.is-collapsed > .brief-body { grid-template-rows: 0fr; }
.brief-inner { min-height: 0; }
.brief-section.is-collapsed > .brief-body > .brief-inner, .brief-section.is-animating > .brief-body > .brief-inner { overflow: hidden; }
.brief-section.is-collapsed > .brief-body > .brief-inner { visibility: hidden; transition: visibility 0s .4s; }
.brief-form.no-anim .brief-body, .brief-form.no-anim .brief-icon, .brief-form.no-anim .brief-icon::before, .brief-form.no-anim .brief-icon::after, .brief-form.no-anim .brief-inner { transition: none !important; }
@media (prefers-reduced-motion: reduce) { .brief-body, .brief-icon, .brief-icon::before, .brief-icon::after, .brief-inner { transition: none !important; } }
.brief-only, .brief-req { font-size: .85rem; font-weight: 400; color: var(--ggd-text-soft); }
.brief-field { margin: 0 0 1.25rem; min-width: 0; }
@media (min-width: 48em) {
  .brief-section:not(.brief-type):not(.has-panel), .brief-section:not(.brief-type) .brief-inner { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; }
  .brief-section legend { grid-column: 1 / -1; }
  .brief-field--wide { grid-column: 1 / -1; }
  /* Two fields on one line: the boxes line up along the bottom even when one label has a help line. */
  .brief-field { display: flex; flex-direction: column; }
  .brief-field > input, .brief-field > select, .brief-field > textarea { margin-top: auto; }
  .brief-type:not(.has-panel), .brief-type .brief-inner { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; }
  .brief-choices .brief-choice { break-inside: avoid; }
}
@media (min-width: 64em) {
  .brief-type:not(.has-panel), .brief-type .brief-inner { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.brief-field label, .brief-choices legend { display: block; font-weight: 600; color: var(--ggd-ink); margin-bottom: .25rem; }
.brief-choices { border: 0; margin: 0; padding: 0; min-width: 0; }
.brief-choices legend { padding: 0; font-size: 1rem; }
.brief-help { display: block; color: var(--ggd-text-soft); margin-bottom: .4rem; line-height: 1.4; }
.brief-field input[type=text], .brief-field input[type=email], .brief-field input[type=tel], .brief-field select, .brief-field textarea {
  width: 100%; font: inherit; color: var(--ggd-ink); background: color-mix(in srgb, var(--ggd-periwinkle) 30%, #fff);
  border: 0; border-radius: 0; padding: .6rem .7rem; letter-spacing: inherit;
}
.brief-field textarea { resize: vertical; }
.brief-field ::placeholder { color: var(--ggd-text-soft); opacity: 1; }
.brief-field input:focus, .brief-field select:focus, .brief-field textarea:focus { outline: 3px solid var(--ggd-blue); outline-offset: 2px; }
.brief .brief-choice { display: flex; align-items: flex-start; gap: .6rem; font-weight: 400; margin: 0 0 .5rem; color: var(--ggd-text); }
.brief-choice input { margin-top: .35rem; accent-color: var(--ggd-blue); }
.brief-type .brief-choice span { font-weight: 600; color: var(--ggd-ink); }
.brief-errors { border: var(--frame-stroke) solid var(--ggd-blue); padding: 1rem; margin: 1rem 0; }
.brief-errors ul { margin: .5rem 0 0; padding-left: 1.2rem; }
.brief-thanks { border-top: 1px solid var(--ggd-periwinkle); margin-top: 1.5rem; padding-top: 1rem; }
.brief-note { font-size: .9rem; }
.brief-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Contact page: details and map */
.contact-find { margin-top: 3rem; }
.contact-find-grid { display: grid; gap: 1.5rem; }
.contact-details { list-style: none; margin: 0; padding: 0; }
.contact-details li { margin: 0 0 .75rem; }
.contact-label { display: block; font-weight: 600; color: var(--ggd-blue); }
.contact-details a { color: var(--ggd-blue); }
.contact-map iframe { display: block; width: 100%; height: 18rem; border: 0; background: color-mix(in srgb, var(--ggd-periwinkle) 30%, #fff); }
@media (min-width: 48em) { .contact-find-grid { grid-template-columns: 1fr 2fr; align-items: start; } .contact-map iframe { height: 22rem; } }

/* Project cards: role icons under the thumbnail */
.project-card-image { display: block; }
.project-roles { list-style: none; margin: .5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; column-gap: .4rem; color: var(--ggd-blue); font-size: .85rem; font-weight: 600; line-height: 1.4; }
.project-roles li { margin: 0; }
.project-roles li + li::before { content: "\00b7"; margin-right: .4rem; }
.project-roles a { color: var(--ggd-blue); text-decoration: none; }
.project-roles a:hover, .project-roles a:focus-visible, .project-roles a.is-active { text-decoration: underline; text-underline-offset: .15em; }
.project-card[hidden] { display: none; }
/* Filter bar on /projects/ */
.project-filter { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .6rem; margin: 0 0 1.5rem; }
.project-filter[hidden] { display: none; }
.project-filter-label { color: var(--ggd-text-soft); font-size: .85rem; }
.project-filter-btn, .project-filter-reset { font: inherit; font-size: .85rem; font-weight: 600; color: var(--ggd-blue); background: transparent; border: 0; padding: .25rem .6rem; cursor: pointer; }
.project-filter-btn { background: color-mix(in srgb, var(--ggd-periwinkle) 30%, #fff); }
.project-filter-btn[aria-pressed="true"] { background: var(--ggd-blue); color: #fff; }
.project-filter-reset { text-decoration: underline; text-underline-offset: .15em; }
.project-filter-btn:focus-visible, .project-filter-reset:focus-visible { outline: 3px solid var(--ggd-blue); outline-offset: 2px; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (max-width: 47.99em) { .project-card .project-roles { justify-content: center; } }

/* All button text is uppercase everywhere (0.21.2). */
button, input[type="submit"], input[type="button"], input[type="reset"] { text-transform: uppercase; }

/* Footer: the small buttons sit in a row to the right of the logo (0.21.2). */
.site-footer .footer-top { max-width: var(--ggd-max); margin-inline: auto; padding-inline: var(--ggd-space); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .75rem 1.5rem; }
.site-footer .footer-top .footer-logo, .site-footer .footer-top .footer-links { max-width: none; margin: 0; padding: 0; }
.site-footer .footer-top .ggd-logo { display: block; margin-bottom: 0; }
@media (min-width: 48em) { .site-footer .footer-top { justify-content: flex-start; } }

/* Services: card layout, same frame as the tool tiles (0.21.2). */
.services-page { display: grid; grid-template-columns: 1fr; gap: var(--ggd-space); align-items: stretch; }
.services-page > h1, .services-page > .services-intro { grid-column: 1 / -1; margin-bottom: 0; }
.services-page .service { display: flex; flex-direction: column; margin: 0; padding: 1.25rem; border: var(--frame-stroke) solid var(--ggd-periwinkle); background: #fff; }
.services-page .service h2 { margin: 0 0 .75rem; }
.services-page .service > p:last-child { margin: auto 0 0; padding-top: 1rem; }
@media (min-width: 48em) { .services-page { grid-template-columns: repeat(2, 1fr); } }

/* Tool cards: thumbnail on top, full width inside the frame (0.21.2). */
.tile .tile-thumb { display: block; width: calc(100% + 2.5rem); max-width: none; margin: -1.25rem -1.25rem 1rem; aspect-ratio: 3 / 2; object-fit: cover; background: var(--ggd-periwinkle-80); }

/* Lozenge buttons: fully rounded ends, still as long as the words need (0.21.3). */
.button, .btn, .wp-block-button__link, .nav-toggle, button, input[type="submit"], input[type="button"], input[type="reset"] { border-radius: 999px; }

/* Button text is always bold (0.21.5). */
.button, .btn, .wp-block-button__link, .nav-toggle, button, input[type="submit"], input[type="button"], input[type="reset"] { font-weight: 700; }

/* Buttons on white: no frame, a 20% periwinkle fill instead. Dark areas (footer, OSSU) keep their outlined look (0.21.6). */
.button, .btn, .wp-block-button__link, .nav-toggle { border-color: transparent; background: color-mix(in srgb, var(--ggd-periwinkle) 50%, #fff); }
.on-dark .button:not(:hover):not(:focus-visible), .on-dark .btn:not(:hover):not(:focus-visible), .on-dark .wp-block-button__link:not(:hover):not(:focus-visible), .on-dark .nav-toggle:not(:hover):not(:focus-visible),
body.ossu .button:not(:hover):not(:focus-visible), body.ossu .btn:not(:hover):not(:focus-visible), body.ossu .wp-block-button__link:not(:hover):not(:focus-visible) { border-color: var(--btn-colour); background: transparent; }

/* Buttons on white: 80% of the previous size. Everything inside a button is in em, so padding and frame scale with the text (0.21.8). */
.button:not(.on-dark *, body.ossu *), .btn:not(.on-dark *, body.ossu *), .wp-block-button__link:not(.on-dark *, body.ossu *), .nav-toggle:not(.on-dark *, body.ossu *) { font-size: .8rem; }

/* The "All tools" back link on every tool page is a button (0.21.9). */
.tool-back a { display: inline-block; box-sizing: border-box; margin: 0; padding: calc(var(--btn-gap) - .1875em) var(--btn-gap) calc(var(--btn-gap) - .1275em); background: color-mix(in srgb, var(--ggd-periwinkle) 50%, #fff); color: var(--btn-colour); border: var(--btn-stroke) solid transparent; border-radius: 999px; font-size: .8rem; font-weight: 700; line-height: 1; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; cursor: pointer; }
.tool-back a:hover, .tool-back a:focus-visible { background: var(--btn-colour); color: var(--btn-hover-text); }

/* Cards on the GGD side: thicker frame (set by --frame-stroke) and rounded corners (0.21.10). */
.tile, .services-page .service, .testimonial { border-radius: 1rem; }
.tile { overflow: hidden; }

/* Mobile image viewer (assets/js/image-viewer.js, 0.21.12) */
@media (max-width: 47.99em) {
  .project figure.wp-block-image img { cursor: zoom-in; }
}
html.imgv-open,
html.imgv-open body { overflow: hidden; }
.imgv {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: rgba(0, 0, 0, .92);
}
.imgv-scroll {
  position: absolute;
  inset: 0;
  overflow: hidden;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.imgv-scroll img {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  margin: 0;
  transform-origin: 0 0;
  will-change: transform;
  -webkit-user-drag: none;
}
.imgv-close {
  position: fixed;
  top: max(.75rem, env(safe-area-inset-top));
  right: .75rem;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: var(--btn-stroke, .11em) solid var(--ggd-periwinkle, #ccdaff);
  border-radius: 50%;
  background: rgba(0, 0, 0, .6);
  color: var(--ggd-periwinkle, #ccdaff);
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
}
.imgv-close:focus-visible { outline: .15rem solid #fff; outline-offset: .15rem; }


/* Landing page panels (0.22.12): soft periwinkle panel with plain white rounded cards.
   Applies to What I Do, the About teaser and Have a project. Headings sit outside the panel,
   and every landing heading has the same 1.25rem of space above it. */
.services-tiles { margin-top: 0; }
.services-tiles .tile-grid,
.about-teaser,
.closing-panel { background: color-mix(in srgb, var(--ggd-periwinkle) 50%, #fff); padding: 1rem; }
.services-tiles .tile { border: 0; border-radius: 1.25rem; background: #fff; padding: 1.25rem; }
.services-tiles .tile:hover,
.services-tiles .tile:focus-visible { background: #fff; box-shadow: inset 0 0 0 var(--frame-stroke) var(--ggd-blue); }
.about-teaser { display: block; }
.about-card,
.closing-card { background: #fff; border-radius: 1.25rem; padding: 1.25rem; }
.about-card { display: flex; align-items: center; gap: 1.25rem; }
.closing { border-top: 0; margin-top: 0; padding-top: 0; }
.closing h2 { margin-top: 1.25rem; }
.closing-card > p { margin-top: 0; }
.closing-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.5rem; }
.closing-row p { margin: 0; }
@media (min-width: 48em) {
	.services-tiles .tile-grid,
	.about-teaser,
	.closing-panel { padding: 2rem; }
	.services-tiles .tile,
	.about-card,
	.closing-card { padding: 1.5rem; }
}

/* What I Do tiles as bullet lists (0.22.14): bullets in brand blue */
.tile-list { margin: 0; padding-left: 1.1rem; list-style: disc; color: var(--ggd-text-soft); }
.tile-list li { margin: 0 0 .25rem; text-wrap: pretty; }
.tile-list li::marker { color: var(--ggd-blue); }

/* EXAMPLES buttons and the filtered Notable Projects grid (0.22.15) */
.tile { display: flex; flex-direction: column; }
.tile-link { display: block; flex: 1 1 auto; color: inherit; text-decoration: none; }
.tile-examples { align-self: flex-start; margin-top: 1rem; cursor: pointer; }
.tile-examples[aria-pressed="true"] { background: var(--ggd-blue); color: #fff; }
#notable-projects { scroll-margin-top: 5rem; }
.examples-status { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin: 0 0 1rem; }
.examples-label { font-weight: 600; color: var(--ggd-text-soft); }
.examples-status[hidden], .examples-grid[hidden], .example-item[hidden], .projects-default[hidden] { display: none; }

/* Tools page on phones: two cards side by side (0.22.18). */
@media (max-width: 47.99em) {
  .tools-page .tile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
  .tools-page .tile { padding: .75rem; }
  .tools-page .tile .tile-thumb { width: calc(100% + 1.5rem); margin: -.75rem -.75rem .6rem; }
  .tools-page .tile h3 { font-size: 1rem; margin-bottom: .3rem; }
  .tools-page .tile p { font-size: .8125rem; line-height: 1.35; }
}