/* ----------------------- */
/*  Reset All CSS Styles   */
/* ----------------------- */

html, body, div, iframe, img, p, pre, a, hr, span, blockquote, form, label, input, button, textarea, legend, fieldset, h1, h2, h3, h4, h5, h6, table, th, tr, td, dl, dt, dd, ol, ul, li, article, aside, audio, canvas, footer, header, menu, nav, section, video { margin: 0; padding: 0; font-weight: normal; box-sizing: inherit; }
html, body { width: 100%; height: 100%; }
input:focus, textarea:focus { outline: none; }
input[type=email], input[type=text], input[type=password], input[type=tel], hr, img { border: 0; vertical-align: baseline; }

/* Fonts */
@font-face { font-family: 'Inter Bold'; src: url('../webfonts/Inter-Bold.ttf?v=1.0.0') format('truetype'); font-style: normal; font-display: block; }
@font-face { font-family: 'Inter Extra Bold'; src: url('../webfonts/Inter-ExtraBold.ttf?v=1.0.0') format('truetype'); font-style: normal; font-display: block; }
@font-face { font-family: 'Poppins'; src: url('../webfonts/Poppins-Regular.ttf?v=1.0.0') format('truetype'); font-style: normal; font-display: block; }
@font-face { font-family: 'Poppins Bold'; src: url('../webfonts/Poppins-Bold.ttf?v=1.0.0') format('truetype'); font-style: normal; font-display: block; }

