/* Labib Modern - main.css */
:root{ color-scheme: dark; }

body.labib-modern{
  font-family: var(--lm-body-font);
  font-size: var(--lm-base-font-size);
  line-height: 1.75;
  background: radial-gradient(1200px 700px at 10% -10%, rgba(91,91,255,.22), transparent 60%),
              radial-gradient(900px 600px at 95% 10%, rgba(56,189,248,.18), transparent 55%),
              radial-gradient(900px 600px at 50% 120%, rgba(34,197,94,.10), transparent 55%),
              var(--lm-bg);
  color: var(--lm-text);
  margin: 0;
  min-height: 100vh;
}

.scheme-light{
  color-scheme: light;
  background: radial-gradient(1100px 650px at 10% -10%, rgba(91,91,255,.18), transparent 60%),
              radial-gradient(900px 600px at 95% 10%, rgba(56,189,248,.14), transparent 55%),
              radial-gradient(900px 600px at 50% 120%, rgba(34,197,94,.08), transparent 55%),
              var(--lm-bg);
}

a{ color: inherit; text-decoration: none; }
a:hover{ opacity: .92; }
img{ max-width: 100%; height: auto; border-radius: calc(var(--lm-radius) - 6px); }
.screen-reader-text{ position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden; }
.skip-link:focus{ left: 10px; top: 10px; width:auto; height:auto; padding:10px 14px; background: var(--lm-surface); border-radius: 10px; z-index:99999; }

.container{ width: min(1180px, calc(100% - 32px)); margin: 0 auto; }
.layout-boxed .container{ width: min(1040px, calc(100% - 32px)); }

.muted{ color: var(--lm-muted); }
.accent{ color: var(--lm-accent); }

.card{
  background: color-mix(in srgb, var(--lm-surface) 88%, transparent);
  border: 1px solid color-mix(in srgb, var(--lm-surface) 70%, rgba(255,255,255,.12));
  box-shadow: 0 18px 45px rgba(0,0,0,.18);
  border-radius: var(--lm-radius);
  backdrop-filter: blur(10px);
}
.pad{ padding: 22px; }

.button, button, input[type="submit"]{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border: 0;
  cursor:pointer;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--lm-accent);
  color: #fff;
  font-weight: 700;
  font-family: var(--lm-body-font);
  transition: transform .12s ease, opacity .12s ease;
}
.button:hover, button:hover, input[type="submit"]:hover{ transform: translateY(-1px); }
button:focus, a:focus, input:focus{ outline: 2px solid color-mix(in srgb, var(--lm-accent) 60%, transparent); outline-offset: 2px; }

.site-header{
  position: sticky;
  top: 0;
  z-index: 99;
  background: color-mix(in srgb, var(--lm-bg) 65%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid color-mix(in srgb, var(--lm-surface) 55%, rgba(255,255,255,.10));
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 16px;
  padding: 14px 0;
}
.brand{ display:flex; flex-direction:column; gap: 2px; }
.site-title{
  font-family: var(--lm-heading-font);
  font-weight: 900;
  font-size: 18px;
  letter-spacing: .3px;
}
.site-tagline{ font-size: 12px; opacity: .9; color: var(--lm-muted); }
.logo img{ max-height: 44px; width:auto; border-radius: 10px; }

.primary-nav ul{
  list-style:none;
  display:flex;
  align-items:center;
  gap: 10px;
  margin:0;
  padding:0;
}
.primary-nav a{
  padding: 8px 10px;
  border-radius: 12px;
  color: var(--lm-text);
  font-weight: 700;
}
.primary-nav a:hover{ background: color-mix(in srgb, var(--lm-surface) 62%, transparent); }
.primary-nav .current-menu-item > a,
.primary-nav .current_page_item > a{
  background: color-mix(in srgb, var(--lm-accent) 25%, transparent);
}

.nav-toggle{
  display:none;
  background: color-mix(in srgb, var(--lm-surface) 70%, transparent);
  color: var(--lm-text);
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--lm-surface) 55%, rgba(255,255,255,.12));
}
.nav-toggle-lines{
  width: 22px; height: 2px;
  background: var(--lm-text);
  display:block;
  position: relative;
  border-radius: 2px;
}
.nav-toggle-lines:before,
.nav-toggle-lines:after{
  content:'';
  position:absolute;
  left:0;
  width: 22px; height: 2px;
  background: var(--lm-text);
  border-radius: 2px;
}
.nav-toggle-lines:before{ top: -7px; }
.nav-toggle-lines:after{ top: 7px; }

.site-content{ padding: 22px 0 46px; }

.main-grid{
  display:grid;
  grid-template-columns: 1fr 320px;
  gap: 18px;
  align-items:start;
}
@media (max-width: 980px){
  .main-grid{ grid-template-columns: 1fr; }
  .sidebar{ order: 2; }
}

