/* style.css — square corners & increased inner spacing for newsletter, follow, donate
   Updated: login button default (and all states) keeps blue background; label and icon are white
   and do not change color on hover/focus/active/visited. */

/* Type tokens */
:root{
  --max-width:980px;
  --sidebar-width:250px;
  --accent:#efefef;
  --muted:#6f6f6f;
  --panel-bg:#fff;
  --panel-border:#e0e0e0;
  --brand:#111827;
  --accent-2:#f7f7f7;
  --shadow: 0 1px 0 rgba(0,0,0,0.04);

  /* base scale */
  --base-font-size:13px;       /* text slightly smaller as requested */
  --small-font-size:12px;
  --nav-font-size:13px;
  --heading-scale:1.15;
  --brand-size:18px;

  /* login button colors */
  --login-bg: #2b79c7;
  --login-border: #266bb0;
  --login-bg-hover: var(--login-bg);
  --login-text: #ffffff;
}

/* Make everything square by default */
* { box-sizing: border-box; border-radius: 0 !important; }

/* Basic */
html { font-size: var(--base-font-size); }
body{
  background:#efefef;
  margin:0;
  color:#222;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-weight:400;
  font-size:1rem;
}

/* wrapper */
.page-wrap{max-width:var(--max-width);margin:18px auto;background:#fff;border:1px solid var(--panel-border);box-shadow:var(--shadow)}
.site-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 16px;
  border-bottom:1px solid var(--panel-border);
  background:linear-gradient(#fff,#fbfbfb);
}

/* brand */
.brand{display:flex;align-items:center;gap:10px}
.brand-logo{height:36px;width:auto;display:block}
.brand-name{
  font-family: 'Poppins', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  font-weight:600;
  color:var(--brand);
  font-size:var(--brand-size);
  letter-spacing:0.2px;
}

/* NAV */
.main-nav{
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  justify-content:space-between;
}
.main-nav .nav-left{
  margin:0;padding:0;list-style:none;display:flex;gap:8px;align-items:center;
}
.main-nav a{color:var(--muted);text-decoration:none;padding:6px 8px;display:inline-flex;gap:8px;align-items:center;font-size:var(--nav-font-size)}
.main-nav a:hover{color:#111;background:transparent}
.nav-left li{position:relative;}

/* Dropdown base */
.drop-toggle{
  background:transparent;border:0;padding:6px 8px;cursor:pointer;color:var(--muted);
  display:inline-flex;align-items:center;gap:8px;font-size:var(--nav-font-size);
}
.drop-toggle:hover{color:#111}
.caret{margin-left:6px;font-size:11px}

/* Dropdown menu */
.dropdown-menu{
  display:none;
  position:absolute;
  top:100%;
  left:0;
  min-width:190px;
  background:#fff;
  border:1px solid var(--panel-border);
  box-shadow:0 8px 24px rgba(0,0,0,0.08);
  z-index:20;
  padding:6px 0;
  margin-top:8px;
}
.dropdown-menu li{list-style:none}
.dropdown-menu li a{
  display:block;padding:8px 14px;color:#333;text-decoration:none;font-size:calc(var(--base-font-size));
}
.dropdown-menu li a:hover{background:#f6f7f9}

/* show state */
.dropdown[aria-expanded="true"] .dropdown-menu{display:block}

/* nav-right (login button) */
.nav-right{display:flex;align-items:center;gap:8px;margin-left:auto}
.btn{background:#fff;border:1px solid #cfcfcf;padding:7px 10px;cursor:pointer;font-size:var(--small-font-size)}
.btn.small{padding:6px 8px;font-size:var(--small-font-size)}

/* Login button — ensure text and icon are white in ALL states and background stays blue */
.login-btn,
.login-btn:link,
.login-btn:visited,
.login-btn:active,
.login-btn:focus {
  background: var(--login-bg) !important;      /* blue background in default state */
  border: 1px solid var(--login-border) !important;
  color: var(--login-text) !important;         /* text white by default */
  padding:7px 12px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:600;
  text-decoration:none;
  outline: none;
  transition: none;
}

/* Force Font Awesome icon to inherit white and not change */
.login-btn .fa,
.login-btn:link .fa,
.login-btn:visited .fa,
.login-btn:active .fa,
.login-btn:focus .fa {
  color: var(--login-text) !important;
  transition: none !important;
}

/* Prevent any hover/focus/active rules elsewhere from changing color or background:
   keep same blue background and white text/icon on hover/focus/active. */
.login-btn:hover,
.login-btn:focus,
.login-btn:active,
.login-btn:link:hover,
.login-btn:visited:hover,
.login-btn:link:focus,
.login-btn:visited:focus {
  background: var(--login-bg-hover) !important; /* same blue */
  color: var(--login-text) !important;
  border-color: var(--login-border) !important;
}
.login-btn:hover .fa,
.login-btn:focus .fa,
.login-btn:active .fa {
  color: var(--login-text) !important;
}

/* hero */
.hero{
  height:220px;
  margin:16px;
  border:1px solid var(--panel-border);
  background-image: url('data:image/svg+xml;utf8,\
  <svg xmlns="http://www.w3.org/2000/svg" width="1200" height="500">\
    <defs>\
      <linearGradient id="g" x1="0" x2="1">\
        <stop offset="0" stop-color="%23222" stop-opacity="0.05"/>\
        <stop offset="1" stop-color="%23e0e0e0" stop-opacity="0.06"/>\
      </linearGradient>\
    </defs>\
    <rect width="100%" height="100%" fill="%23111"/>\
    <g fill="%23ffd54f" font-family="monospace" font-size="36" opacity="0.7">\
      <text x="20" y="60">var example = &quot;code&quot;;</text>\
      <text x="20" y="110" fill="%23ffffff" opacity="0.6">function render() {</text>\
      <text x="20" y="160" fill="%23ffd54f" opacity="0.6">  return &quot;inet&quot;;</text>\
      <text x="20" y="210" fill="%23cbe4ff\" opacity="0.6">}</text>\
    </g>\
    <rect width="100%" height="100%" fill="url(%23g)" opacity="0.6"/>\
  </svg>');
  background-size:cover;
  background-position:center;
  filter: blur(1px) brightness(1.02);
}

/* grid */
.container{padding:0 16px 24px}
.content-grid{
  display:grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  gap:16px;
  padding:0 16px 24px;
}

/* panels */
.panel{
  background:var(--panel-bg);
  border:1px solid var(--panel-border);
  margin-bottom:10px;
  box-shadow:var(--shadow);
}
.panel-title{
  margin:0;padding:8px 10px;background:var(--accent-2);border-bottom:1px solid var(--panel-border);font-size:13px;font-weight:600;
}
.panel .panel-body{padding:10px}

/* Increased inner spacing for specific sidebar panels:
   Newsletter, Follow, Donate. The selector targets everything inside
   a panel except the .panel-title so the title spacing is unchanged. */
.panel.newsletter > *:not(.panel-title),
.panel.follow > *:not(.panel-title),
.panel.donate > *:not(.panel-title) {
  padding:12px 14px;    /* increased inset for content */
}

/* tweak specific elements inside those panels */
.panel.newsletter input[type="email"],
.panel.newsletter .btn {
  display:block;
  width:100%;
}
.panel.follow .follow-content,
.panel.donate .donate-content {
  display:flex;
  flex-direction:column;
  gap:8px;
}

/* sidebar specifics */
.sidebar .stat-list{list-style:none;margin:0;padding:6px 10px}
.stat-list li{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px dashed #eee;color:var(--muted);font-size:13px}
.stat-list li:last-child{border-bottom:0}

/* newsletter */
.newsletter input[type="email"]{width:100%;padding:7px;margin:6px 0;border:1px solid #ccc;font-size:13px}

/* main column */
.main-col .post{margin-bottom:12px}
.panel-head{padding:8px 10px;border-bottom:1px solid var(--panel-border);background:var(--accent-2)}
.post-title{margin:0;font-size:15px;font-weight:600}
.panel-body .lead{font-size:13px;margin-bottom:10px;color:#333}
.subpanel{border-top:1px solid #eee;padding:8px 0}
.subpanel-title{margin:0 0 6px 0;font-size:13px;background:transparent;padding:0;font-weight:600}

.meta{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);margin-top:8px}
.meta time{color:var(--muted)}
.meta .likes strong{color:#222}

/* footer */
.site-footer{border-top:1px solid #e6e6e6;padding:10px 16px;background:#fafafa}
.container-inner{max-width:var(--max-width);margin:0 auto;padding:0}

/* utility */
.muted{color:var(--muted);font-size:13px}
.visually-hidden{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}

/* responsive */
@media (max-width:860px){
  .content-grid{grid-template-columns:1fr; padding:0 12px 18px}
  .sidebar{order:2}
  .main-col{order:1}
  .hero{height:160px}

  .main-nav{flex-direction:column;align-items:stretch;gap:8px}
  .nav-left{flex-wrap:wrap}
  .nav-right{margin-left:0;justify-content:flex-end}
  .dropdown-menu{position:relative;top:0;left:0;margin-top:0;box-shadow:none}
  .brand-name{display:inline-block}
  .brand-logo{height:34px}

  /* ensure the increased padding still looks good on mobile */
  .panel.newsletter > *:not(.panel-title),
  .panel.follow > *:not(.panel-title),
  .panel.donate > *:not(.panel-title) {
    padding:10px 12px;
  }
}