/*
Theme Name: Merseyside Web (MTC)
Theme URI: https://merseysideweb.co.uk
Author: Marketing The Change
Author URI: https://marketingthechange.com
Description: Block theme for Merseyside Web. Regional catchment web-build shop for the Wirral peninsula, Sefton coast, Halton, St Helens, Ellesmere Port and the wider Merseyside. Sister to Liverpool Web Designers and Marketing The Change. Cream background, Anglesey navy anchor, Brick orange CTAs, River-silver estuary bar wordmark. Manrope 700 headlines with Inter body, Lora italic accent, JetBrains Mono for prices. 4px soft-square buttons (deliberately distinct from LWD's 12px and MTC's pill).
Version: 1.0.0
Requires at least: 6.5
Requires PHP: 8.1
Tested up to: 6.6
License: Proprietary
Text Domain: merseysideweb-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 {
  --msw-shadow-card: 0 1px 3px rgba(26, 32, 41, 0.06);
  --msw-shadow-card-hover: 0 4px 14px rgba(26, 32, 41, 0.08);
  --msw-radius-button: 4px;
  --msw-radius-card: 8px;
  --msw-radius-chip: 4px;
}

html { scroll-behavior: smooth; }
body { background-color: #F7F2E9; color: #1A2029; }

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

/* Buttons: force 4px soft-square everywhere, override anything pill-like or 12px. */
.wp-block-button__link,
.wp-element-button,
button.wp-block-search__button {
  border-radius: 4px !important;
  font-weight: 600;
  padding: 12px 24px;
  min-height: 44px;
  transition: background-color 120ms ease, box-shadow 120ms ease;
}
.wp-block-button.is-style-msw-primary .wp-block-button__link {
  background-color: #B85A2E;
  color: #F7F2E9;
}
.wp-block-button.is-style-msw-primary .wp-block-button__link:hover,
.wp-block-button.is-style-msw-primary .wp-block-button__link:focus {
  background-color: #8E4020;
  outline: 2px solid #3F5B6E;
  outline-offset: 2px;
}
.wp-block-button.is-style-msw-secondary .wp-block-button__link {
  background-color: #F7F2E9;
  color: #1A2029;
  border: 1px solid #DAD3C4;
  font-weight: 500;
}
.wp-block-button.is-style-msw-secondary .wp-block-button__link:hover {
  background-color: #EDE4D3;
}

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

/* Price chip (brick, sparing) */
.msw-price-chip {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 4px;
  background: rgba(184, 90, 46, 0.10);
  color: #8E4020;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  font-weight: 600;
}

/* Pack card top border */
.msw-pack-card {
  background: #F7F2E9;
  border: 1px solid #DAD3C4;
  border-top: 3px solid #B85A2E;
  border-radius: 8px;
  padding: 28px;
  box-shadow: var(--msw-shadow-card);
  transition: box-shadow 150ms ease;
}
.msw-pack-card:hover { box-shadow: var(--msw-shadow-card-hover); }
.msw-pack-card .msw-price {
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 30px;
  color: #1A2029;
}

/* Image treatments */
.img-river-wash { position: relative; overflow: hidden; isolation: isolate; }
.img-river-wash img { width: 100%; height: 100%; object-fit: cover; display: block; }
.img-river-wash::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(63,91,110,0.25) 0%, rgba(42,78,110,0.55) 100%);
  pointer-events: none;
}
.img-brick-warmth { position: relative; overflow: hidden; isolation: isolate; }
.img-brick-warmth img { width: 100%; height: 100%; object-fit: cover; display: block; filter: contrast(1.03) saturate(0.95); }
.img-brick-warmth::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 45%, rgba(184,90,46,0.14) 100%);
  pointer-events: none; mix-blend-mode: multiply;
}
.img-paper-card {
  padding: 12px; background: #F7F2E9; border: 1px solid #DAD3C4;
  border-radius: 8px; box-shadow: 0 2px 8px rgba(26,32,41,0.06); display: inline-block; max-width: 100%;
}
.img-paper-card img { width: 100%; height: auto; display: block; border-radius: 4px; }