.posts-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 680px){
  .posts-grid{ grid-template-columns: 1fr; }
}

.post-card{ overflow:hidden; }
.post-card-link{ display:block; }
.post-card-media img{ width: 100%; height: 210px; object-fit: cover; border-radius: 0; }
@media (max-width: 680px){ .post-card-media img{ height: 190px; } }
.post-card-body{ padding: 16px; }
.post-card-title{
  margin: 8px 0 8px;
  font-family: var(--lm-heading-font);
  font-size: 18px;
  line-height: 1.4;
}
.post-card-meta{ font-size: 12px; display:flex; align-items:center; gap: 8px; }
.dot{ opacity: .55; }
.post-card-excerpt{ font-size: 13px; }

.entry-title, .page-title, h1,h2,h3,h4{ font-family: var(--lm-heading-font); }
.entry-title{ margin: 8px 0 8px; font-size: 28px; line-height: 1.25; }
.page-title{ margin: 0 0 6px; font-size: 26px; line-height: 1.25; }
@media (max-width: 680px){ .entry-title{ font-size: 24px; } .page-title{ font-size: 22px; } }

.featured-media{ margin-top: 14px; }
.featured-media img{ width:100%; height:auto; }

.entry-content a{ color: var(--lm-accent); text-decoration: underline; text-underline-offset: 4px; }
.entry-content pre{
  overflow:auto;
  padding: 14px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--lm-bg) 70%, #000 30%);
}

.pagination{ margin-top: 18px; display:flex; justify-content:center; }
.page-numbers{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 12px;
  border-radius: 12px;
  margin: 0 4px;
  background: color-mix(in srgb, var(--lm-surface) 55%, transparent);
  border: 1px solid color-mix(in srgb, var(--lm-surface) 55%, rgba(255,255,255,.12));
}
.page-numbers.current{
  background: color-mix(in srgb, var(--lm-accent) 28%, transparent);
  border-color: color-mix(in srgb, var(--lm-accent) 35%, rgba(255,255,255,.12));
}

.sidebar .widget{ margin-bottom: 14px; }
.widget-title{ margin: 0 0 10px; font-size: 16px; }

.search-form{ display:flex; gap: 10px; margin-top: 10px; }
.search-field{
  flex:1;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--lm-surface) 55%, rgba(255,255,255,.12));
  background: color-mix(in srgb, var(--lm-surface) 60%, transparent);
  color: var(--lm-text);
}
.search-field::placeholder{ color: color-mix(in srgb, var(--lm-muted) 80%, transparent); }

.site-footer{
  padding: 24px 0 40px;
  border-top: 1px solid color-mix(in srgb, var(--lm-surface) 55%, rgba(255,255,255,.10));
}
.footer-inner{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.footer-brand{ font-weight: 900; font-family: var(--lm-heading-font); }
.footer-meta{ font-size: 12px; color: var(--lm-muted); margin-top: 4px; }
.footer-nav ul{ list-style:none; display:flex; gap: 10px; margin:0; padding:0; }
.footer-nav a{ padding: 8px 10px; border-radius: 12px; background: color-mix(in srgb, var(--lm-surface) 45%, transparent); }

.nav-post .nav-links{ display:grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.nav-post .nav-previous, .nav-post .nav-next{
  background: color-mix(in srgb, var(--lm-surface) 55%, transparent);
  border-radius: 14px;
  padding: 12px;
}
.nav-post .nav-next{ text-align: end; }
.nav-post .nav-title{ display:block; margin-top: 6px; font-weight: 800; }

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea{
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--lm-surface) 55%, rgba(255,255,255,.12));
  background: color-mix(in srgb, var(--lm-surface) 60%, transparent);
  color: var(--lm-text);
}
.comment-form textarea{ min-height: 110px; }

/* Mobile nav */
@media (max-width: 980px){
  .nav-toggle{ display:inline-flex; }
  .primary-nav{ display:none; position:absolute; left: 0; right: 0; top: 64px; padding: 12px 16px; }
  .primary-nav.is-open{ display:block; }
  .primary-nav ul{ flex-direction:column; align-items:stretch; gap: 6px; }
  .primary-nav a{ background: color-mix(in srgb, var(--lm-surface) 58%, transparent); }
}

/* WooCommerce basics */
.woocommerce .products ul, .woocommerce ul.products{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 980px){
  .woocommerce .products ul, .woocommerce ul.products{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px){
  .woocommerce .products ul, .woocommerce ul.products{ grid-template-columns: 1fr; }
}
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product{
  background: color-mix(in srgb, var(--lm-surface) 55%, transparent);
  border: 1px solid color-mix(in srgb, var(--lm-surface) 55%, rgba(255,255,255,.12));
  border-radius: var(--lm-radius);
  padding: 14px;
  box-shadow: 0 18px 45px rgba(0,0,0,.14);
}