/*
Theme Name: DO Guides Light
Theme URI: https://dropletdrift.com/
Author: Alex Ivanovs
Description: A crisp, developer-friendly LIGHT theme for how-to guides. Minimal, fast, readable. Sidebar + related posts + author box + comments.
Version: 1.0.0
License: GPL-2.0-or-later
Text Domain: do-guides-light
*/

:root{
  --font-sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --bg: #f6f8fb;
  --bg-alt: #ffffff;
  --card: #ffffff;
  --border: #e5e8ef;
  --text: #0b1220;
  --muted: #5b6475;
  --accent: #0ea5e9;
  --accent-2: #0069ff;
  --maxw: 1300px;
  --content-w: 860px;
  --sidebar-w: 320px;
  --radius: 14px;
  --gap: 32px;
  --line: 1.7;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background: linear-gradient(180deg, var(--bg) 0%, #eef2f9 100%);
  color:var(--text);
  font-family:var(--font-sans);
  line-height:var(--line);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

a{color:var(--accent); text-decoration:none}
a:hover{color:var(--accent-2); text-decoration:underline}

.container{ max-width:var(--maxw); margin:0 auto; padding:24px; }

.site-header{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(180%) blur(8px);
  background:#101e3a;
  border-bottom:1px solid var(--border);
}
.site-header .inner{ display:flex; align-items:center; gap:16px; max-width:var(--maxw); margin:0 auto; padding:14px 24px; }
.brand{ display:flex; align-items:center; gap:12px; font-weight:700; letter-spacing:.2px; }
.brand .logo{ width:36px; height:36px; display:grid; place-items:center; background:linear-gradient(160deg, var(--accent-2), #1e40af); color:white; font-family:var(--font-mono); border-radius:10px; box-shadow:0 6px 16px rgba(14,165,233,.25); }
.brand a{ color:#fff; text-decoration:none }

.primary-nav{ margin-left:auto }
.primary-nav ul{ list-style:none; display:flex; gap:16px; padding:0; margin:0 }
.primary-nav a{ display:inline-block; padding:8px 10px; border-radius:8px }
.primary-nav a:hover{ background:rgba(0,0,0,.04) }

.layout{ display:grid; grid-template-columns: minmax(0, 1fr) minmax(280px, var(--sidebar-w)); gap:var(--gap); align-items:start; }
.content{ max-width:var(--content-w); }
.sidebar{
  position:sticky; top:84px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:18px;
}

.site-footer{ margin-top:40px; border-top:1px solid var(--border); color:var(--muted); }
.site-footer .inner{ padding:24px }

h1,h2,h3,h4{ line-height:1.25; margin:1.2em 0 .6em }
h1{ font-size:clamp(28px, 4vw, 36px) }
h2{ font-size:clamp(22px, 3vw, 28px) }

.post-meta{ color:var(--muted); font-size:14px }
.post-tags{ margin-top:16px }
.post-tags a{ display:inline-block; margin:0 8px 8px 0; padding:6px 10px; border:1px solid var(--border); border-radius:999px; color:var(--muted) }
.post-tags a:hover{ color:var(--text); border-color:var(--accent) }

.post-card{ background:var(--card); border-radius:var(--radius); padding:18px; }
ul.post-list-titles{ list-style:none; padding:0; margin:0 }
ul.post-list-titles li{ padding:8px 0; border-bottom:1px dashed var(--border) }
ul.post-list-titles li a{ font-weight:600 }

.pagination{ display:flex; gap:12px; margin-top:24px }
.pagination a{ padding:8px 12px; border:1px solid var(--border); border-radius:10px }

.wp-block-image img, img{ max-width:100%; height:auto; border-radius:10px }

pre, code, kbd, samp{ font-family:var(--font-mono) }
pre{
  background:#f0f3fa;
  border:1px solid #e2e7f2;
  padding:16px;
  overflow:auto;
  border-radius:12px;
}
code{
  background:#f0f3fa;
  border:1px solid #e2e7f2;
  padding:.15em .4em;
  border-radius:8px;
  overflow-wrap:anywhere;
  word-break:break-word;
}

table{ width:100%; border-collapse:separate; border-spacing:0; overflow:auto; display:block; border:1px solid var(--border); border-radius:12px; }
thead{ background:#f3f6fb; position:sticky; top:0 }
th,td{ padding:12px 14px; border-bottom:1px solid var(--border); text-align:left; vertical-align:top }

.widget{ margin-bottom:18px }
.widget-title{ font-size:14px; text-transform:uppercase; letter-spacing:.12em; color:var(--muted); margin-bottom:8px }

.search-form{ display:flex; gap:10px }
.search-form input[type="search"]{ flex:1; padding:10px 12px; border-radius:10px; border:1px solid var(--border); background:#f6f9ff; color:var(--text) }
.search-form input[type="submit"]{ padding:10px 12px; border-radius:10px; border:1px solid var(--border); background:transparent; color:var(--text); cursor:pointer }

/* Author box */
.author-box{ display:flex; gap:16px; align-items:flex-start; background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:16px; margin:24px 0; }
.author-box .avatar{ border-radius:50% }
.author-box .name{ font-weight:700 }
.author-box .bio{ color:var(--muted); margin-top:6px }

/* Comments */
.comments-area{ margin-top:28px; background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:18px; }
.comment-list{ list-style:none; padding:0; margin:0 }
.comment-list .comment{ border-bottom:1px solid var(--border); padding:14px 0 }
.comment-list .comment:last-child{ border-bottom:none }
.comment-respond input, .comment-respond textarea{ width:100%; padding:10px 12px; border-radius:10px; border:1px solid var(--border); background:#f6f9ff; color:var(--text); margin-top:6px; }
.comment-respond input[type="submit"]{ width:auto; cursor:pointer; background:transparent; }
.comment-respond .comment-form-cookies-consent{ display:flex; align-items:center; gap:10px; margin-top:10px; }
.comment-respond .comment-form-cookies-consent input[type="checkbox"]{ width:16px; height:16px; margin:0; }
.comment-respond .comment-form-cookies-consent label{ margin:0; line-height:1.3; color:var(--muted); }
.comment-respond .form-submit{ margin-top:14px }

/* Post header thumbnail */
.post-header{ display:flex; align-items:flex-start; gap:16px; margin-bottom:20px; }
.post-header .post-thumb img{ width:120px; height:80px; object-fit:contain; border-radius:10px; display:block; margin:0 !important; float:none !important; }
.post-header .post-header-text{ flex:1 1 auto; min-width:0; }
.post-header .entry-title{ margin:0 0 6px }

/* Content lists */
.entry-content ul, .entry-content ol{ padding-left:1.25em; margin:.5em 0 1em; }
.entry-content ul{ list-style:disc outside; }
.entry-content ol{ list-style:decimal outside; }
.entry-content li{ margin:.25em 0; }
.entry-content li > ul, .entry-content li > ol{ margin-top:.25em; }

/* Mobile friendliness */
.entry-content, .post-card, .content{ overflow-wrap:anywhere; word-break:normal; }
pre{ white-space:pre; overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%; }
pre code{ white-space:normal; display:inline-block; min-width:100%; }
@media (max-width: 980px){ .layout{ grid-template-columns: 1fr } .content{ max-width:100% } .sidebar{ position:static } }
@media (max-width:600px){ .container{ padding:16px; } .sidebar{ padding:14px; } .post-header .post-thumb img{ width:64px; height:64px; } }

/* --- Primary nav: dropdowns (desktop) --- */
.primary-nav .menu { display:flex; gap:16px; padding:0; margin:0; list-style:none; }
.primary-nav .menu > li { position:relative; }
.primary-nav .menu > li > a { display:inline-block; padding:8px 10px; border-radius:8px; }
.primary-nav .menu > li:hover > a { background:rgba(0,0,0,.04); }
.primary-nav .sub-menu{
  display:none;
  position:absolute;
  left:0; top:100%;
  min-width:220px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:12px;
  padding:8px 0;
  box-shadow:0 12px 28px rgba(0,0,0,.12);
  z-index:1000;
}
.primary-nav .sub-menu li { position:relative; }
.primary-nav .sub-menu a{ display:block; padding:8px 12px; white-space:nowrap; }
.primary-nav .menu > li:hover > .sub-menu,
.primary-nav .menu > li:focus-within > .sub-menu{ display:block; }
.primary-nav .sub-menu .sub-menu{ left:100%; top:0; }

/* Make header a positioning context */
.site-header .inner{ position:relative; }

/* Hamburger: visible on desktop and mobile, pinned right */
.menu-toggle{
  display:inline-block;
  position:absolute;
  right:24px;
  top:14px;
  border:1px solid var(--border);
  padding:8px 10px;
  border-radius:8px;
  cursor:pointer;
  z-index:1100;
}

/* Overlay panel (all sizes) */
.primary-nav{ position:relative; }
.primary-nav .menu{
  display:none;
  position:absolute;
  right:0;
  top:calc(100% + 10px);
  flex-direction:column;
  gap:0;
  min-width:260px;
  max-height:70vh;
  overflow:auto;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px;
  box-shadow:0 12px 28px rgba(0,0,0,.12);
  z-index:1000;
}
.primary-nav.is-open .menu{ display:flex; }

/* Kill hover dropdowns everywhere (we’re toggle-only now) */
.primary-nav .sub-menu{ display:none !important; position:static; border:none; padding:6px 0 6px 10px; margin-left:8px; border-left:2px solid var(--border); box-shadow:none; }
.primary-nav .menu > li:hover > .sub-menu,
.primary-nav .menu > li:focus-within > .sub-menu{ display:none !important; }

/* Show a submenu only when its parent is toggled */
.primary-nav .menu li.is-subopen > .sub-menu{ display:block !important; }

/* Parent disclosure button */
.primary-nav .submenu-toggle{
  margin-left:8px;
  background:transparent;
  border:0;
  cursor:pointer;
  font-size:14px;
  line-height:1;
  padding:4px;
  border-radius:6px;
}

/* Top-level items look tidy inside panel */
.primary-nav .menu > li > a{ display:block; padding:8px 10px; border-radius:8px; }
.primary-nav .menu > li > a:hover{ background:rgba(0,0,0,.04); }





/* style.css — add these styles */
.pagination-numeric{ margin-top:24px }
.pagination-numeric .page-numbers{
  display:flex; gap:8px; flex-wrap:wrap;
  list-style:none; padding:0; margin:0;
}
.pagination-numeric .page-numbers li{ list-style:none }
.pagination-numeric .page-numbers a,
.pagination-numeric .page-numbers span{
  display:inline-block;
  padding:8px 12px;
  border:1px solid var(--border);
  border-radius:10px;
  text-decoration:none;
}
.pagination-numeric .page-numbers a:hover{
  border-color:var(--accent);
}
.pagination-numeric .page-numbers .current{
  border-color:var(--accent);
  background:var(--card);
  color:var(--text);
  font-weight:600;
}


/* style.css — APPEND these styles for compact rows with tiny thumbnails + right-aligned, subtle date */
.post-row-link{
  display:flex; align-items:center; gap:12px;
  padding:8px 0;
  text-decoration:none; color:inherit;
}
.post-row-link:hover .title{ text-decoration:underline; }

.post-row-link .thumb{
  width:36px; height:36px; flex:0 0 36px;
  border-radius:8px; overflow:hidden;
  background:rgba(0,0,0,.04);
  display:inline-block;
}
.post-row-link .thumb img{
  width:100%; height:100%; object-fit:contain; display:block;
}
.post-row-link .thumb.placeholder{ background:rgba(14,165,233,.12); }

.post-row-link .title{
  flex:1 1 auto; min-width:0;
  font-weight:600;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

.post-row-link .date{
  flex:0 0 auto; margin-left:12px;
  color:#9a9da3; font-size:12px;
  white-space:nowrap;
}