/*
Theme Name: Milton Keynes Businesses
Theme URI: https://miltonkeynesbusinesses.co.uk
Description: Custom child theme for the Milton Keynes Businesses directory — modern "Grid City" identity (Hanken Grotesk + JetBrains Mono) on GeneratePress. Midnight ink + signal amber. Sister site to the Aylesbury directory.
Author: Milton Keynes Businesses
Template: generatepress
Version: 0.1.0
Text Domain: milton-keynes-businesses
*/

/* ============================================================
   Design tokens — "Grid City" palette (midnight ink + signal amber)
   Token names kept from the Aylesbury base; only values remapped.
   --vale-* = primary (Midnight Ink) ramp · --clay-* = accent (Signal Amber)
   ============================================================ */
:root {
  --ink: #10151E;          /* near-black body text */
  --parchment: #F4F6F9;    /* cool paper base */
  --cream: #E9EDF3;        /* elevated cool surface */
  --vale-50: #EAF0F7;
  --vale-100: #D4DEEC;
  --vale-400: #2E4B73;     /* lighter primary */
  --vale-500: #152A45;     /* PRIMARY Midnight Ink */
  --vale-600: #0F2038;
  --vale-700: #0A1628;
  --clay-400: #F6B84D;
  --clay-500: #F4A623;     /* ACCENT Signal Amber */
  --clay-600: #D88E10;
  --sage: #6B7280;         /* Concrete grey neutral */

  --font-display: "Hanken Grotesk", system-ui, sans-serif;
  --font-sans: "Hanken Grotesk", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  --shadow-card: 0 1px 2px rgba(16,21,30,.05), 0 8px 24px -12px rgba(21,42,69,.28);
  --shadow-lift: 0 2px 4px rgba(16,21,30,.06), 0 18px 40px -18px rgba(21,42,69,.38);
}

/* Global zoom — scales the whole site ~10% larger (like Ctrl + scroll) for easier reading. */
html { zoom: 1.1; }

/* ============================================================
   Base
   ============================================================ */
body {
  font-family: var(--font-sans);
  color: var(--ink);
  background-color: var(--parchment);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .entry-title, .site-title {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--ink);
}
h1 { font-size: clamp(2.2rem, 4vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); }

a { color: var(--vale-500); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover, a:focus { color: var(--clay-500); }

/* mono eyebrows / labels */
.eyebrow, .wp-block-tag-cloud a, .listdom-label {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: .72rem;
  color: var(--vale-500);
}

/* ============================================================
   Header / navigation (GeneratePress)
   ============================================================ */
.site-header { background: var(--parchment); border-bottom: 1px solid rgba(21,42,69,.15); }
.site-title a { font-family: var(--font-display); letter-spacing: -0.02em; color: var(--ink); }
.main-navigation { background: transparent; }
.main-navigation a { font-family: var(--font-sans); font-weight: 500; color: rgba(16,21,30,.82); }
.main-navigation a:hover, .main-navigation .current-menu-item > a { color: var(--vale-500); }
.main-navigation .main-nav ul li[class*="current-menu"] > a { color: var(--vale-500); }

/* ============================================================
   Buttons
   ============================================================ */
.button, button, input[type="submit"], .wp-block-button__link, .gb-button {
  background: var(--clay-500);
  color: var(--ink);
  border: 0;
  border-radius: 999px;
  padding: .7em 1.4em;
  font-family: var(--font-sans);
  font-weight: 700;
  box-shadow: var(--shadow-card);
  transition: transform .15s ease, background-color .2s ease;
}
.button:hover, button:hover, input[type="submit"]:hover, .wp-block-button__link:hover {
  background: var(--clay-600);
  color: var(--ink);
}
.button:active, button:active { transform: translateY(1px); }

.button-secondary, .is-style-outline .wp-block-button__link {
  background: transparent;
  color: var(--vale-500);
  border: 1px solid var(--vale-500);
  box-shadow: none;
}

/* ============================================================
   Surfaces / cards (used by directory listing grids later)
   ============================================================ */
.ab-card, .lsd-listing, .lsd-element {
  background: var(--cream);
  border: 1px solid rgba(21,42,69,.10);
  border-radius: 18px;
  box-shadow: var(--shadow-card);
  transition: transform .25s ease, box-shadow .25s ease;
}
.ab-card:hover, .lsd-listing:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }

/* ============================================================
   Footer
   ============================================================ */
