/*
Theme Name: Disbusinessfied
Theme URI: https://disbusinessgif.blog/
Author: Disbusinessfied
Author URI: https://disbusinessgif.blog/
Description: Disbusinessfied is a clean, fast, professional blogging theme built for disbusinessgif.blog. Designed for technology news, reviews, how-to guides, cybersecurity coverage, and startup analysis, it ships with full page templates, custom blog categories, widget areas, and a responsive mobile-first layout. No page builder required — install, activate, and publish.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: disbusinessfied
Tags: blog, news, two-columns, custom-menu, custom-logo, featured-images, threaded-comments, translation-ready, technology

Disbusinessfied WordPress Theme, Copyright 2026 Disbusinessfied
Disbusinessfied is distributed under the terms of the GNU General Public License v2 or later.
*/

/* =========================================================
   0. CSS VARIABLES
========================================================= */
:root{
  --db-bg: #0b0e14;
  --db-bg-alt: #11151f;
  --db-surface: #161b26;
  --db-surface-2: #1c2331;
  --db-border: #262e3f;
  --db-text: #e7eaf2;
  --db-text-muted: #9aa3b5;
  --db-accent: #4fd1c5;
  --db-accent-2: #8b7cf6;
  --db-accent-3: #ff7a59;
  --db-link: #6fe3d6;
  --db-max-width: 1200px;
  --db-radius: 10px;
  --db-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --db-font-head: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* =========================================================
   1. RESET / BASE
========================================================= */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--db-bg);
  color: var(--db-text);
  font-family: var(--db-font-body);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; height:auto; display:block; border-radius: var(--db-radius); }
