/*
Theme Name: Kadence Child
Theme URI: https://motortradedirectory.com/
Description: Child theme for Motor Trade Directory - a working trade-directory look: slim navy bar, dense scannable listing pages, four-column navy footer.
Author: Motor Trade Directory
Template: kadence
Version: 1.0.0
License: GNU General Public License v3.0 (or later)
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: kadence-child
*/

/* ==========================================================================
   1. Design tokens
   ========================================================================== */
:root {
  --mtd-navy: #0B3D5C;
  --mtd-navy-dark: #082D45;
  --mtd-teal: #1F6F8B;
  --mtd-orange: #B4531A;
  --mtd-ink: #16191C;
  --mtd-muted: #55606A;
  --mtd-rule: #D7DEE3;
  --mtd-paper: #FFFFFF;
  --mtd-wash: #F4F6F8;
  --mtd-max: 1180px;
}

/* ==========================================================================
   2. Base typography and colours
   ========================================================================== */
body,
.wp-site-blocks,
.site {
  font-family: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--mtd-ink);
  background-color: var(--mtd-paper);
  font-size: 17px;
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.site-title,
.wp-block-post-title {
  font-family: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--mtd-navy);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

a, a:visited { color: var(--mtd-navy); text-decoration-thickness: 1px; }
a:hover, a:focus { color: var(--mtd-orange); }

/* Section rules drawn in the supporting teal */
.mtd-rule,
.site-footer hr {
  border: 0;
  border-top: 3px solid var(--mtd-teal);
}

/* ==========================================================================
   3. Header - slim navy bar, wordmark left, postcode search centre
   ========================================================================== */
.site-header-row-container,
#masthead .site-header-row-container-inner {
  background-color: var(--mtd-navy);
}

#masthead .site-header-row-container-inner { border-bottom: 3px solid var(--mtd-orange); }

#masthead .site-title,
#masthead .site-title a,
#masthead .site-description {
  color: #FFFFFF;
}
#masthead .site-title a:hover,
#masthead .site-title a:focus { color: #FFFFFF; text-decoration: none; }

#masthead .site-branding img.custom-logo {
  max-height: 42px;
  width: auto;
}

#masthead .main-header-bar .navigation .menu > li > a,
#masthead .header-navigation .menu > li > a {
  color: #FFFFFF;
  font-family: 'Archivo', system-ui, sans-serif;
  font-weight: 600;
  font-size: 15px;
  text-transform: none;
  letter-spacing: 0.01em;
}
#masthead .main-header-bar .navigation .menu > li > a:hover,
#masthead .main-header-bar .navigation .menu > li > a:focus {
  color: #FFFFFF;
  border-bottom: 2px solid var(--mtd-orange);
}
#masthead .header-navigation .menu > li.current-menu-item > a { border-bottom: 2px solid var(--mtd-orange); }

/* Header buttons: the accent-orange "List your business" call to action */
#masthead .header-button .kt-btn,
#masthead .kb-btn-global,
#masthead .header-button a.button,
#masthead .site-header-button a {
  background-color: var(--mtd-orange);
  border-color: var(--mtd-orange);
  color: #FFFFFF;
  border-radius: 3px;
  font-family: 'Archivo', system-ui, sans-serif;
  font-weight: 600;
}
#masthead .header-button .kt-btn:hover,
#masthead .header-button a.button:hover {
  background-color: var(--mtd-navy-dark);
  border-color: var(--mtd-navy-dark);
  color: #FFFFFF;
}

