/*
Theme Name: Giddings Design (MTC)
Theme URI: https://giddingsdesign.com
Author: Marketing The Change
Author URI: https://marketingthechange.com
Description: Block theme for Giddings Design. A quiet UK boutique studio for brand, web, and print. Bone off-white background, Ink black, Persimmon warm-orange accent. Fraunces editorial serif, Inter body, IBM Plex Mono for prices. 2px sharp radius, 2px Stone hairline dividers. Sister to Marketing The Change (Liverpool) and Liverpool Web Designers.
Version: 1.0.0
Requires at least: 6.5
Requires PHP: 8.1
Tested up to: 6.6
License: Proprietary
Text Domain: giddingsdesign-mtc
Tags: block-theme, one-column, custom-colors, custom-logo, editor-style, wide-blocks, block-styles
*/

/* Editor + front-end enhancements that theme.json cannot express cleanly. */

:root {
  --gdd-shadow-card: 0 1px 2px rgba(22, 21, 19, 0.04);
  --gdd-shadow-card-hover: 0 4px 12px rgba(22, 21, 19, 0.06);
  --gdd-radius: 2px;
  --gdd-hairline: 2px solid #DAD3C6;
  --gdd-persimmon: #C24C1E;
  --gdd-persimmon-deep: #9E3D14;
  --gdd-bone: #F6F1E8;
  --gdd-paper: #FDFBF7;
  --gdd-ink: #161513;
  --gdd-stone: #DAD3C6;
  --gdd-graphite: #5A5551;
  --gdd-ash: #8C8681;
}

html { scroll-behavior: smooth; }
body { background-color: #F6F1E8; color: #161513; }

/* Skip link */
.skip-link:focus {
  background: #C24C1E;
  color: #F6F1E8;
  padding: 12px 20px;
  border-radius: 2px;
  font-weight: 600;
  outline: 2px solid #C24C1E;
  outline-offset: 2px;
}

/* Buttons: force 2px sharp radius everywhere. No pill (MTC), no 12px rounded (LWD). */
.wp-block-button__link,
.wp-element-button,
button.wp-block-search__button {
  border-radius: 2px !important;
  font-weight: 600;
  padding: 12px 24px;
  min-height: 44px;
  transition: background-color 160ms ease-out, box-shadow 160ms ease-out;
}
.wp-block-button.is-style-gdd-primary .wp-block-button__link {
  background-color: #C24C1E;
  color: #F6F1E8;
  border: none;
}
.wp-block-button.is-style-gdd-primary .wp-block-button__link:hover,
.wp-block-button.is-style-gdd-primary .wp-block-button__link:focus {
  background-color: #9E3D14;
  outline: 2px solid #C24C1E;
  outline-offset: 2px;
}
.wp-block-button.is-style-gdd-secondary .wp-block-button__link {
  background-color: transparent;
  color: #161513;
  border: 1px solid #DAD3C6;
  font-weight: 500;
}
.wp-block-button.is-style-gdd-secondary .wp-block-button__link:hover {
  background-color: #FDFBF7;
}

/* Wordmark with persimmon strike-under. Sits under the site title. */
.gdd-wordmark {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  font-size: 24px;
  letter-spacing: -0.02em;
  color: #161513;
  text-decoration: none;
  display: inline-block;
  position: relative;
  padding-bottom: 4px;
}
.gdd-wordmark::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  width: 50%;
  height: 2px;
  background-color: #C24C1E;
}
.gdd-wordmark:hover { color: #161513; }

/* Wordmark reversed (Ink footer). */
.gdd-wordmark--reversed { color: #F6F1E8; }
.gdd-wordmark--reversed:hover { color: #F6F1E8; }

/* Site-title block styled as wordmark with strike-under */
.is-style-gdd-wordmark a,
.is-style-gdd-wordmark {
  font-family: 'Fraunces', Georgia, serif !important;
  font-weight: 400 !important;
  letter-spacing: -0.02em;
  color: #161513;
  text-decoration: none !important;
  position: relative;
  display: inline-block;
  padding-bottom: 4px;
}
.is-style-gdd-wordmark::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  width: 50%;
  height: 2px;
  background-color: #C24C1E;
}

/* Eyebrow label */
.gdd-eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: #C24C1E;
  margin-bottom: 8px;
}

/* Price chip (mono) */
.gdd-price {
  display: inline-block;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 24px;
  font-weight: 400;
  color: #161513;
  margin: 8px 0 16px;
}

/* Service tile: 2px Persimmon top rule signature */
.gdd-service-card {
  background: #FDFBF7;
  border: 1px solid #DAD3C6;
  border-top: 2px solid #C24C1E;
  border-radius: 2px;
  padding: 32px;
  box-shadow: var(--gdd-shadow-card);
  transition: box-shadow 160ms ease-out;
  height: 100%;
}
.gdd-service-card:hover { box-shadow: var(--gdd-shadow-card-hover); }

/* Portfolio + journal cards: no Persimmon rule, just Stone border. */
.gdd-card {
  background: #FDFBF7;
  border: 1px solid #DAD3C6;
  border-radius: 2px;
  padding: 24px;
  box-shadow: var(--gdd-shadow-card);
  transition: box-shadow 160ms ease-out;
  height: 100%;
}
.gdd-card:hover { box-shadow: var(--gdd-shadow-card-hover); }

/* Paper-card image treatment */
.is-style-gdd-paper-card {
  padding: 12px;
  background: #FDFBF7;
  border: 1px solid #DAD3C6;
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(22, 21, 19, 0.04);
  display: inline-block;
  max-width: 100%;
}
.is-style-gdd-paper-card img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0;
}