a{ color: var(--db-link); text-decoration:none; transition: color .15s ease; }
a:hover{ color: var(--db-accent-3); }
h1,h2,h3,h4,h5,h6{ font-family: var(--db-font-head); line-height:1.25; font-weight:700; color:#fff; margin: 0 0 .5em; }
h1{ font-size: 2.4rem; }
h2{ font-size: 1.85rem; }
h3{ font-size: 1.4rem; }
p{ margin: 0 0 1.2em; }
ul,ol{ padding-left: 1.4em; }
blockquote{
  margin: 1.5em 0;
  padding: .8em 1.4em;
  border-left: 4px solid var(--db-accent);
  background: var(--db-surface);
  border-radius: 0 var(--db-radius) var(--db-radius) 0;
  color: var(--db-text-muted);
  font-style: italic;
}
code, pre{ background: var(--db-surface-2); border-radius:6px; }
code{ padding:.15em .4em; font-size:.9em; }
pre{ padding:1em; overflow-x:auto; border:1px solid var(--db-border); }
hr{ border:none; border-top:1px solid var(--db-border); margin: 2em 0; }
table{ width:100%; border-collapse: collapse; margin: 1.5em 0; }
table th, table td{ border:1px solid var(--db-border); padding:.6em .8em; text-align:left; }
.screen-reader-text{
  position:absolute !important; clip: rect(1px,1px,1px,1px); width:1px; height:1px; overflow:hidden;
}
.skip-link{
  position:absolute; left:-9999px; top:0; background:var(--db-accent); color:#0b0e14; padding:12px 18px; z-index:9999; font-weight:700; border-radius:0 0 8px 0;
}
.skip-link:focus{ left:0; }

/* =========================================================
   2. LAYOUT
========================================================= */
.db-container{
  max-width: var(--db-max-width);
  margin: 0 auto;
  padding: 0 24px;
}
.db-site{ display:flex; flex-direction:column; min-height:100vh; }
.db-main{ flex:1 0 auto; padding: 40px 0 60px; }
.db-layout{ display:grid; grid-template-columns: 1fr 320px; gap: 48px; align-items:start; }
@media (max-width: 900px){
  .db-layout{ grid-template-columns: 1fr; }
}

/* =========================================================
   3. HEADER
========================================================= */
.db-header{
  background: var(--db-bg-alt);
  border-bottom: 1px solid var(--db-border);
  position: sticky; top:0; z-index: 500;
}
.db-topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding: 16px 0;
  gap: 20px;
}
.db-logo{ display:flex; align-items:center; gap:10px; font-size:1.5rem; font-weight:800; color:#fff; letter-spacing:-.5px; }
.db-logo img{ max-height:44px; width:auto; border-radius:6px; }
.db-logo span.db-logo-accent{ color: var(--db-accent); }
.db-logo:hover{ color:#fff; }

.db-primary-nav{ display:flex; }
.db-primary-nav ul{ list-style:none; margin:0; padding:0; display:flex; gap: 6px; }
.db-primary-nav li{ position:relative; }
.db-primary-nav a{
  display:block; padding: 10px 14px; color: var(--db-text); font-weight:600; font-size:.95rem; border-radius:8px;
}
.db-primary-nav a:hover, .db-primary-nav .current-menu-item > a{
  color: var(--db-accent); background: var(--db-surface);
}
.db-primary-nav ul ul{
  display:none; position:absolute; left:0; top:100%; min-width:220px; background: var(--db-surface); border:1px solid var(--db-border); border-radius:8px; padding:6px; flex-direction:column; box-shadow: 0 12px 24px rgba(0,0,0,.35);
}
.db-primary-nav li:hover > ul{ display:flex; }
.db-primary-nav ul ul a{ padding:8px 10px; }

.db-header-actions{ display:flex; align-items:center; gap:10px; }
.db-search-toggle, .db-menu-toggle{
  background: var(--db-surface); border:1px solid var(--db-border); color: var(--db-text);
  width:40px; height:40px; border-radius:8px; cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.db-search-toggle:hover, .db-menu-toggle:hover{ border-color: var(--db-accent); color: var(--db-accent); }
.db-menu-toggle{ display:none; }
.db-header-search{
  max-width: var(--db-max-width); margin: 0 auto; padding: 0 24px; overflow:hidden; max-height:0; transition: max-height .2s ease;
}
.db-header-search.is-open{ max-height:80px; padding-bottom:16px; }

@media (max-width: 900px){
  .db-primary-nav{
    display:none; position:absolute; left:0; right:0; top:100%; background: var(--db-bg-alt); border-bottom:1px solid var(--db-border); padding: 10px 24px 20px;
  }
  .db-primary-nav.is-open{ display:block; }
  .db-primary-nav ul{ flex-direction:column; gap:2px; }
  .db-primary-nav ul ul{ position:static; display:flex; border:none; background:transparent; padding-left:14px; box-shadow:none; }
  .db-menu-toggle{ display:flex; }
}

.db-topbar-strip{
  background: var(--db-surface); border-bottom:1px solid var(--db-border); font-size:.85rem; color: var(--db-text-muted); padding: 6px 0;
}
.db-topbar-strip .db-container{ display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; }

/* =========================================================
   4. HERO / FRONT PAGE
========================================================= */
.db-hero{
  background: radial-gradient(circle at 20% 20%, rgba(79,209,197,.12), transparent 45%), radial-gradient(circle at 80% 0%, rgba(139,124,246,.14), transparent 40%), var(--db-bg-alt);
  border-bottom: 1px solid var(--db-border);
  padding: 64px 0;
}
.db-hero-inner{ max-width: 760px; }
.db-eyebrow{
  display:inline-block; text-transform:uppercase; letter-spacing:1.5px; font-size:.78rem; font-weight:700; color: var(--db-accent); background: rgba(79,209,197,.1); border:1px solid rgba(79,209,197,.35); padding:5px 12px; border-radius:999px; margin-bottom:16px;
}
.db-hero h1{ font-size: 2.8rem; margin-bottom:.4em; }
.db-hero p.db-lead{ font-size:1.15rem; color: var(--db-text-muted); max-width:640px; }
.db-hero-cats{ display:flex; flex-wrap:wrap; gap:8px; margin-top:22px; }
.db-hero-cats a{
  border:1px solid var(--db-border); padding:6px 14px; border-radius:999px; font-size:.85rem; font-weight:600; color: var(--db-text);
}
.db-hero-cats a:hover{ border-color: var(--db-accent); color: var(--db-accent); }

.db-featured-grid{
  display:grid; grid-template-columns: 1.3fr 1fr; gap:22px; margin: 40px 0 0;
}
@media (max-width: 900px){ .db-featured-grid{ grid-template-columns: 1fr; } }

/* =========================================================
   5. CARDS / POST LISTS
========================================================= */
.db-section-title{
  display:flex; align-items:center; justify-content:space-between; margin: 48px 0 20px; padding-bottom:12px; border-bottom:1px solid var(--db-border);
}
.db-section-title h2{ margin:0; font-size:1.5rem; }
.db-section-title a{ font-size:.9rem; font-weight:700; }

.db-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 900px){ .db-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 640px){ .db-grid{ grid-template-columns: 1fr; } }

.db-card{
  background: var(--db-surface); border:1px solid var(--db-border); border-radius: var(--db-radius); overflow:hidden; display:flex; flex-direction:column; transition: transform .15s ease, border-color .15s ease;
}
.db-card:hover{ transform: translateY(-3px); border-color: var(--db-accent); }
.db-card-thumb{ aspect-ratio: 16/10; overflow:hidden; background: var(--db-surface-2); }
.db-card-thumb img{ width:100%; height:100%; object-fit:cover; border-radius:0; }
.db-card-body{ padding: 18px 18px 20px; display:flex; flex-direction:column; gap:8px; flex:1; }
.db-card .db-cat-badge{ align-self:flex-start; }
.db-card h3{ font-size:1.1rem; margin:0; }
.db-card h3 a{ color:#fff; }
.db-card h3 a:hover{ color: var(--db-accent); }
.db-card-excerpt{ color: var(--db-text-muted); font-size:.92rem; margin:0; }
.db-card-meta{ font-size:.8rem; color: var(--db-text-muted); margin-top:auto; display:flex; gap:10px; flex-wrap:wrap; }

.db-cat-badge{
  display:inline-block; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:#0b0e14; background: var(--db-accent); padding:3px 10px; border-radius:999px;
}
.db-cat-badge.alt{ background: var(--db-accent-2); }
.db-cat-badge.alt3{ background: var(--db-accent-3); }

.db-featured-post{ display:flex; flex-direction:column; }
.db-featured-post .db-card-thumb{ aspect-ratio: 16/9; }
.db-featured-post h2{ font-size:1.6rem; margin:.3em 0; }
.db-featured-post h2 a{ color:#fff; }

.db-side-list{ display:flex; flex-direction:column; gap:16px; }
.db-side-list .db-card{ flex-direction:row; }
.db-side-list .db-card-thumb{ width:110px; min-width:110px; aspect-ratio:1/1; }
.db-side-list .db-card-body{ padding:12px 14px; gap:4px; }
.db-side-list h3{ font-size:.95rem; }

/* Blog list (archive/index) */
.db-post-list{ display:flex; flex-direction:column; gap:34px; }
.db-post-list article{ display:grid; grid-template-columns: 280px 1fr; gap:24px; padding-bottom:34px; border-bottom:1px solid var(--db-border); }
.db-post-list article .db-card-thumb{ aspect-ratio:4/3; border-radius:var(--db-radius); }
@media (max-width: 640px){ .db-post-list article{ grid-template-columns:1fr; } }
.db-post-list h2{ font-size:1.45rem; margin:.2em 0 .3em; }
.db-post-list h2 a{ color:#fff; }
.db-post-list h2 a:hover{ color: var(--db-accent); }
.db-entry-meta{ font-size:.82rem; color: var(--db-text-muted); margin-bottom:8px; display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.db-entry-meta a{ color: var(--db-text-muted); }
.db-entry-meta a:hover{ color: var(--db-accent); }

/* =========================================================
   6. SINGLE POST
========================================================= */
.db-single-header{ margin-bottom: 24px; }
.db-single-header .db-cat-badge{ margin-bottom:14px; }
.db-single-header h1{ font-size:2.1rem; }
.db-single-thumb{ margin: 24px 0; }
.db-entry-content{ font-size:1.06rem; }
.db-entry-content h2{ margin-top:1.6em; }
.db-entry-content h3{ margin-top:1.4em; }
.db-entry-content ul, .db-entry-content ol{ margin-bottom:1.2em; }
.db-tags{ margin: 30px 0; display:flex; gap:8px; flex-wrap:wrap; }
.db-tags a{ border:1px solid var(--db-border); padding:4px 12px; border-radius:999px; font-size:.82rem; color: var(--db-text-muted); }
.db-tags a:hover{ border-color: var(--db-accent); color: var(--db-accent); }

.db-author-box{
  display:flex; gap:16px; background: var(--db-surface); border:1px solid var(--db-border); border-radius: var(--db-radius); padding:20px; margin: 34px 0;
}
.db-author-box img{ border-radius:50%; width:64px; height:64px; }
.db-author-box h4{ margin:0 0 4px; }
.db-author-box p{ margin:0; color: var(--db-text-muted); font-size:.92rem; }

.db-post-nav{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin: 34px 0; }
.db-post-nav > div{ background: var(--db-surface); border:1px solid var(--db-border); border-radius: var(--db-radius); padding:16px; }
.db-post-nav .db-nav-label{ font-size:.75rem; text-transform:uppercase; letter-spacing:.5px; color: var(--db-text-muted); display:block; margin-bottom:6px; }
.db-post-nav .db-next{ text-align:right; }
@media (max-width: 640px){ .db-post-nav{ grid-template-columns:1fr; } }

/* =========================================================
   7. SIDEBAR / WIDGETS
========================================================= */
.widget{
  background: var(--db-surface); border:1px solid var(--db-border); border-radius: var(--db-radius); padding: 22px; margin-bottom: 26px;
}
.widget-title{ font-size:1rem; text-transform:uppercase; letter-spacing:.5px; color: var(--db-accent); margin-bottom: 16px; border-bottom:1px solid var(--db-border); padding-bottom:10px; }
.widget ul{ list-style:none; margin:0; padding:0; }
.widget ul li{ padding:8px 0; border-bottom:1px dashed var(--db-border); font-size:.92rem; }
.widget ul li:last-child{ border-bottom:none; }
.widget select, .widget input[type=text], .widget input[type=search]{
  width:100%; padding:10px; background: var(--db-surface-2); border:1px solid var(--db-border); color: var(--db-text); border-radius:6px;
}
.db-newsletter-widget p{ font-size:.9rem; color: var(--db-text-muted); }
.db-newsletter-widget form{ display:flex; flex-direction:column; gap:8px; }
.db-newsletter-widget input[type=email]{ padding:10px; border-radius:6px; border:1px solid var(--db-border); background: var(--db-surface-2); color: var(--db-text); }

/* =========================================================
   8. FORMS / SEARCH / BUTTONS
========================================================= */
.db-search-form{ display:flex; gap:8px; width:100%; }
.db-search-form input[type=search]{
  flex:1; padding:10px 14px; border-radius:8px; border:1px solid var(--db-border); background: var(--db-surface); color: var(--db-text);
}
.db-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; background: var(--db-accent); color:#0b0e14; font-weight:700; padding:10px 20px; border-radius:8px; border:none; cursor:pointer; font-size:.95rem;
}
.db-btn:hover{ background: var(--db-accent-3); color:#0b0e14; }
.db-btn.outline{ background:transparent; border:1px solid var(--db-accent); color: var(--db-accent); }

.contact-form, .db-comment-form{ display:flex; flex-direction:column; gap:16px; max-width:640px; }
.contact-form label, .db-comment-form label{ font-weight:600; font-size:.9rem; display:block; margin-bottom:6px; }
.contact-form input, .contact-form textarea, .contact-form select,
.db-comment-form input, .db-comment-form textarea{
  width:100%; padding:12px 14px; background: var(--db-surface); border:1px solid var(--db-border); color: var(--db-text); border-radius:8px; font-family: inherit; font-size:1rem;
}
.contact-form textarea, .db-comment-form textarea{ resize:vertical; min-height:140px; }
.form-notice{ padding:12px 16px; border-radius:8px; margin-bottom:16px; font-size:.92rem; }
.form-notice.success{ background: rgba(79,209,197,.12); border:1px solid var(--db-accent); color: var(--db-accent); }
.form-notice.error{ background: rgba(255,122,89,.12); border:1px solid var(--db-accent-3); color: var(--db-accent-3); }

/* =========================================================
   9. PAGE CONTENT (About / Contact / Legal)
========================================================= */
.db-page-header{ text-align:center; padding: 50px 0 30px; border-bottom:1px solid var(--db-border); margin-bottom:40px; }
.db-page-header h1{ font-size:2.2rem; }
.db-page-header p{ color: var(--db-text-muted); max-width:640px; margin: 0 auto; }
.db-content-narrow{ max-width: 800px; margin: 0 auto; }
.db-value-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:20px; margin: 30px 0; }
@media (max-width: 760px){ .db-value-grid{ grid-template-columns:1fr; } }
.db-value-card{ background: var(--db-surface); border:1px solid var(--db-border); border-radius: var(--db-radius); padding:22px; }
.db-value-card h3{ font-size:1.05rem; color: var(--db-accent); }
.db-contact-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:40px; }
@media (max-width: 760px){ .db-contact-grid{ grid-template-columns:1fr; } }
.db-contact-info .item{ margin-bottom:22px; }
.db-contact-info h4{ margin-bottom:4px; color: var(--db-accent); font-size:.85rem; text-transform:uppercase; letter-spacing:.5px; }

/* =========================================================
   10. PAGINATION
========================================================= */
.db-pagination{ display:flex; justify-content:center; gap:8px; margin-top: 44px; flex-wrap:wrap; }
.db-pagination a, .db-pagination span{
  min-width:40px; height:40px; display:flex; align-items:center; justify-content:center; border:1px solid var(--db-border); border-radius:8px; color: var(--db-text); font-weight:600; padding:0 10px;
}
.db-pagination .current{ background: var(--db-accent); color:#0b0e14; border-color: var(--db-accent); }
.db-pagination a:hover{ border-color: var(--db-accent); color: var(--db-accent); }

/* =========================================================
   11. COMMENTS
========================================================= */
.comments-area{ margin-top: 50px; }
.comment-list{ list-style:none; margin:0; padding:0; }
.comment-list .children{ list-style:none; margin-left: 40px; padding:0; }
.comment-body{ background: var(--db-surface); border:1px solid var(--db-border); border-radius: var(--db-radius); padding:18px; margin-bottom:16px; }
.comment-meta{ font-size:.85rem; color: var(--db-text-muted); margin-bottom:8px; }
.comment-meta .fn{ color:#fff; font-weight:700; font-style:normal; }
.comment-reply-link{ font-size:.8rem; font-weight:700; }

/* =========================================================
   12. FOOTER
========================================================= */
.db-footer{
  background: var(--db-bg-alt); border-top:1px solid var(--db-border); margin-top: 60px; padding-top: 50px;
}
.db-footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 30px; padding-bottom: 36px; }
@media (max-width: 900px){ .db-footer-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .db-footer-grid{ grid-template-columns: 1fr; } }
.db-footer-col h4{ color:#fff; font-size:.9rem; text-transform:uppercase; letter-spacing:.5px; margin-bottom:16px; }
.db-footer-col ul{ list-style:none; margin:0; padding:0; }
.db-footer-col ul li{ margin-bottom:10px; }
.db-footer-col ul li a{ color: var(--db-text-muted); font-size:.92rem; }
.db-footer-col ul li a:hover{ color: var(--db-accent); }
.db-footer-about p{ color: var(--db-text-muted); font-size:.92rem; }
.db-social-links{ display:flex; gap:10px; margin-top:14px; }
.db-social-links a{
  width:36px; height:36px; border:1px solid var(--db-border); border-radius:8px; display:flex; align-items:center; justify-content:center; color: var(--db-text);
}
.db-social-links a:hover{ border-color: var(--db-accent); color: var(--db-accent); }
.db-footer-bottom{
  border-top:1px solid var(--db-border); padding: 20px 0; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:.85rem; color: var(--db-text-muted);
}
.db-footer-bottom a{ color: var(--db-text-muted); }
.db-footer-bottom a:hover{ color: var(--db-accent); }

/* =========================================================
   13. MISC / UTILS
========================================================= */
.db-empty-state{ text-align:center; padding: 60px 20px; }
.db-empty-state h1{ font-size:2rem; }
.alignwide{ width:100%; }
.alignfull{ width:100vw; margin-left:calc(50% - 50vw); }
.wp-caption-text{ font-size:.85rem; color: var(--db-text-muted); text-align:center; margin-top:6px; }
::selection{ background: var(--db-accent); color:#0b0e14; }