/* Mobile off-canvas panel keeps the navy identity */
.kadence-off-canvas-panel, .site-header-mobile-navigation {
  background-color: var(--mtd-navy);
  color: #FFFFFF;
}
.kadence-off-canvas-panel a { color: #FFFFFF; }

/* ==========================================================================
   4. Home page - search bar over a UK map silhouette, then the listing
   ========================================================================== */
.mtd-hero {
  background-color: var(--mtd-navy);
  background-image:
    radial-gradient(circle at 78% 22%, rgba(31, 111, 139, 0.55), transparent 55%),
    linear-gradient(180deg, rgba(11, 61, 92, 0) 0%, rgba(8, 45, 69, 0.85) 100%);
  color: #FFFFFF;
  padding: 34px 0 30px;
  border-bottom: 4px solid var(--mtd-orange);
  position: relative;
  overflow: hidden;
}
.mtd-hero::after {
  content: "";
  position: absolute;
  right: -40px;
  top: -30px;
  width: 320px;
  height: 300px;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 120'><path fill='%23FFFFFF' fill-opacity='0.10' d='M35 6c-11 0-20 9-20 20 0 14 20 34 20 34s20-20 20-34c0-11-9-20-20-20zm0 27a7 7 0 110-14 7 7 0 010 14z'/><path fill='%23FFFFFF' fill-opacity='0.08' d='M62 60c-8 0-14 6-14 14 0 10 14 24 14 24s14-14 14-24c0-8-6-14-14-14z'/></svg>");
  pointer-events: none;
}
.mtd-hero-inner {
  position: relative;
  z-index: 1;
  max-width: var(--mtd-max);
  margin: 0 auto;
  padding: 0 20px;
}
.mtd-hero h1 {
  color: #FFFFFF;
  font-size: clamp(1.6rem, 4.6vw, 2.5rem);
  margin: 0 0 8px;
  max-width: 22ch;
}
.mtd-hero p {
  color: #E4EBF0;
  margin: 0 0 18px;
  max-width: 60ch;
  font-size: 1.02rem;
}
.mtd-search {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  background: #FFFFFF;
  border-radius: 4px;
  padding: 8px;
  max-width: 660px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}
.mtd-search input[type="search"],
.mtd-search input[type="text"] {
  flex: 1 1 200px;
  min-width: 0;
  border: 1px solid var(--mtd-rule);
  border-radius: 3px;
  padding: 11px 12px;
  font-size: 1rem;
  color: var(--mtd-ink);
}
.mtd-search button,
.mtd-search input[type="submit"] {
  flex: 0 0 auto;
  background-color: var(--mtd-orange);
  border: 1px solid var(--mtd-orange);
  color: #FFFFFF;
  border-radius: 3px;
  padding: 11px 20px;
  font-family: 'Archivo', system-ui, sans-serif;
  font-weight: 600;
  cursor: pointer;
}
.mtd-search button:hover { background-color: var(--mtd-navy-dark); border-color: var(--mtd-navy-dark); }
.mtd-hero-links {
  margin: 12px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  padding: 0;
}
.mtd-hero-links a {
  display: inline-block;
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 3px;
  padding: 4px 10px;
  font-size: 0.88rem;
  text-decoration: none;
}
.mtd-hero-links a:hover,
.mtd-hero-links a:focus { background: var(--mtd-teal); border-color: var(--mtd-teal); color: #FFFFFF; }

/* Entry-point grid (counties, cities, service types) */
.mtd-section { padding: 30px 0 6px; }
.mtd-section > h2,
.mtd-section-head {
  font-size: 1.25rem;
  margin: 0 0 14px;
  padding-bottom: 8px;
  border-bottom: 3px solid var(--mtd-teal);
}
.mtd-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
}
.mtd-grid a {
  display: block;
  background: var(--mtd-wash);
  border: 1px solid var(--mtd-rule);
  border-left: 4px solid var(--mtd-navy);
  border-radius: 3px;
  padding: 12px 14px;
  text-decoration: none;
  font-family: 'Archivo', system-ui, sans-serif;
  font-weight: 600;
  color: var(--mtd-navy);
}
.mtd-grid a:hover,
.mtd-grid a:focus {
  background: #FFFFFF;
  border-left-color: var(--mtd-orange);
  color: var(--mtd-orange);
}
.mtd-grid span {
  display: block;
  font-family: 'Source Sans 3', system-ui, sans-serif;
  font-weight: 400;
  font-size: 0.86rem;
  color: var(--mtd-muted);
  margin-top: 2px;
}

/* ==========================================================================
   5. Cards and listing (home and archives)
   ========================================================================== */
.entry-content,
.site-main { color: var(--mtd-ink); }

article.entry,
.entry.card {
  border-bottom: 1px solid var(--mtd-rule);
}

.entry-meta,
.posted-by,
.entry-taxonomies,
.entry-footer {
  font-size: 0.86rem;
  color: var(--mtd-muted);
}
.entry-meta a, .entry-taxonomies a {
  color: var(--mtd-teal);
  font-weight: 600;
  text-decoration: none;
}
.entry-meta a:hover { color: var(--mtd-orange); }

h2.entry-title a, .entry-title a {
  color: var(--mtd-navy);
  text-decoration: none;
}
h2.entry-title a:hover, .entry-title a:hover { color: var(--mtd-orange); text-decoration: underline; }

/* Commentary: a dense, scannable grid on the latest-articles home page */
body.home .content-area,
body.blog .content-area { max-width: 100%; }

@media (min-width: 900px) {
  body.home .site-main .post-list-grid,
  body.home .kb-posts .post-list-grid,
  body.blog .site-main .post-list-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
  }
}