/* 2px Stone hairline divider under H1 (signature) */
.gdd-hairline {
  height: 2px;
  background-color: #DAD3C6;
  border: 0;
  width: 120px;
  margin: 24px 0 32px;
}
.gdd-hairline--persimmon { background-color: #C24C1E; }

/* Sister-brand callout: Ink band */
.gdd-sister-callout {
  background: #161513;
  color: #F6F1E8;
  padding: 32px;
  border-radius: 2px;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  line-height: 1.6;
}
.gdd-sister-callout a {
  color: #F6F1E8;
  text-decoration: underline;
  text-decoration-color: #C24C1E;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
  font-weight: 600;
}
.gdd-sister-callout a:hover { text-decoration-color: #F6F1E8; }

/* Fraunces pull quote (signature: 2px Persimmon rules top and bottom) */
.gdd-pullquote {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1.35;
  color: #161513;
  border-top: 2px solid #C24C1E;
  border-bottom: 2px solid #C24C1E;
  padding: 32px 0;
  margin: 40px auto;
  text-align: center;
  max-width: 640px;
}
.gdd-pullquote cite {
  display: block;
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-size: 14px;
  color: #5A5551;
  margin-top: 16px;
}

/* Trust strip */
.gdd-trust-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  padding: 32px 0;
  border-top: 1px solid #DAD3C6;
  border-bottom: 1px solid #DAD3C6;
}
.gdd-trust-strip__tile {
  font-family: 'Inter', sans-serif;
  padding-right: 24px;
  border-right: 1px solid #DAD3C6;
}
.gdd-trust-strip__tile:last-child { border-right: 0; }
.gdd-trust-strip__tile .gdd-eyebrow { color: #5A5551; }
@media (max-width: 782px) {
  .gdd-trust-strip { grid-template-columns: 1fr; gap: 16px; }
  .gdd-trust-strip__tile { border-right: 0; padding-right: 0; padding-bottom: 16px; border-bottom: 1px solid #DAD3C6; }
  .gdd-trust-strip__tile:last-child { border-bottom: 0; }
}

/* Heritage paragraph band (About only) */
.gdd-heritage {
  border-top: 2px solid #C24C1E;
  border-bottom: 2px solid #C24C1E;
  padding: 48px 0;
  margin: 48px 0;
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(20px, 1.8vw, 24px);
  line-height: 1.5;
  color: #161513;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

/* Focus states */
:focus-visible { outline: 2px solid #C24C1E; outline-offset: 2px; }

/* Editorial link underline in body copy */
main a {
  color: #161513;
  text-decoration: underline;
  text-decoration-color: #C24C1E;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  font-weight: 500;
}
main a:hover { text-decoration-color: #9E3D14; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
}