/*
Theme Name: Understrap Child
Description: Child theme for Understrap. You can now safely customize it and not risk losing your customizations.
Author: Nairobi Repair Center
Author URI: https://nairobirepair.co.ke
Template: understrap
Version: 1.0
*/

/* DM Sans @font-face declarations (local "fonts" folder) */

/* ==========================================================================
   Nairobi Repair Center — Child Theme Stylesheet (understrap-child)
   Extends the visual system used on the front page template (NRCHome) to
   every other template, archive, single post, widget area and form on the
   site: blog posts, service pages, search results, 404, comments, etc.

   Design tokens (color, radius, spacing, shadow) are lifted directly from
   the front page inline styles so the rest of the site reads as one
   continuous brand, not a themed WordPress default.

   Build notes:
   - Mobile-first: base rules target small screens, larger screens are
     progressive enhancements added in min-width media queries.
   - Only the locally hosted DM Sans faces below are used. Space Grotesk
     is NOT loaded here (it is only pulled in by the standalone front-page
     template via Google Fonts) — headings in child-theme content instead
     use DM Sans at heavier weights with tightened tracking to keep the
     same geometric, editorial feel without an external font request.
   - Animation is intentionally minimal: only short color/background
     transitions on interactive elements. No transform-based hover lifts,
     no scroll animations, no layout-shifting reveal effects.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts (locally hosted only)
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "DM Sans";
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url("https://nairobirepair.co.ke/wp-content/themes/understrap-child/fonts/dm-sans-v17-latin-300.woff2") format("woff2");
}
@font-face {
  font-family: "DM Sans";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("https://nairobirepair.co.ke/wp-content/themes/understrap-child/fonts/dm-sans-v17-latin-regular.woff2") format("woff2");
}
@font-face {
  font-family: "DM Sans";
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  src: url("https://nairobirepair.co.ke/wp-content/themes/understrap-child/fonts/dm-sans-v17-latin-italic.woff2") format("woff2");
}
@font-face {
  font-family: "DM Sans";
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url("https://nairobirepair.co.ke/wp-content/themes/understrap-child/fonts/dm-sans-v17-latin-600.woff2") format("woff2");
}
@font-face {
  font-family: "DM Sans";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("https://nairobirepair.co.ke/wp-content/themes/understrap-child/fonts/dm-sans-v17-latin-700.woff2") format("woff2");
}
@font-face {
  font-family: "DM Sans";
  font-weight: 800;
  font-style: normal;
  font-display: swap;
  src: url("fonts/dm-sans-v17-latin-800.woff2") format("woff2");
}

/* --------------------------------------------------------------------------
   2. Design tokens
   -------------------------------------------------------------------------- */
:root{
  --blue:#2d5c88;
  --blue-deep:#173955;   /* used as "navy" throughout */
  --blue-pale:#eaf1f6;
  --navy:#173955;
  --ink:#182a39;
  --muted:#5f6f7d;
  --stone:#f7f6f2;
  --line:#d9e0e5;
  --green:#1f8a61;
  --white:#fff;
  --panache:#eaf3e7;     /* soft green-grey used behind in-content lists */

  --radius-sm:3px;
  --radius-md:6px;
  --radius-lg:10px;
  --shadow-card:0 10px 26px rgba(24,42,57,.08);
  --shadow-lift:0 18px 50px rgba(24,42,57,.10);

  --fs-base:16px;
  --fs-sm:.9em;          /* used for in-content lists: 10% smaller */
  --fs-blockquote:1.5em; /* 50% larger than surrounding content */

  --ease-fast:120ms ease;
  --gutter:20px;
}

/* --------------------------------------------------------------------------
   3. Reset & base
   -------------------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}
body{
  margin:0;
  background:var(--stone);
  color:var(--ink);
  font-family:"DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size:var(--fs-base);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  font-kerning:normal;
}
img,svg,video,canvas{ display:block; max-width:100%; height:auto; }
img,video,iframe{ height:auto; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ cursor:pointer; }
figure{ margin:0; }
ul,ol{ margin:0; padding:0; }
hr{ border:0; border-top:1px solid var(--line); margin:2.5em 0; }

a{
  color:var(--blue);
  text-decoration:none; /* links never underlined, anywhere on the site */
}
a:hover,a:focus{ color:var(--blue-deep); text-decoration:none; }
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid #9bc3e2;
  outline-offset:3px;
}