.site-footer, .site-info {
  background: var(--vale-700);
  color: rgba(244,246,249,.82);
}
.site-footer a, .site-info a { color: rgba(244,246,249,.9); }
.site-footer a:hover { color: #fff; }

/* focus-visible accessibility */
a:focus-visible, button:focus-visible, .button:focus-visible, input:focus-visible {
  outline: 2px solid var(--clay-500);
  outline-offset: 2px;
}

/* ============================================================
   Informational pages / articles (About Aylesbury cluster)
   ============================================================ */
.page .entry-content, .single-post .entry-content { max-width: 74ch; margin-left: auto; margin-right: auto; line-height: 1.75; }
.entry-content h2 { font-family: var(--font-display); font-size: clamp(1.5rem,2.8vw,2rem); margin: 2rem 0 .6rem; color: var(--ink); }
.entry-content h3 { font-size: 1.15rem; margin: 1.4rem 0 .4rem; color: var(--vale-600); }
.entry-content p { margin: 0 0 1rem; }
.entry-content ul, .entry-content ol { margin: 0 0 1rem; padding-left: 1.3rem; }
.entry-content li { margin: .3rem 0; }
.entry-content a { color: var(--vale-500); text-decoration: underline; }
.entry-content a:hover { color: var(--clay-600); }
/* listing card location line (street, area) — used site-wide */
.ab-card__loc { display: block; font-size: .82rem; color: rgba(16,21,30,.6); margin-top: .15rem; }
.ab-card__loc--addr { font-size: .78rem; color: rgba(16,21,30,.5); }
.ab-ncard__loc { display: block; font-size: .76rem; color: rgba(16,21,30,.55); margin-top: .1rem; }
.entry-content .ab-related { margin: 2.4rem 0 0; padding-top: 1.4rem; border-top: 1px solid rgba(21,42,69,.14); }
.entry-content .ab-related h2 { margin-top: 0; }
.entry-content .ab-related ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .55rem; }
.entry-content .ab-related a { display: inline-block; padding: .5em 1.1em; border-radius: 999px; background: var(--cream); border: 1px solid rgba(21,42,69,.18); color: var(--vale-600); font-weight: 600; text-decoration: none; }
.entry-content .ab-related a:hover { background: var(--vale-500); color: var(--parchment); }

/* contact / advertise form */
.ab-cform { display: flex; flex-direction: column; gap: .7rem; max-width: 30rem; margin: 1.4rem 0; }
.ab-cform input, .ab-cform textarea { width: 100%; padding: .65em .8em; border: 1px solid rgba(21,42,69,.25); border-radius: 10px; font-family: var(--font-sans); font-size: 1rem; background: #fff; color: var(--ink); }
.ab-cform input:focus, .ab-cform textarea:focus { outline: none; border-color: var(--vale-500); }
.ab-cform button { align-self: flex-start; }
.ab-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.ab-formok { background: var(--vale-50); border: 1px solid var(--vale-100); border-radius: 12px; padding: 1rem 1.2rem; color: var(--vale-600); font-weight: 600; }
/* neighbourhoods index grid */
.ab-arealist { list-style: none; padding: 0; margin: .4rem 0 1.8rem; display: flex; flex-wrap: wrap; gap: .55rem; }
.ab-arealist a { display: inline-flex; align-items: center; gap: .45em; padding: .5em 1.1em; border-radius: 999px; background: var(--cream); border: 1px solid rgba(21,42,69,.18); color: var(--vale-600); font-weight: 600; text-decoration: none; }
.ab-arealist a:hover { background: var(--vale-500); border-color: var(--vale-500); color: var(--parchment); }
.ab-arealist a em { font-style: normal; font-family: var(--font-mono); font-size: .72rem; opacity: .6; }

/* ---- Mega dropdowns for large category groups (Local Services, Things to Do) ---- */
.main-navigation .mkb-mega { position: static; }
.main-navigation .mkb-mega > .sub-menu {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	width: min(94vw, 900px);
	left: auto;
	right: 0;
	padding: 14px 18px;
	gap: 0;
}
.main-navigation .mkb-mega > .sub-menu li { width: auto; float: none; }
.main-navigation .mkb-mega > .sub-menu li a {
	padding: 7px 10px;
	line-height: 1.25;
	white-space: normal;
}
/* keep the smaller Eat & Drink dropdown as a normal single column */
@media (max-width: 768px) {
	.main-navigation .mkb-mega > .sub-menu {
		display: block;
		width: 100%;
		right: auto;
	}
}

/* ---- Keep the primary top menu on a single line (desktop) ---- */
@media (min-width: 769px) {
	.main-navigation .inside-navigation { flex-wrap: nowrap; }
	.main-navigation .main-nav > ul {
		flex-wrap: nowrap;
		white-space: nowrap;
	}
	.main-navigation .main-nav > ul > li > a {
		padding-left: 13px;
		padding-right: 13px;
		font-size: 0.95rem;
		white-space: nowrap;
	}
	/* tighten the dropdown arrow spacing */
	.main-navigation .main-nav > ul > li.menu-item-has-children > a {
		padding-right: 8px;
	}
	/* let the logo take a little less room so the menu fits beside it */
	.site-header .site-branding .main-title,
	.site-header .site-title {
		font-size: clamp(1.15rem, 2vw, 1.5rem);
		line-height: 1.15;
	}
}