/* Featured image keeps a consistent 16:9 crop inside cards */
.entry-content .post-thumbnail img,
.post-thumbnail img,
.wp-post-image {
  border-radius: 3px;
  height: auto;
}

/* Reading width for single articles */
.single .entry-content,
.page .entry-content {
  max-width: 44rem;
}
.single .entry-content > p:first-of-type {
  font-size: 1.1rem;
  color: #2A3138;
}
.single .entry-content h2 { margin-top: 1.8em; }
.single .entry-content h3 { margin-top: 1.5em; }
.single .entry-content ul,
.single .entry-content ol { padding-left: 1.25em; }
.single .entry-content li { margin-bottom: 0.35em; }
.single .entry-content blockquote {
  border-left: 4px solid var(--mtd-teal);
  padding-left: 16px;
  color: var(--mtd-muted);
  font-style: normal;
}

/* ==========================================================================
   6. Sidebar - trade headlines
   ========================================================================== */
#secondary .widget-title,
.widget-area .widget-title {
  font-size: 1.02rem;
  padding-bottom: 6px;
  border-bottom: 3px solid var(--mtd-teal);
  margin-bottom: 12px;
}
#secondary .widget,
.widget-area .widget { margin-bottom: 26px; }
.widget-area ul { list-style: none; padding: 0; margin: 0; }
.widget-area li {
  border-bottom: 1px solid var(--mtd-rule);
  padding: 8px 0;
  font-size: 0.95rem;
}

/* ==========================================================================
   7. Footer - four-column sitemap on deep navy
   ========================================================================== */
.site-footer, #colophon, .site-footer-row-container,
footer.site-footer .site-footer-row-container-inner {
  background-color: var(--mtd-navy-dark);
  color: #FFFFFF;
}
#colophon a, .site-footer a { color: #FFFFFF; text-decoration: none; }
#colophon a:hover, .site-footer a:hover { color: #B4531A; }