/* Minimal-motion policy: only short color/background transitions site-wide */
a,button,.button,input,select,textarea{
  transition:color var(--ease-fast), background-color var(--ease-fast), border-color var(--ease-fast), box-shadow var(--ease-fast);
}

.container{ width:min(1160px, calc(100% - 40px)); margin-inline:auto; }

/* --------------------------------------------------------------------------
   4. Typography
   -------------------------------------------------------------------------- */
h1,h2,h3,h4,h5,h6{
  font-family:"DM Sans", sans-serif;
  font-weight:700;
  letter-spacing:-.02em;
  line-height:1.15;
  color:var(--ink);
  margin:0 0 .6em;
}
h1{ font-size:clamp(30px,5vw,46px); letter-spacing:-.03em; }
h2{ font-size:clamp(26px,3.6vw,36px); }
h3{ font-size:clamp(20px,2.6vw,24px); }
h4{ font-size:18px; }
h5{ font-size:16px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
h6{ font-size:13px; font-weight:800; text-transform:uppercase; letter-spacing:.14em; color:var(--muted); }

p{ margin:0 0 1.2em; color:var(--ink); }
small{ font-size:13px; color:var(--muted); }

::selection{ background:var(--blue-pale); color:var(--blue-deep); }

/* --------------------------------------------------------------------------
   5. Buttons & form controls (generic, reused across all templates)
   -------------------------------------------------------------------------- */
.button,
input[type="submit"],
input[type="button"],
button.button-primary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:0;
  border-radius:var(--radius-sm);
  padding:13px 20px;
  min-height:48px;
  font-weight:800;
  font-size:15px;
  background:var(--blue);
  color:#fff;
}
.button:hover,input[type="submit"]:hover,input[type="button"]:hover{
  background:var(--blue-deep);
}
.button-whatsapp{ background:#238b64; }
.button-whatsapp:hover{ background:#1a6f50; }
.button-outline{
  background:transparent;
  color:var(--blue-deep);
  border:1px solid var(--line);
}
.button-outline:hover{ border-color:var(--blue); color:var(--blue); }

.site-form label,
form label{
  display:flex;
  flex-direction:column;
  gap:7px;
  color:var(--muted);
  font-size:12px;
  font-weight:800;
  margin-bottom:18px;
}
.site-form input,.site-form select,.site-form textarea,
form input:not([type=submit]):not([type=button]),
form select,form textarea{
  width:100%;
  border:1px solid var(--line);
  border-radius:2px;
  padding:12px;
  background:#fff;
  color:var(--ink);
  outline:none;
}
.site-form input:focus,.site-form select:focus,.site-form textarea:focus,
form input:focus,form select:focus,form textarea:focus{
  border-color:var(--blue);
  box-shadow:0 0 0 3px #d6e6f1;
}

/* --------------------------------------------------------------------------
   6. Images, figures, embeds — sized up front to avoid layout shift
   -------------------------------------------------------------------------- */
.wp-caption,figure.wp-block-image{ max-width:100%; }
.wp-caption img,figure.wp-block-image img{ width:100%; border-radius:var(--radius-md); }
.wp-caption-text,figcaption{
  font-size:13px;
  color:var(--muted);
  padding-top:10px;
}
.entry-content iframe,
.entry-content video,
.wp-block-embed__wrapper{
  width:100%;
  aspect-ratio:16/9;
  border:0;
  border-radius:var(--radius-md);
}
.alignleft{ float:left; margin:0 20px 16px 0; }
.alignright{ float:right; margin:0 0 16px 20px; }
.aligncenter{ display:block; margin:0 auto 20px; }

/* --------------------------------------------------------------------------
   7. Content area (posts & pages) — typography rules requested explicitly
   -------------------------------------------------------------------------- */
.entry-content,
.page-content,
.site-content .content-area .entry-content{
  font-size:16px;
  line-height:1.75;
  color:var(--ink);
}
.entry-content > *:first-child{ margin-top:0; }
.entry-content h2,.entry-content h3,.entry-content h4{ margin-top:1.6em; }
.entry-content a{ color:var(--blue); text-decoration:none; }
.entry-content a:hover{ color:var(--blue-deep); }

/* Bold text turns navy blue by default */
.entry-content strong,
.entry-content b{
  color:var(--navy);
  font-weight:700;
}

/* Lists: slightly tabbed, 10% smaller than surrounding content, panache bg */
.entry-content ul,
.entry-content ol{
  background:var(--panache);
  font-size:var(--fs-sm);
  border-radius:var(--radius-md);
  padding:16px 18px 16px 44px; /* left padding = the "tab" indent */
  margin:0 0 1.4em;
}
.entry-content ul ul,
.entry-content ol ol,
.entry-content ul ol,
.entry-content ol ul{
  background:transparent;
  padding:8px 0 0 26px;
  margin:6px 0 0;
}
.entry-content li{ margin:0 0 8px; }
.entry-content li:last-child{ margin-bottom:0; }
.entry-content ul li::marker{ color:var(--blue); }
.entry-content ol li::marker{ color:var(--blue); font-weight:700; }

/* Blockquotes: navy cards, white text, 50% larger type, contact footer */
.entry-content blockquote{
  background:var(--navy);
  color:#fff;
  font-size:var(--fs-blockquote);
  line-height:1.55;
  border-radius:var(--radius-lg);
  padding:28px 30px 22px;
  margin:0 0 1.6em;
  box-shadow:var(--shadow-card);
}
.entry-content blockquote p{ color:#fff; margin:0 0 .6em; }
.entry-content blockquote p:last-of-type{ margin-bottom:0; }
.entry-content blockquote cite{
  display:block;
  font-style:normal;
  font-size:.55em;
  color:#dceaf3;
}
.entry-content blockquote::after{
  content:"\260E  Phone No: 0746801984 \2014 Nairobi Repair Center";
  display:block;
  margin-top:20px;
  padding-top:16px;
  border-top:1px solid rgba(255,255,255,.25);
  font-size:.5em;
  font-weight:800;
  letter-spacing:.03em;
  color:#dceaf3;
}

/* Inline code / pre blocks kept consistent with the palette */
.entry-content code{
  background:var(--blue-pale);
  color:var(--blue-deep);
  padding:.15em .4em;
  border-radius:4px;
  font-size:.9em;
}
.entry-content pre{
  background:var(--blue-deep);
  color:#e7f0f6;
  padding:18px 20px;
  border-radius:var(--radius-md);
  overflow-x:auto;
}
.entry-content pre code{ background:none; color:inherit; padding:0; }

/* --------------------------------------------------------------------------
   8. Tables — responsive, become cards on small screens (no animation)
   -------------------------------------------------------------------------- */
.entry-content table{
  width:100%;
  border-collapse:collapse;
  margin:0 0 1.6em;
  font-size:14px;
}
.entry-content thead th{
  text-align:left;
  background:var(--blue-deep);
  color:#fff;
  font-weight:800;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.06em;
  padding:12px 14px;
}
.entry-content tbody td{
  padding:12px 14px;
  border-bottom:1px solid var(--line);
  background:#fff;
}
.entry-content tbody tr:nth-child(even) td{ background:var(--stone); }

/* Below 680px (matches the front-page breakpoint), tables become cards. */
@media (max-width:680px){
  .entry-content table,
  .entry-content thead,
  .entry-content tbody,
  .entry-content tr,
  .entry-content th,
  .entry-content td{
    display:block;
    width:100%;
  }
  .entry-content thead{
    /* Column headings are re-shown per cell via data-label below;
       the header row itself is not needed once stacked. */
    position:absolute;
    width:1px;height:1px;
    overflow:hidden;
    clip:rect(0 0 0 0);
    white-space:nowrap;
  }
  .entry-content table{ border:0; }
  .entry-content tr{
    background:#fff;
    border:1px solid var(--line);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-card);
    padding:16px 18px;
    margin:0 0 14px;
  }
  .entry-content tbody tr:nth-child(even) td{ background:transparent; }
  .entry-content td{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:14px;
    text-align:right;
    padding:9px 0;
    border-bottom:1px solid var(--line);
  }
  .entry-content td:last-child{ border-bottom:0; }
  /* First cell in each row reads as the card's title */
  .entry-content td:first-child{
    display:block;
    text-align:left;
    font-weight:800;
    color:var(--navy);
    font-size:15px;
    padding-bottom:10px;
    margin-bottom:6px;
    border-bottom:1px solid var(--line);
  }
  /* Optional: add a data-label="Column name" attribute to <td> in the
     table markup to print a left-hand label for every value cell. */
  .entry-content td:not(:first-child)::before{
    content:attr(data-label);
    text-align:left;
    color:var(--muted);
    font-weight:700;
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.05em;
  }
}

/* --------------------------------------------------------------------------
   9. Header / navigation (generic, for templates other than the coded
      front page, e.g. blog, single post, archive headers)
   -------------------------------------------------------------------------- */
.utility-bar{ background:var(--blue-deep); color:#dceaf3; font-size:12px; }
.utility-inner{ min-height:34px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.utility-inner a{ display:inline-flex; align-items:center; gap:6px; color:#fff; font-weight:700; }

.site-header{
  position:sticky; top:0; z-index:20;
  background:rgba(247,246,242,.94);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(217,224,229,.9);
}
.navbar,.nav-inner{
  min-height:64px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
}
.brand-lockup{ display:inline-flex; align-items:center; gap:11px; }
.brand-lockup > img{ width:40px; height:40px; object-fit:contain; }
.wordmark{ display:inline-flex; flex-direction:column; line-height:1; }
.wordmark span{ font-size:14px; font-weight:700; letter-spacing:.24em; }
.wordmark strong{ font-size:12px; font-weight:600; color:var(--muted); }

.navbar-nav,.nav-menu{
  display:flex;
  align-items:center;
  gap:4px;
  font-size:14px;
  font-weight:600;
  color:var(--muted);
  list-style:none;
  margin:0; padding:0;
  flex-wrap:wrap;
}
.navbar-nav .nav-link,.nav-menu > a{ padding:10px 12px; color:var(--muted); }
.navbar-nav .nav-link:hover,.nav-menu > a:hover{ color:var(--blue); }
.nav-call{
  padding:11px 16px;
  background:var(--blue);
  color:#fff !important;
  border-radius:4px;
  font-weight:800;
}
.nav-call:hover{ background:var(--blue-deep); }
.menu-toggle,.navbar-toggler{
  border:0;
  background:transparent;
  color:var(--ink);
  padding:10px;
}
.dropdown-menu{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-card);
  padding:8px;
}
.dropdown-item{ padding:10px 12px; border-radius:var(--radius-sm); color:var(--ink); }
.dropdown-item:hover{ background:var(--blue-pale); color:var(--blue-deep); }

/* --------------------------------------------------------------------------
   10. Page header / breadcrumbs (for blog & archive templates)
   -------------------------------------------------------------------------- */
.page-header{
  background:var(--blue-deep);
  color:#fff;
  padding:56px 0 64px;
}
.page-header .eyebrow{
  color:#8db5d2; text-transform:uppercase; letter-spacing:.18em;
  font-size:11px; font-weight:800; margin:0 0 14px;
}
.page-header h1{ color:#fff; margin:0; }
.breadcrumbs{
  font-size:12px;
  color:var(--muted);
  margin:0 0 20px;
}
.breadcrumbs a{ color:var(--muted); }
.breadcrumbs a:hover{ color:var(--blue); }
.breadcrumbs .sep{ margin:0 6px; color:var(--line); }

/* --------------------------------------------------------------------------
   11. Cards (blog listing cards, related-post cards, generic .card)
   -------------------------------------------------------------------------- */
.card,
.post-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow-card);
}
.post-card img{ aspect-ratio:4/3; object-fit:cover; width:100%; }
.post-card .post-card-body{ padding:20px 22px 24px; }
.post-card h3{ font-size:19px; margin:0 0 8px; }
.post-card p{ color:var(--muted); font-size:14px; margin:0 0 12px; }
.post-card .post-meta{ font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; }

.card-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:24px;
}

/* --------------------------------------------------------------------------
   12. Sidebar & widgets
   -------------------------------------------------------------------------- */
.widget{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  padding:22px;
  margin:0 0 22px;
}
.widget-title{
  font-size:13px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--blue-deep);
  margin:0 0 16px;
  padding-bottom:12px;
  border-bottom:1px solid var(--line);
}
.widget ul{ list-style:none; margin:0; padding:0; }
.widget li{ padding:9px 0; border-bottom:1px solid var(--line); font-size:14px; }
.widget li:last-child{ border-bottom:0; }
.widget_search .search-form{ display:flex; gap:8px; }

/* --------------------------------------------------------------------------
   13. Pagination
   -------------------------------------------------------------------------- */
.pagination,.nav-links{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:36px 0 0;
}
.page-numbers{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:40px;
  height:40px;
  padding:0 12px;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  color:var(--ink);
  font-weight:700;
  font-size:13px;
}
.page-numbers.current{ background:var(--blue); color:#fff; border-color:var(--blue); }
.page-numbers:hover{ border-color:var(--blue); color:var(--blue); }

/* --------------------------------------------------------------------------
   14. Comments
   -------------------------------------------------------------------------- */
.comments-area{ margin-top:56px; padding-top:40px; border-top:1px solid var(--line); }
.comments-title{ margin-bottom:24px; }
.comment-list{ list-style:none; margin:0; padding:0; }
.comment-body{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  padding:20px;
  margin:0 0 18px;
}
.comment-author .fn{ font-weight:800; color:var(--ink); font-style:normal; }
.comment-metadata{ font-size:12px; color:var(--muted); }
.comment-metadata a{ color:var(--muted); }
.comment-reply-link{
  display:inline-block;
  margin-top:8px;
  font-size:12px;
  font-weight:800;
  color:var(--blue);
}
#respond{ margin-top:32px; }

/* --------------------------------------------------------------------------
   15. Search results & 404
   -------------------------------------------------------------------------- */
.search-no-results .page-content,
.error-404 .page-content{
  text-align:left;
  padding:20px 0 40px;
}
.search-form{ display:flex; gap:10px; flex-wrap:wrap; }
.search-form .search-field{ flex:1 1 220px; }
.search-form .search-submit{ flex:0 0 auto; }

/* --------------------------------------------------------------------------
   16. Footer (widgetized footer used on standard templates)
   -------------------------------------------------------------------------- */
.site-footer{ background:#102b40; color:#c6d5df; padding:60px 0 24px; }
.footer-widgets{
  display:grid;
  grid-template-columns:1fr;
  gap:32px;
  padding-bottom:40px;
}
.site-footer .widget{ background:transparent; border:0; padding:0; }
.site-footer .widget-title{ color:#8db5d2; border-bottom-color:rgba(214,231,240,.15); }
.site-footer a{ color:#c6d5df; }
.site-footer a:hover{ color:#fff; }
.footer-bottom{
  border-top:1px solid rgba(214,231,240,.15);
  padding-top:20px;
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:12px;
  font-size:12px;
  color:#8fa9b9;
}

/* --------------------------------------------------------------------------
   17. Utility classes
   -------------------------------------------------------------------------- */
.sr-only,.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.text-center{ text-align:center; }
.text-muted{ color:var(--muted); }
.mt-0{ margin-top:0; } .mb-0{ margin-bottom:0; }

/* --------------------------------------------------------------------------
   18. Mobile-first responsive scale-up
   -------------------------------------------------------------------------- */
@media (min-width:480px){
  .footer-widgets{ grid-template-columns:1fr 1fr; }
}

@media (min-width:768px){
  .navbar,.nav-inner{ flex-wrap:nowrap; }
  .page-header{ padding:72px 0 84px; }
  .card-grid{ grid-template-columns:1fr 1fr; }
  .footer-widgets{ grid-template-columns:1.4fr .6fr .9fr; }
  .entry-content{ font-size:17px; }
}

@media (min-width:1024px){
  .card-grid{ grid-template-columns:repeat(3,1fr); }
  .entry-content blockquote{ padding:34px 38px 26px; }
}

/* --------------------------------------------------------------------------
   19. Reduced motion & print
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    transition-duration:.01ms !important;
  }
}

@media print{
  .site-header,.utility-bar,.mobile-action,.pagination,.comments-area,.site-footer{ display:none; }
  body{ background:#fff; }
  .entry-content blockquote{ background:#fff; color:var(--ink); border:1px solid var(--line); }
  .entry-content blockquote p{ color:var(--ink); }
}




navbar-brand custom-logo-link {
 width:120px;height:auto;
}