/*
Theme Name: m247 Flex
Version: 1.2.8
Text Domain: m247-flex
*/

:root{
  --m247-container: 1200px;
  --m247-gap: 24px;
  --m247-radius: 16px;
  --m247-text: #111827;
  --m247-muted: #6b7280;
  --m247-bg: #ffffff;
  --m247-accent: #2563eb;
  --m247-link: var(--m247-accent);
  --m247-link-hover: #1e40af;

  /* Breadcrumb vars */
  --m247-bc-font: 14px;
  --m247-bc-bg: #f3f4f6;
  --m247-bc-text: #111827;
  --m247-bc-radius: 8px;
  --m247-bc-pad-y: 2px;
  --m247-bc-pad-x: 10px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; color:var(--m247-text); background:var(--m247-bg);
  font:16px/1.65 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";}

a{color:var(--m247-link); text-decoration-color: color-mix(in oklab, var(--m247-link) 60%, transparent);}
a:hover{color:var(--m247-link-hover);}

.container{max-width:var(--m247-container); margin-inline:auto; padding:0 16px;}
.site-header{position:sticky; top:0; background:#fff; border-bottom:1px solid #eee; z-index:50; margin-bottom:8px;}
.site-branding{display:flex; align-items:center; gap:12px; padding:6px 0}
.site-title{font-size:20px; font-weight:700; margin:0; text-decoration:none; color:inherit}
.site-description{font-size:13px; color:var(--m247-muted); margin:0}

.nav-primary{display:flex; gap:10px; flex-wrap:wrap; padding:6px 0 10px}
.nav-primary a{display:inline-block; padding:6px 10px; border-radius:10px; text-decoration:none; color:#333}
.nav-primary a:hover,.nav-primary .current-menu-item>a{background:#f3f4f6}

.hero{padding:24px 0 12px; background:linear-gradient(180deg,#f8fafc,#fff); border-bottom:1px solid #eef2f7}
.hero .title{font-size:clamp(24px,3vw,36px); margin:0 0 6px}
.hero .sub{color:var(--m247-muted); margin:0}

.main{padding:16px 0; display:grid; grid-template-columns:1fr; gap:var(--m247-gap)}
@media(min-width: 960px){ .main{grid-template-columns:3fr 1fr} }

.card{background:#fff; border:1px solid #eee; border-radius:var(--m247-radius); padding:16px;
  box-shadow:0 1px 2px rgba(0,0,0,.04);}
.card img{border-radius:12px}

/* Sidebar widget look */
.widget-title{font-size:18px; margin:0 0 8px}
.widget{margin-bottom:16px}
.sidebar .widget{background:#fff; border:1px solid #eee; border-radius:var(--m247-radius); padding:16px}

/* Footer */
.site-footer{border-top:1px solid #eee; padding:20px 0; color:var(--m247-muted); font-size:14px}

/* Gutenberg block search & theme search form */
.search-form{display:grid; grid-template-columns:1fr auto; gap:8px; align-items:center; margin:0}
.search-form .search-field,
.search-form input[type="search"]{width:100%; padding:6px 10px; font-size:14px; line-height:1.4; border:1px solid #d1d5db; border-radius:6px}
.search-form button,
.search-form input[type="submit"]{padding:6px 14px; font-size:14px; line-height:1.4; border:none; border-radius:6px; background:var(--m247-accent); color:#fff; cursor:pointer}

.screen-reader-text{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0}

.wp-block-search{display:grid; grid-template-columns:1fr auto; gap:8px; align-items:center}
.wp-block-search__input{padding:6px 10px; font-size:14px; line-height:1.4; border:1px solid #d1d5db; border-radius:6px}
.wp-block-search__button{padding:6px 14px; font-size:14px; line-height:1.4; border:none; border-radius:6px; background:var(--m247-accent); color:#fff; cursor:pointer}

/* Breadcrumbs – remove bullets; style pills */
.breadcrumb, .breadcrumbs, .breadcrumb-trail, .yoast-breadcrumbs, .rank-math-breadcrumb,
.aioseo-breadcrumbs, .woocommerce-breadcrumb, .site-breadcrumb, .page-breadcrumb, .entry-breadcrumbs, nav[aria-label*="breadcrumb" i]{
  font-size: var(--m247-bc-font); color: var(--m247-muted);
}
.breadcrumb ul, .breadcrumb ol, .breadcrumbs ul, .breadcrumbs ol,
.breadcrumb-trail ul, .breadcrumb-trail ol, .yoast-breadcrumbs ul, .yoast-breadcrumbs ol,
.rank-math-breadcrumb ul, .rank-math-breadcrumb ol, .aioseo-breadcrumbs ul, .aioseo-breadcrumbs ol,
.woocommerce-breadcrumb ul, .woocommerce-breadcrumb ol, .site-breadcrumb ul, .site-breadcrumb ol,
.page-breadcrumb ul, .page-breadcrumb ol, .entry-breadcrumbs ul, .entry-breadcrumbs ol,
nav[aria-label*="breadcrumb" i] ul, nav[aria-label*="breadcrumb" i] ol{
  list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px;
}
.breadcrumb li::marker,.breadcrumbs li::marker,.breadcrumb-trail li::marker,.yoast-breadcrumbs li::marker,
.rank-math-breadcrumb li::marker,.aioseo-breadcrumbs li::marker,.woocommerce-breadcrumb li::marker{content:""}
.breadcrumb a, .breadcrumbs a, .breadcrumb-trail a, .yoast-breadcrumbs a, .rank-math-breadcrumb a,
.aioseo-breadcrumbs a, .woocommerce-breadcrumb a, .site-breadcrumb a, .page-breadcrumb a, .entry-breadcrumbs a,
nav[aria-label*="breadcrumb" i] a, .breadcrumb span{
  text-decoration:none; background:var(--m247-bc-bg); color:var(--m247-bc-text);
  padding:var(--m247-bc-pad-y) var(--m247-bc-pad-x); border-radius:var(--m247-bc-radius);
}

/* m247 1.2.8: hide Search block label by default & prevent button wrap */
.wp-block-search__label{display:none}
.wp-block-search__button{white-space:nowrap}