.site-footer .widget-title,
.site-footer h2, .site-footer h3 {
  color: #FFFFFF;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-bottom: 2px solid var(--mtd-teal);
  padding-bottom: 6px;
  margin-bottom: 12px;
}
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { padding: 4px 0; font-size: 0.95rem; }
.site-footer .mtd-footer-note {
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  margin-top: 18px;
  padding-top: 12px;
  font-size: 0.88rem;
  color: #D8E2E8;
}
.site-footer .mtd-footer-note strong { color: #FFFFFF; }

/* ==========================================================================
   8. Mobile
   ========================================================================== */
@media (max-width: 767px) {
  body { font-size: 16px; }
  .mtd-hero { padding: 26px 0 24px; }
  .mtd-hero::after { display: none; }
  .mtd-hero h1 { font-size: 1.55rem; }
  .mtd-search { padding: 8px; }
  .mtd-search button { flex: 1 1 100%; }
  .mtd-hero-links { gap: 6px; }
  .mtd-grid { grid-template-columns: 1fr; }
  .single .entry-content, .page .entry-content { max-width: 100%; }
  img, iframe, table { max-width: 100%; }
  .mtd-hero-inner { padding: 0 16px; }
}

/* Keep long words and URLs inside their column at narrow widths */
.mtd-hero, .mtd-section, .entry-content, .site-footer, .site-main, .widget-area {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* ==========================================================================
   9. Shared container
   ========================================================================== */
.mtd-inner {
  max-width: var(--mtd-max);
  margin: 0 auto;
  padding: 0 20px;
}

/* ==========================================================================
   10. Trade bar under the header - postcode search, categories, CTA
   ========================================================================== */
.mtd-tradebar {
  background-color: var(--mtd-navy-dark);
  border-bottom: 3px solid var(--mtd-orange);
  color: #FFFFFF;
}
.mtd-tradebar-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  padding: 10px 20px;
}
.mtd-search--slim {
  flex: 1 1 260px;
  max-width: 360px;
  padding: 4px;
  box-shadow: none;
  margin: 0;
}
.mtd-search--slim input[type="search"] { padding: 8px 10px; }
.mtd-search--slim button { padding: 8px 14px; }
.mtd-catnav { flex: 1 1 auto; }
.mtd-catnav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.mtd-catnav a {
  color: #FFFFFF;
  font-family: 'Archivo', system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.92rem;
  text-decoration: none;
  white-space: nowrap;
}
.mtd-catnav a:hover,
.mtd-catnav a:focus { color: #FFFFFF; border-bottom: 2px solid var(--mtd-orange); }
.mtd-cta {
  flex: 0 0 auto;
  display: inline-block;
  background-color: var(--mtd-orange);
  color: #FFFFFF;
  border-radius: 3px;
  padding: 9px 16px;
  font-family: 'Archivo', system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.92rem;
  text-decoration: none;
  white-space: nowrap;
}
.mtd-cta:hover, .mtd-cta:focus { background-color: #FFFFFF; color: var(--mtd-navy); }

/* ==========================================================================
   11. Home hero silhouette (UK map shape) and entry points
   ========================================================================== */
.mtd-hero::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 180'><g fill='%23FFFFFF' fill-opacity='0.12'><path d='M72 6c6-2 12 4 9 11-3 7 1 12 6 15 8 5 12 14 9 23-3 8-10 11-11 19-1 8 4 14 0 22-4 7-13 8-17 15-4 7-1 16-7 22-7 6-16 3-21-4-5-7-14-8-20-14-7-7-4-17 2-23 6-6 3-14 8-21 5-7 13-9 16-17 3-8-1-18 3-27 4-9 11-19 23-21z'/><path d='M22 122c5-1 9 3 8 8-1 5-6 8-11 6-4-2-5-9-1-12 1-1 2-2 4-2z'/></g><g fill='%23B4531A' fill-opacity='0.85'><circle cx='74' cy='44' r='4'/><circle cx='52' cy='88' r='3.4'/><circle cx='38' cy='120' r='3'/></g></svg>");
  background-position: top right;
}
.mtd-entrypoints {
  background: var(--mtd-wash);
  border-bottom: 1px solid var(--mtd-rule);
  padding: 26px 0 30px;
}
.mtd-entrypoints .mtd-section-head {
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--mtd-teal);
  border-bottom: 2px solid var(--mtd-teal);
  padding-bottom: 6px;
  margin: 0 0 12px;
}
.mtd-entrypoints .mtd-section-head + .mtd-grid { margin-bottom: 22px; }
.mtd-grid--three { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

/* ==========================================================================
   12. Home listing: two columns (latest work + trade headlines sidebar)
   ========================================================================== */
@media (min-width: 1024px) {
  .mtd-entrypoints .mtd-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.home #main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 312px;
    gap: 30px;
    align-items: start;
  }
  body.home #main > * { grid-column: 1; }
  body.home #main > .mtd-sidebar { grid-column: 2; grid-row: 1; }
}
.mtd-sidebar .mtd-card {
  background: #FFFFFF;
  border: 1px solid var(--mtd-rule);
  border-top: 3px solid var(--mtd-navy);
  border-radius: 3px;
  padding: 16px 18px;
  margin-bottom: 22px;
}
.mtd-side-title {
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--mtd-navy);
  border-bottom: 2px solid var(--mtd-teal);
  padding-bottom: 6px;
  margin: 0 0 10px;
}
.mtd-headlines { list-style: none; margin: 0; padding: 0; }
.mtd-headlines li { border-bottom: 1px solid var(--mtd-rule); padding: 9px 0; }
.mtd-headlines li:last-child { border-bottom: 0; }
.mtd-headlines a { font-weight: 600; text-decoration: none; }
.mtd-date { display: block; font-size: 0.82rem; color: var(--mtd-muted); }