/* Wordmark: left-hand River-silver estuary bar (SIGNATURE) */
.msw-wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 22px;
  line-height: 1;
  text-transform: lowercase;
  text-decoration: none;
  color: #3F5B6E;
  letter-spacing: -0.01em;
}
.msw-wordmark::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 22px;
  background: #94A7B3;
  border-radius: 1px;
}
.msw-wordmark .msw-wordmark__accent { color: #B85A2E; }

/* Sister-brand dual callout */
.msw-sister-callout {
  background: #2A4E6E;
  color: #F7F2E9;
  padding: 24px 32px;
  border-radius: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  line-height: 1.65;
}
.msw-sister-callout a { color: #F7F2E9; text-decoration: underline; font-weight: 600; }
.msw-sister-callout a:hover { color: #B85A2E; text-decoration: underline; }

/* Lora pull quote */
.msw-pullquote {
  font-family: 'Lora', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 28px;
  line-height: 1.35;
  color: #1A2029;
  border-top: 2px solid #3F5B6E;
  border-bottom: 2px solid #3F5B6E;
  padding: 24px 0;
  margin: 32px 0;
  text-align: center;
}

/* Trust strip tiles */
.msw-trust-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  padding: 24px 0;
  border-top: 1px solid #DAD3C4;
  border-bottom: 1px solid #DAD3C4;
}
.msw-trust-strip__tile { font-family: 'Inter', sans-serif; }
.msw-trust-strip__tile .msw-eyebrow { color: #6E7784; }
@media (max-width: 782px) { .msw-trust-strip { grid-template-columns: repeat(2, 1fr); } }

/* Regional catchment tile grid (B21) */
.msw-catchment-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 40px;
}
@media (max-width: 900px) { .msw-catchment-grid { grid-template-columns: repeat(2, 1fr); } }
.msw-catchment-tile {
  background: #F7F2E9;
  border: 1px solid #DAD3C4;
  border-left: 3px solid #94A7B3;
  border-radius: 8px;
  padding: 20px 22px;
  text-decoration: none;
  color: #1A2029;
  display: block;
  transition: border-left-color 150ms ease, box-shadow 150ms ease;
}
.msw-catchment-tile:hover {
  border-left-color: #B85A2E;
  box-shadow: var(--msw-shadow-card-hover);
}
.msw-catchment-tile__name {
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: 18px;
  color: #2A4E6E;
  display: block;
  margin-bottom: 4px;
}
.msw-catchment-tile__lede {
  font-size: 14px;
  color: #6E7784;
  line-height: 1.5;
}

/* Postcode routing form helper */
.msw-postcode-note {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: #6E7784;
  margin-top: 6px;
  font-style: italic;
}
.msw-postcode-route {
  padding: 14px 16px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  margin-top: 12px;
  display: none;
}
.msw-postcode-route.is-active { display: block; }
.msw-postcode-route.is-lwd { background: rgba(180, 66, 53, 0.10); color: #8E3428; }
.msw-postcode-route.is-msw { background: rgba(184, 90, 46, 0.10); color: #8E4020; }
.msw-postcode-route.is-mtc { background: rgba(63, 91, 110, 0.10); color: #2A4E6E; }
.msw-postcode-route a { color: inherit; text-decoration: underline; font-weight: 600; }

/* Floating mobile CTA */
.msw-float-cta {
  position: fixed;
  right: 16px;
  bottom: 16px;
  background: #B85A2E;
  color: #F7F2E9;
  padding: 12px 20px;
  border-radius: 4px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(26,32,41,0.16);
  z-index: 90;
  display: none;
}
@media (max-width: 782px) { .msw-float-cta { display: inline-flex; align-items: center; gap: 8px; } }

/* Focus states, accessibility */
:focus-visible { outline: 2px solid #3F5B6E; outline-offset: 2px; }

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