/* Base HTML */
body { font-family: 'Poppins','Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 17px; line-height: 1.4705882353; background-color: var(--color-bg); color: var(--color-text); letter-spacing: -.022em; word-wrap: break-word; }
sup { font-size: .75em; text-transform: uppercase; }
label { display: block; margin-bottom: 15px; }
select { padding: 8px 9px; }
p { margin-bottom: 16px; }
    p.copyright { font-size: small;}
a { color: var(--color-primary); text-decoration: none; transition: var(--transition); }
    a:hover { color: var(--color-orange-1);text-decoration: underline; }

/* Root styles */
:root {
    /* Colors - Light Theme (Default) */
    --color-white: #ffffff;
    --color-orange: #febf01;
    --color-orange-3: #fbf9f1;
    --color-orange-4: #f3e4a9;
    --color-primary: #1e72dd;
    --color-primary-dark: #1557b0;
    --color-text: #2c3e50;
    --color-text-light: #6c757d;
    --color-heading: #1a202c;
    --color-border: #e2e8f0;
    --color-bg: #ffffff;
    --color-bg-alt: #f8fafc;
    --color-sidebar: #f8fafc;
    --color-sidebar-text: #2c3e50;
    --color-sidebar-hover: #e2e8f0;
    --color-sidebar-border: #e2e8f0;
    --color-sidebar-muted: #6c757d;
    --color-sidebar-accent: rgba(30, 114, 221, 0.1);
    --color-logo: #1a202c;
    --color-success: #10b981;
    --color-error: #ef4444;
    --color-warning: #f59e0b;

    /* Button color variables (gradients and borders) */
    --btn-blue-1: #148cd3;
    --btn-blue-2: #0d7bcb;
    --btn-blue-border: #0f6bba;
    --btn-blue-hover-border: #1d90d4;

    --btn-orange-1: #febf01;
    --btn-orange-2: #e4a001;
    --btn-orange-border: #cc8f02;
    --btn-orange-hover-border: #bf8602;
    --btn-orange-hover-1: #e09e04;
    --btn-orange-hover-2: #f4b803;

    --btn-smoke-1: #fefefe;
    --btn-smoke-2: #f2f2f2;
    --btn-smoke-border: #bfbfbf;
    --btn-smoke-hover-border: #a8a8a8;
    --btn-smoke-hover-1: #E5E5E5;
    --btn-smoke-hover-2: #f7f7f7;

    --btn-red-1: #d50000;
    --btn-red-2: #a20000;
    --btn-red-border: #6f0000;

    --btn-green-1: #6eb45a;
    --btn-green-2: #028302;
    --btn-green-border: #4d853c;
    --btn-green-hover-1: #025e02;
    --btn-green-hover-2: var(--btn-green-1);

    /* Typography */
    --font-heading: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-body: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Spacing */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;

    /* Layout */
    --sidebar-width: 280px;
    --content-max-width: 1200px;
    --border-radius: 8px;
    --transition: all 0.3s ease;
}

/* Dark theme */
[data-theme="dark"] {
    --color-orange-1: #febf01;
    --color-orange-2: #c79800;
    --color-text: #e2e8f0;
    --color-text-light: #a0aec0;
    --color-heading: #f7fafc;
    --color-border: #2d3748;
    --color-bg: #1a202c;
    --color-bg-alt: #2d3748;
    --color-sidebar: #0f1419;
    --color-sidebar-text: #a0aec0;
    --color-sidebar-hover: #1a202c;
    --color-sidebar-border: rgba(255, 255, 255, 0.1);
    --color-sidebar-muted: rgba(255, 255, 255, 0.5);
    --color-sidebar-accent: rgba(255, 255, 255, 0.1);

    /* Button variable overrides for dark theme */
    --btn-blue-1: #115ea8;
    --btn-blue-2: #0b4f90;
    --btn-blue-border: #1557b0;
    --btn-blue-hover-border: #1d90d4;

    --btn-orange-1: #c79800;
    --btn-orange-2: #9b6f00;
    --btn-orange-border: #a46b00;
    --btn-orange-hover-border: #bf8602;

    --btn-smoke-1: #2d3748;
    --btn-smoke-2: #1a202c;
    --btn-smoke-border: #4a5568;
    --btn-smoke-hover-border: #2d3748;

    --btn-red-1: #b91c1c;
    --btn-red-2: #7f1515;
    --btn-red-border: #7f1515;

    --btn-green-1: #2f8a3a;
    --btn-green-2: #056622;
    --btn-green-border: #285f36;
}

[data-theme="dark"] .sidebar-section ul li a, a.read-more { color: var(--color-orange-2); }

[data-theme="dark"] aside { background-color: var(--color-sidebar); border: none; border-right: 1px solid var(--color-sidebar-border); }

/* Smooth theme transitions for background, color and borders */
body, .main-content, .sidebar, .mobile-header, .sidebar-overlay, .explanation, .sidebar-nav a, .btn, .theme-btn { transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; }

/* Quotes */
blockquote { margin: 25px 20px 20px 20px; padding-left: 40px; position: relative; }
    blockquote:before { position: absolute; top: 30px; left: 0; content: "\201C"; opacity: 0.45; font-size: 80px; line-height: 0; margin: 0; font-family: arial, sans-serif; }
    blockquote cite::before { content: "\2014 \0020"; }
    blockquote cite::before, ::after { box-sizing: inherit; }

/* Table styles */
table { width: 100%; max-width: 100%; margin: 0 0 16px 0; border-collapse: collapse; border-spacing: 0; }
    tr { border-bottom: 1px solid var(--color-border); }
        tr:nth-child(odd) { background-color: var(--color-bg-alt); }
    th { color: #fff; background-color: var(--btn-blue-2); }
    th, td { display: table-cell; padding: 5px 10px; border: 1px solid var(--color-border); text-align: left; }

/* Headers */
h1, h2, h3, h4, h5 { font-family: 'Poppins Bold'; color: var(--color-heading); margin-bottom: 16px; }
h1 { font-size: 2.5rem; line-height: 1.15; }
h2 { font-size: 2.00rem; }
h3 { font-size: 1.75rem; }
h4 { font-size: 1.50rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1.15rem; }

/* Aside */
aside { background-color: var(--color-sidebar); border: 1px solid var(--color-sidebar-border); transition: background-color 0.3s ease; }

/* Inputs */
input[type=button], input[type=password], input[type=text], input[type=file], input[type=tel], input[type=submit], input[type=reset], textarea { margin: 0; padding: 8px 20px; font-size: 1em; color: var(--color-text); border: 1px solid var(--color-border); box-sizing: border-box; }
    input[type=text]:focus, input[type=password]:focus, input[type=tel]:focus { outline: none; border: 1px solid var(--color-primary); box-shadow: 0 0 10px 1px rgba(30,114,221,0.12); }
    input[type=submit]:hover, input[type=reset]:hover { cursor: pointer; }

/* Buttons */
a.btn:hover { text-decoration: none; }
.btn, input[type=submit].btn, input[type=button].btn { display: inline-block; margin: 0; padding: 8px 20px; width: auto; font-size: 16px; cursor: pointer; text-align: center; border-radius: 5px; box-shadow: 0px 1px 3px rgba(50, 50, 50, 0.25); }
    .btn:active, .btn:hover { border-radius: 5px; }
    .btn.blue { color: #fff; border: 1px solid var(--btn-blue-border); background: linear-gradient(to bottom, var(--btn-blue-1) 0%, var(--btn-blue-2) 100%); }
        .btn.blue:hover { border:1px solid var(--btn-blue-hover-border); background: linear-gradient(to bottom, var(--btn-blue-2) 0%, var(--btn-blue-1) 100%); }
    .btn.orange { color: #fff; border: 1px solid var(--btn-orange-border); background: linear-gradient(to bottom, var(--btn-orange-1) 0%, var(--btn-orange-2) 100%); }
        .btn.orange:hover { border: 1px solid var(--btn-orange-hover-border); background: linear-gradient(to bottom, var(--btn-orange-hover-1) 0%, var(--btn-orange-hover-2) 100%); }
    .btn.smoke { border: 1px solid var(--btn-smoke-border); background: linear-gradient(to bottom, var(--btn-smoke-1) 0%, var(--btn-smoke-2) 100%); color: #555; }
        .btn.smoke:hover { border: 1px solid var(--btn-smoke-hover-border); border-radius: 5px; background: linear-gradient(to bottom, var(--btn-smoke-hover-1) 0%, var(--btn-smoke-hover-2) 100%); }
        .btn.smoke:disabled:hover { border: 1px solid var(--btn-smoke-border); background: linear-gradient(to bottom, var(--btn-smoke-1) 0%, var(--btn-smoke-2) 100%); cursor:auto; }
    .btn.red { color: #fff; border: 1px solid var(--btn-red-border); background: linear-gradient(to bottom, var(--btn-red-1) 0%, var(--btn-red-2) 100%); }
        .btn.red:hover { color: #fff; border: 1px solid var(--btn-red-border); background: linear-gradient(to bottom, var(--btn-red-2) 0%, var(--btn-red-1) 100%); }
    .btn.green { color: #fff; border: 1px solid var(--btn-green-border); background: linear-gradient(to bottom, var(--btn-green-1) 0%, var(--btn-green-2) 100%); }
        .btn.green:hover { color: #fff; border: 1px solid var(--btn-green-border); background: linear-gradient(to bottom, var(--btn-green-hover-1) 0%, var(--btn-green-hover-2) 100%); }
    .btn-primary { color: #fff !important; border: 1px solid var(--btn-blue-border); background: linear-gradient(to bottom, var(--btn-blue-1) 0%, var(--btn-blue-2) 100%); }
        .btn-primary:hover { color: #fff !important; border: 1px solid var(--btn-blue-hover-border); background: linear-gradient(to bottom, var(--btn-blue-2) 0%, var(--btn-blue-1) 100%); }

/* Sidebar (desktop: Fixed Left, Mobile: Hidden by default) */
.sidebar { position: fixed; top: 0; left: 0; width: 280px; height: 100vh; overflow-y: auto; z-index: 1000; transition: transform 0.3s ease; /* Smooth slide animation */ color: var(--color-sidebar-text); }

/* Sidebar Header */
.sidebar-header { display: flex; padding: 20px; justify-content: space-between; align-items: center; }
    .sidebar-header .logo { margin: 0 auto; width: 120px; height: 120px; }

/* Close button (hidden on desktop, visible on mobile) */
.sidebar-close { display: none; background: none; border: none; font-size: 1.5rem; color: var(--color-sidebar-muted); cursor: pointer; }

/* Sidebar navigation links */
.sidebar-nav ul, .sidebar-section ul, .recent-posts-list { list-style: none; }
.sidebar-nav a { display: flex; align-items: center; gap: 1rem; padding: 10px 20px; color: var(--color-sidebar-text); text-decoration: none; transition: all 0.3s ease; }
    .sidebar-nav a:hover { background: var(--color-sidebar-hover); color: var(--color-sidebar-text); }
    .sidebar-nav i { width: 20px; }

/* Sidebar categories */
.sidebar-section ul li { padding-bottom: 10px; }

/* Sidebar-section i { padding-right: 15px; } */
.sidebar-section ul li a { display: flex; align-items: center; gap: 1rem; }
.sidebar-section.categories ul li a { padding: 0; }
.count { margin-left: auto; font-size: 0.875rem; }
.sidebar-section { margin-top: var(--spacing-md); padding: 0 var(--spacing-md); }
.sidebar-section-title { margin-bottom: var(--spacing-sm); font-family: var(--font-heading); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-sidebar-muted); }

/* Sidebar recent posts */
.recent-posts-list li { margin-bottom: var(--spacing-sm); padding-bottom: var(--spacing-sm); border-bottom: 1px solid var(--color-sidebar-border); }
    .recent-posts-list li:last-child { border-bottom: none; }
    .recent-posts-list a { display: block; padding: 0; font-size: 0.9rem; line-height: 1.4; }
    .recent-posts-list .post-date { display: block; margin-top: var(--spacing-xs); font-size: 0.75rem; color: var(--color-sidebar-muted); }

/* Mobile header */
.mobile-header { display: none; position: fixed; top: 0; left: 0; right: 0; padding: 0 1.5rem; height: 60px; background: var(--color-bg); border-bottom: 1px solid var(--color-border);
align-items: center; justify-content: space-between; gap: 1rem; z-index: 999; }
.mobile-menu-toggle { background: none; border: none; font-size: 1.5rem; color: var(--color-text); cursor: pointer; }
.mobile-logo { margin-left: auto; display: flex; align-items: center; }
.mobile-logo a { display: flex; align-items: center; line-height: 0; }
.mobile-logo-img { height: 40px; width: 40px; display: block; object-fit: contain; -webkit-transform: translateZ(0); }

/* Overlay (only shows on mobile when sidebar is open) */
.sidebar-overlay { display: none; /* Hidden by default */ position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); z-index: 999;    opacity: 0; transition: opacity 0.3s ease; }

/* Main conent area */
.main-content { margin-left: 280px; /* Space for sidebar on desktop */ padding: 3rem; min-height: 100vh; background: var(--color-bg); color: var(--color-text); }
    .main-content h1 { margin-bottom: 1rem; color: var(--color-heading); }
    .main-content p { margin-bottom: 1rem; line-height: 1.6; color: var(--color-text); }

/* Code explaination screen */
.explanation { margin-top: 2rem; padding: 2rem; background: var(--color-bg-alt); border: 2px solid var(--color-primary); border-radius: 8px; }
    .explanation h2 { color: var(--color-primary); margin-bottom: 1rem; }
    .explanation h3 { color: var(--color-heading); margin-top: 1.5rem; margin-bottom: 0.5rem; }
    .explanation code { padding: 0.2rem 0.5rem; border-radius: 4px; background: var(--color-border); font-family: 'Courier New', monospace; }
    .explanation ul { margin: 0.5rem 0 0 2rem; }
        .explanation li { margin-bottom: 0.5rem; }

/* Theme Toggle */
.theme-toggle { padding-bottom: var(--spacing-md); }
.theme-toggle-title { padding: 0 var(--spacing-md); font-family: var(--font-heading); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-sidebar-muted); margin-bottom: var(--spacing-sm); }
.theme-options { display: flex; padding: 0 var(--spacing-md); gap: var(--spacing-xs); }
.theme-btn { display: flex; flex: 1; padding: var(--spacing-xs) var(--spacing-sm); background: var(--color-sidebar-accent); border: 1px solid var(--color-sidebar-border); border-radius: var(--border-radius); color: var(--color-sidebar-text); font-size: 0.875rem; font-family: var(--font-body); cursor: pointer; transition: var(--transition); align-items: center; justify-content: center; gap: var(--spacing-xs); }
    .theme-btn:hover { background: var(--color-sidebar-hover); border-color: var(--color-primary); }
    .theme-btn.active { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-white); }
    .theme-btn i { font-size: 1rem; }

/* Sidebar footer */
.sidebar-footer { padding: var(--spacing-md); border-top: 1px solid var(--color-sidebar-border); }
.social-links { display: flex; margin-bottom: var(--spacing-lg); gap: var(--spacing-sm); }

.social-links a { display: flex; width: 36px; height: 36px; border-radius: 50%; align-items: center; justify-content: center; background: var(--color-sidebar-accent); color: var(--color-sidebar-text); transition: var(--transition); }
    .social-links a:hover { background: var(--color-primary); color: #ffffff; }

/* Page headers */
.page-header { margin-bottom: var(--spacing-xl);   text-align: center; }
.page-title { margin-bottom: var(--spacing-sm); font-size: 2.5rem; font-weight: 800; }
.page-subtitle { font-size: 1.25rem; color: var(--color-text-light); font-weight: 400; }

/* ------------------
    Post page
   ------------------ */
.posts-grid { display: grid; margin-bottom: var(--spacing-xl); grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--spacing-lg); }
.post-card { display: flex; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--border-radius);     overflow: hidden; transition: var(--transition); flex-direction: column; }
    .post-card:hover { transform: translateY(-4px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); }
.post-image { position: relative; padding-top: 56.25%; /* 16:9 aspect ratio */ overflow: hidden; background: var(--color-bg-alt); }
    .post-image img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: var(--transition);
}
    .post-card:hover .post-image img { transform: scale(1.05); }
.post-content { padding: var(--spacing-md); flex: 1; display: flex; flex-direction: column; }
.post-category { margin-bottom: var(--spacing-sm); }
.post-category a, .post-category span { display: inline-block; padding: 0.25rem 0.75rem; font-size: 0.75rem; font-weight: 600; text-transform: uppercase;     letter-spacing: 0.05em; color: var(--color-primary); background: rgba(30, 114, 221, 0.1); border-radius: 4px;
}
.post-title { margin-bottom: var(--spacing-sm); font-size: 1.5rem; font-weight: 700; }
    .post-title a { color: var(--color-heading); }
        .post-title a:hover { color: var(--color-primary); }
.post-excerpt { margin-bottom: var(--spacing-md); color: var(--color-text-light); flex: 1; }
.post-meta { display: flex; margin-bottom: var(--spacing-md); flex-wrap: wrap; gap: var(--spacing-md); font-size: 0.875rem; color: var(--color-text-light); }
    .post-meta span { display: flex; align-items: center; gap: var(--spacing-xs); }
.read-more { display: inline-flex; align-items: center; gap: var(--spacing-xs); font-weight: 600; color: var(--color-primary); transition: var(--transition); }
    .read-more:hover { gap: var(--spacing-sm); }
.no-posts { text-align: center; padding: var(--spacing-xl); grid-column: 1 / -1; }
    .no-posts i { margin-bottom: var(--spacing-md); font-size: 4rem; color: var(--color-border); }
    .no-posts h2 { margin-bottom: var(--spacing-sm); color: var(--color-text-light); font-weight: 600; }
.single-post { margin: 0 auto; max-width: 920px; }
.post-container { background: var(--color-bg); }
    .single-post .post-header { margin-bottom: var(--spacing-xl); padding-bottom: var(--spacing-lg); border-bottom: 2px solid var(--color-border); text-align: center; }
    .single-post .post-category { margin-bottom: var(--spacing-md); }
    .single-post .post-title { font-size: 2.5rem;     margin-bottom: var(--spacing-md); }
.single-post .post-meta { justify-content: center; font-size: 0.9rem; }
.post-tags { display: flex; margin-top: var(--spacing-md); flex-wrap: wrap; gap: var(--spacing-xs); justify-content: center; }
.tag { display: inline-flex; padding: 0.25rem 0.75rem; align-items: center; gap: 0.25rem; font-size: 0.75rem; background: var(--color-bg-alt); border: 1px solid var(--color-border); border-radius: 4px; color: var(--color-text); transition: var(--transition); }
    .tag:hover { background: var(--color-primary); border-color: var(--color-primary); color: white; }
.post-featured-image { margin-bottom: var(--spacing-xl); border-radius: var(--border-radius); overflow: hidden; }
    .post-featured-image img { width: 100%; height: auto; display: block; }
.post-body { color: var(--color-text); margin-bottom: var(--spacing-xl); }
    .post-body h2 { margin-top: var(--spacing-xl); margin-bottom: var(--spacing-md); font-weight: 700; }
    .post-body h3 { margin-top: var(--spacing-lg); margin-bottom: var(--spacing-sm); font-weight: 600; }
    .post-body ul, .post-body ol { margin-top: var(--spacing-md); margin-bottom: var(--spacing-md); padding-left: var(--spacing-lg); }
    .post-body li { margin-bottom: var(--spacing-xs); }
    .post-body pre { background: var(--color-sidebar); color: #e2e8f0; padding: var(--spacing-md); border-radius: var(--border-radius); overflow-x: auto; margin-bottom: var(--spacing-md); }
    .post-body code { font-family: 'Courier New', monospace; font-size: 0.9em; }
    .post-body p code { background: var(--color-bg-alt); padding: 0.2em 0.4em; border-radius: 4px; color: var(--color-primary); }
.post-footer { padding-top: var(--spacing-lg); border-top: 2px solid var(--color-border); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--spacing-md); }
.share-buttons { display: flex; align-items: center; gap: var(--spacing-sm); flex-wrap: wrap; }
.share-label { font-weight: 600; color: var(--color-text-light); }
.share-button { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--color-bg-alt); color: var(--color-text); transition: var(--transition); }
    .share-button:hover { transform: translateY(-2px); }
    .share-button.twitter:hover { background: #1da1f2; color: white; }
    .share-button.linkedin:hover { background: #0077b5; color: white; }
    .share-button.facebook:hover { background: #1877f2; color: white; }
.back-to-blog { display: inline-flex; align-items: center; gap: var(--spacing-xs); font-weight: 600; color: var(--color-primary); }

/* -----------------------------------
   Static Pages (About, Contact)
   ----------------------------------- */
.static-page { max-width: 900px; margin: 0 auto; }
.page-content { background: var(--color-bg); }
.content-section { margin-bottom: var(--spacing-xl); }
    .content-section h2 { font-weight: 700; margin-bottom: var(--spacing-md); }
.topics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--spacing-lg); margin-top: var(--spacing-lg); }
.topic-card { padding: var(--spacing-lg); background: var(--color-bg-alt); border: 1px solid var(--color-border); border-radius: var(--border-radius); transition: var(--transition); }
    .topic-card:hover { transform: translateY(-4px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); }
.topic-icon { font-size: 2rem; color: var(--color-primary); margin-bottom: var(--spacing-sm); }
    .topic-card h3 { font-weight: 700; margin-bottom: var(--spacing-sm); }
.values-list { display: flex; flex-direction: column; gap: var(--spacing-md); margin-top: var(--spacing-lg); }
.value-item { display: flex; gap: var(--spacing-md); padding: var(--spacing-md); background: var(--color-bg-alt); border-radius: var(--border-radius); }
    .value-item i { font-size: 1.5rem; color: var(--color-success); flex-shrink: 0; }
    .value-item h3 { font-weight: 600; margin-bottom: var(--spacing-xs); }
.cta-section { text-align: center; padding: var(--spacing-xl); background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%); color: white; border-radius: var(--border-radius); }
    .cta-section h2, .cta-section p { color: white; }

/* -----------------------------------
   Contact Page
   ----------------------------------- */
.contact-layout { display: grid; grid-template-columns: 2fr 1fr; gap: var(--spacing-xl); margin-top: var(--spacing-xl); }
.contact-form { background: var(--color-bg); }
.form-group { margin-bottom: var(--spacing-md); }
.form-label { display: block; font-weight: 600; margin-bottom: var(--spacing-xs); color: var(--color-heading); }
.required { color: var(--color-error); }
.form-input, .form-textarea { width: 100%; padding: var(--spacing-sm); border: 1px solid var(--color-border); border-radius: var(--border-radius); font-family: var(--font-body); font-size: 1rem; transition: var(--transition); }
    .form-input:focus, .form-textarea:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(30, 114, 221, 0.1); }
    .form-textarea { resize: vertical; }
.contact-info { display: flex; flex-direction: column; gap: var(--spacing-md); }
.info-card { padding: var(--spacing-md); background: var(--color-bg-alt); border: 1px solid var(--color-border); border-radius: var(--border-radius); }
.info-icon { font-size: 1.5rem; color: var(--color-primary); margin-bottom: var(--spacing-sm); }
    .info-card h3 { font-size: 1.125rem; font-weight: 700; margin-bottom: var(--spacing-sm); }
    .info-card ul { list-style: none; }
        .info-card li { padding: 0.25rem 0; color: var(--color-text-light); }


/* -----------------------
   Responsive break points
   ----------------------- */

/* Desktop - extra large */
@media only screen and (min-width: 1141px) and (max-width: 1920px) {

    /* extra large monitor styles here */

}

/* Desktop - large */
@media only screen and (min-width: 1024px) and (max-width: 1140px) {

    /* large monitor styles here */

}

/* Tablet - portrait */
@media only screen and (min-width: 800px) and (max-width: 1023px) {

    /* tablet styles here */

}

/* Mobile */
@media only screen and (min-width: 360px) and (max-width: 799px) {

    /* Hide sidebar off-screen by default on mobile */
    .sidebar { transform: translateX(-100%); }
    .sidebar-header .logo { display: none; }
    .mobile-header .logo { margin: 0 auto; width: 50px; height: 50px; }

    /* When sidebar has 'active' class, slide it in */
    .sidebar.active { transform: translateX(0); }

    /* Show close button on mobile */
    .sidebar-close { display: block; padding-left: 5px; }

    /* Show mobile header on mobile */
    .mobile-header { display: flex; }

    /* Show overlay when it has 'active' class */
    .sidebar-overlay.active { display: block; opacity: 1; }

    /* Remove left margin from main content on mobile */
    .main-content { margin-left: 0; /* Space for mobile header */ padding: 80px 1.5rem 1.5rem; }

    .single-post .post-title { font-size: 2rem; }

}

/* -----------------------------------
   Admin Post Management Styles (admin-view-posts.php)
   ----------------------------------- */

/* Module header with action button */
.module-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }

/* Table styles */
.data-table { width: 100%; border-collapse: collapse; background: white; border-radius: 4px; overflow: hidden; }

.data-table thead { background: var(--btn-blue-1); }

.data-table th,
.data-table td { padding: 12px; text-align: left; border-bottom: 1px solid #e0e0e0; }

.data-table th { color: white; }

.data-table tbody tr:hover { background: #f9f9f9; }

.data-table tbody tr:last-child td { border-bottom: none; }

/* Status badges */
.status-badge { display: inline-block; padding: 4px 12px; border-radius: 12px; font-size: 0.85rem; font-weight: 500; }

.status-draft { background: #fff3cd; color: #856404; }

.status-published { background: #d4edda; color: #155724; }

.status-archived { background: #e2e3e5; color: #383d41; }

.status-active { background: #d4edda; color: #155724; }

.status-inactive { background: #e2e3e5; color: #383d41; }

.status-suspended { background: #f8d7da; color: #721c24; }

/* Role badges */
.role-badge { display: inline-block; padding: 4px 12px; border-radius: 12px; font-size: 0.85rem; font-weight: 500; }

.role-admin { background: #d1ecf1; color: #0c5460; }

.role-editor { background: #e7d7f5; color: #4a2470; }

.role-user { background: #e2e3e5; color: #383d41; }

/* Action buttons */
.actions-column { width: 180px; }

.action-buttons { display: flex; gap: 8px; }

.btn-small { padding: 6px 12px; font-size: 0.875rem; }

/* Empty state */
.empty-state { text-align: center; padding: 3rem; background: #f5f5f5; border-radius: 4px; }

/* Modal styles */
.modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); align-items: center; justify-content: center; }

.modal.show { display: flex; }

.modal-content { background: white; padding: 2rem; border-radius: 8px; max-width: 500px; width: 90%; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); }

.modal-content h2 { margin-top: 0; margin-bottom: 1rem; }

.warning-text { color: #dc3545; font-weight: 500; }

.warning-text.hidden { display: none; }

/* Text utility classes */
.text-muted { color: #666; }

.text-small { font-size: 0.875rem; }

/* Email reveal button (contact.php) */
#email-address { cursor: pointer; padding: 0.5rem 1rem; background: var(--color-bg-alt); border-radius: 4px; display: inline-block; font-size: 0.95rem; }

.modal-actions { margin-top: 1.5rem; }

.modal-actions form { display: flex; gap: 10px; }

/* -----------------------------------
   Category Management Styles (admin-categories.php)
   ----------------------------------- */

.categories-layout { display: grid; grid-template-columns: 400px 1fr; gap: 2rem; margin-top: 2rem; }

.category-form-section,
.categories-list-section { background: white; padding: 1.5rem; border-radius: 4px; border: 1px solid #e0e0e0; }

.category-form-section h2,
.categories-list-section h2 { margin-top: 0; margin-bottom: 1.5rem; font-size: 1.25rem; }

.category-form .form-group { margin-bottom: 1.5rem; }

.category-form label { display: block; margin-bottom: 0.5rem; font-weight: 600; color: var(--color-heading); }

.category-form input[type="text"],
.category-form textarea { width: 100%; padding: 0.75rem; border: 1px solid var(--color-border); border-radius: 4px; font-family: var(--font-body); font-size: 1rem; }

.category-form input[type="text"]:focus,
.category-form textarea:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(30, 114, 221, 0.1); }

.category-form .form-help { display: block; margin-top: 0.25rem; font-size: 0.875rem; color: #666; }

.post-count { display: inline-block; padding: 4px 12px; background: #e3f2fd; color: #1976d2; border-radius: 12px; font-size: 0.85rem; font-weight: 500; }

@media only screen and (max-width: 1023px) {
    .categories-layout { grid-template-columns: 1fr; }
}