/* Cards in the latest-articles listing */
#archive-container.kadence-posts-list { gap: 24px; }
#archive-container .entry {
  background: #FFFFFF;
  border: 1px solid var(--mtd-rule);
  border-top: 3px solid var(--mtd-navy);
  border-radius: 3px;
  padding: 0 0 14px;
  overflow: hidden;
}
#archive-container .entry .entry-content-wrap { padding: 0 16px; }
#archive-container .entry .post-thumbnail { margin: 0 0 12px; }
#archive-container .entry .post-thumbnail img { display: block; width: 100%; }
#archive-container .entry .entry-title { font-size: 1.12rem; margin: 0 0 6px; }
#archive-container .entry .entry-summary p { font-size: 0.94rem; color: #333B42; }
#archive-container .entry .entry-taxonomies,
#archive-container .entry .entry-meta { font-size: 0.82rem; }

/* Lead story: the newest piece spans the full width of the listing */
@media (min-width: 900px) {
  body.home #archive-container.kadence-posts-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
  body.home #archive-container.kadence-posts-list > li {
    width: auto;
    max-width: none;
    margin: 0;
  }
  body.home #archive-container > li:first-child { grid-column: 1 / -1; }
  body.home #archive-container > li:first-child .entry {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    align-items: stretch;
  }
  body.home #archive-container > li:first-child .entry .post-thumbnail { margin: 0; height: 100%; }
  body.home #archive-container > li:first-child .entry .post-thumbnail img { height: 100%; object-fit: cover; }
  body.home #archive-container > li:first-child .entry .entry-content-wrap { padding: 20px 22px; }
  body.home #archive-container > li:first-child .entry .entry-title { font-size: 1.6rem; }
  body.home #archive-container > li:first-child .entry .entry-summary p { font-size: 1rem; }
}

/* ==========================================================================
   13. Footer sitemap - four columns on deep navy
   ========================================================================== */
.mtd-footer {
  background-color: var(--mtd-navy);
  color: #FFFFFF;
  border-top: 4px solid var(--mtd-orange);
  padding: 30px 0 24px;
}
.mtd-footer-cols {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}
.mtd-footer-title {
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 0.86rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: #FFFFFF;
  border-bottom: 2px solid var(--mtd-teal);
  padding-bottom: 6px;
  margin: 0 0 10px;
}
.mtd-footer-menu { list-style: none; margin: 0; padding: 0; }
.mtd-footer-menu li { padding: 3px 0; font-size: 0.92rem; }
.mtd-footer-menu a { color: #FFFFFF; text-decoration: none; }
.mtd-footer-menu a:hover, .mtd-footer-menu a:focus { color: #FFFFFF; border-bottom: 2px solid var(--mtd-orange); }
.mtd-footer-note {
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  margin-top: 24px;
  padding-top: 14px;
  font-size: 0.88rem;
  color: #DCE6EC;
}
.mtd-footer-note p { margin: 0 0 6px; max-width: 78ch; }
.mtd-footer-stamp {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Archivo', system-ui, sans-serif;
  color: #FFFFFF;
}
.mtd-mapmark {
  display: inline-block;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23FFFFFF' d='M12 2C8.1 2 5 5.1 5 9c0 5.2 7 13 7 13s7-7.8 7-13c0-3.9-3.1-7-7-7zm0 9.5A2.5 2.5 0 1112 6.5a2.5 2.5 0 010 5z'/></svg>");
}
.site-footer .site-container,
#colophon .site-footer-row-container-inner { background-color: var(--mtd-navy-dark); }

@media (max-width: 1023px) {
  .mtd-footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
  .mtd-footer-cols { grid-template-columns: 1fr; }
  .mtd-tradebar-inner { padding: 10px 16px; }
  .mtd-search--slim { max-width: 100%; }
  .mtd-cta { width: 100%; text-align: center; }
}