/*
Theme Name: Phani Tech Blog V2
Theme URI: https://example.com/
Author: Phani Kadambari
Description: Premium personal technical blog theme for Oracle, PostgreSQL, MySQL HeatWave, Exadata, OCI, AWS, Cloud and AI. Includes dark mode, reading time, code copy buttons, author box, related posts, social links and category accents.
Version: 2.1.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: phani-tech-blog-v2
Tags: blog, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, right-sidebar
*/

:root {
  --bg: #f5f7fb;
  --surface: #ffffff;
  --surface-2: #f9fafc;
  --text: #172033;
  --muted: #667085;
  --line: #e5e9f0;
  --accent: #5b5bd6;
  --accent-2: #0ea5e9;
  --accent-dark: #4545b9;
  --code-bg: #111827;
  --code-text: #e5e7eb;
  --success: #10b981;
  --warning: #f59e0b;
  --danger: #ef4444;
  --radius: 20px;
  --radius-sm: 12px;
  --shadow: 0 18px 50px rgba(15, 23, 42, .08);
  --content: 850px;
  --wide: 1200px;
}

html[data-theme="dark"] {
  --bg: #0b1020;
  --surface: #12192b;
  --surface-2: #182136;
  --text: #ecf1f8;
  --muted: #aab4c5;
  --line: #27314a;
  --accent: #8a8af8;
  --accent-2: #38bdf8;
  --accent-dark: #a4a4ff;
  --code-bg: #090d16;
  --code-text: #e8edf6;
  --shadow: 0 18px 55px rgba(0, 0, 0, .28);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  line-height: 1.72;
  transition: background-color .25s ease, color .25s ease;
}
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-dark); }
img { max-width: 100%; height: auto; }
.container { width: min(92%, var(--wide)); margin: 0 auto; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(14px);
}
.header-inner {
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
}
.site-branding { display: flex; align-items: center; gap: 14px; }
.site-back-button {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 1px solid var(--line);
    border-radius: 50%;

    background: var(--surface);
    color: var(--text);

    font-size: 22px;
    font-weight: 600;
    line-height: 1;

    cursor: pointer;

    transition: 0.2s ease;
}

.site-back-button:hover {
    color: var(--accent);
    border-color: var(--accent);
    transform: translateX(-2px);
}
.custom-logo { max-height: 46px; width: auto; }
.site-title {
  margin: 0;
  font-family: "Poppins", sans-serif;
  font-size: 1.22rem;
  font-weight: 700;
  letter-spacing: -.025em;
}
.site-title a { color: var(--text); }
.site-description { margin: 1px 0 0; color: var(--muted); font-size: .78rem; }

.header-actions { display:flex; align-items:center; gap:12px; }
.theme-toggle {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--text);
  cursor: pointer;
  font-size: 1rem;
}

.main-nav ul {
  display:flex;
  gap:20px;
  flex-wrap:wrap;
  list-style:none;
  margin:0;
  padding:0;
}
.main-nav a {
  color: var(--text);
  font-weight:600;
  font-size:.9rem;
}
.main-nav a:hover,
.main-nav .current-menu-item > a { color:var(--accent); }

.mobile-menu-toggle {
  display:none;
  border:1px solid var(--line);
  background:var(--surface);
  color:var(--text);
  border-radius:10px;
  padding:8px 11px;
  cursor:pointer;
}

.hero {
  padding: 84px 0 68px;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 10% 15%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 34%),
    radial-gradient(circle at 88% 16%, color-mix(in srgb, var(--accent-2) 14%, transparent), transparent 29%);
}
.hero::after {
  content:"";
  position:absolute;
  inset:auto -10% -120px auto;
  width:420px;
  height:420px;
  background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, transparent), transparent);
  border-radius:50%;
  filter:blur(12px);
}
.hero-card { position:relative; z-index:1; max-width:920px; }
.hero-kicker {
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  background:color-mix(in srgb, var(--accent) 10%, var(--surface));
  border:1px solid color-mix(in srgb, var(--accent) 25%, var(--line));
  color:var(--accent);
  font-size:.75rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-bottom:16px;
}
.hero h1 {
  font-family:"Poppins", sans-serif;
  margin:0 0 18px;
  font-size:clamp(2.5rem, 5.5vw, 5rem);
  line-height:1.04;
  letter-spacing:-.055em;
}
.hero p {
  max-width:760px;
  margin:0;
  color:var(--muted);
  font-size:1.12rem;
}
.hero-actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:30px; }

.btn {
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:12px 18px;
  border-radius:12px;
  background:var(--accent);
  color:#fff;
  font-weight:700;
  box-shadow:0 8px 20px color-mix(in srgb, var(--accent) 18%, transparent);
}
.btn:hover { background:var(--accent-dark); color:#fff; }
.btn.secondary {
  background:var(--surface);
  color:var(--text);
  border:1px solid var(--line);
  box-shadow:none;
}

.topic-strip {
  background:var(--surface);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.topic-strip .container {
  display:flex;
  gap:10px;
  overflow-x:auto;
  padding-top:16px;
  padding-bottom:16px;
}
.topic-pill {
  white-space:nowrap;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid var(--line);
  background:var(--surface-2);
  color:var(--text);
  font-size:.84rem;
  font-weight:650;
}
.topic-pill:hover { border-color:var(--accent); color:var(--accent); }

.content-wrap {
  display:grid;
  grid-template-columns:minmax(0,1fr) 310px;
  gap:38px;
  padding:52px 0 78px;
}
.content-area { min-width:0; }

.section-heading {
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:18px;
  margin-bottom:22px;
}
.section-heading h2 {
  font-family:"Poppins", sans-serif;
  margin:0;
  font-size:1.65rem;
  letter-spacing:-.03em;
}

.post-card {
  position:relative;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:28px;
  box-shadow:var(--shadow);
  margin-bottom:26px;
  overflow:hidden;
}
.post-card::before {
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:4px;
  background:var(--category-accent, var(--accent));
}
.post-card h2 {
  margin:7px 0 10px;
  font-family:"Poppins", sans-serif;
  font-size:1.62rem;
  line-height:1.25;
  letter-spacing:-.028em;
}
.post-card h2 a { color:var(--text); }
.post-card h2 a:hover { color:var(--accent); }
.post-meta { color:var(--muted); font-size:.84rem; }
.post-excerpt { color:color-mix(in srgb, var(--text) 78%, var(--muted)); }
.post-thumb {
  margin:-28px -28px 22px;
  overflow:hidden;
  border-radius:20px 20px 0 0;
}
.post-thumb img {
  display:block;
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  transition:transform .35s ease;
}
.post-card:hover .post-thumb img { transform:scale(1.02); }

.read-more {
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-weight:700;
  margin-top:4px;
}

.sidebar .widget {
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:18px;
  padding:22px;
  margin-bottom:22px;
  box-shadow:0 8px 24px rgba(15,23,42,.04);
}
.widget-title {
  font-family:"Poppins",sans-serif;
  margin:0 0 14px;
  font-size:1rem;
}
.widget ul { margin:0; padding-left:18px; }

.author-mini {
  text-align:center;
}
.author-avatar img {
  border-radius:50%;
  width:88px;
  height:88px;
  object-fit:cover;
  border:4px solid var(--surface-2);
}
.author-mini h3 {
  font-family:"Poppins",sans-serif;
  margin:12px 0 4px;
}
.author-mini p { color:var(--muted); font-size:.9rem; }
.social-links {
  display:flex;
  justify-content:center;
  gap:9px;
  flex-wrap:wrap;
  margin-top:12px;
}
.social-links a {
  display:inline-flex;
  padding:7px 10px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--surface-2);
  font-size:.8rem;
  font-weight:700;
  color:var(--text);
}
.social-links a:hover { color:var(--accent); border-color:var(--accent); }

.single-wrap {
  width:min(92%, var(--content));
  margin:0 auto;
  padding:58px 0 82px;
}
.entry-header { margin-bottom:30px; }
.entry-title {
  font-family:"Poppins", sans-serif;
  font-size:clamp(2.2rem,4.5vw,3.7rem);
  line-height:1.12;
  letter-spacing:-.045em;
  margin:0 0 16px;
}
.entry-meta {
  display:flex;
  flex-wrap:wrap;
  gap:10px 14px;
  align-items:center;
  color:var(--muted);
  font-size:.86rem;
}
.meta-chip {
  padding:4px 8px;
  border-radius:999px;
  background:var(--surface-2);
  border:1px solid var(--line);
}
.featured-single {
  margin:0 0 28px;
  border-radius:20px;
  overflow:hidden;
  box-shadow:var(--shadow);
}
.featured-single img { display:block; width:100%; }

.entry-content {
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:clamp(24px,4vw,50px);
  box-shadow:var(--shadow);
}
.entry-content h2,
.entry-content h3,
.entry-content h4 {
  font-family:"Poppins",sans-serif;
  line-height:1.3;
  letter-spacing:-.02em;
  scroll-margin-top:100px;
}
.entry-content h2 { font-size:1.72rem; margin-top:1.8em; }
.entry-content h3 { font-size:1.32rem; margin-top:1.6em; }
.entry-content p { margin:0 0 1.25em; }
.entry-content blockquote {
  margin:1.8em 0;
  border-left:4px solid var(--accent);
  padding:15px 20px;
  background:color-mix(in srgb, var(--accent) 7%, var(--surface));
  border-radius:0 12px 12px 0;
}

.code-wrap { position:relative; margin:1.6em 0; }
.entry-content pre,
.wp-block-code {
  overflow-x:auto;
  background:var(--code-bg);
  color:var(--code-text);
  padding:22px;
  border-radius:14px;
  border:1px solid #263043;
  font-family:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:.9rem;
  line-height:1.65;
}
.entry-content code {
  font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
.entry-content :not(pre) > code {
  background:var(--surface-2);
  border:1px solid var(--line);
  padding:.14em .38em;
  border-radius:6px;
}
.copy-code {
  position:absolute;
  top:10px;
  right:10px;
  border:1px solid #3b455c;
  background:#1b2436;
  color:#e5e7eb;
  border-radius:8px;
  padding:6px 9px;
  font-size:.72rem;
  font-family:"Inter",sans-serif;
  cursor:pointer;
}
.copy-code:hover { background:#263148; }

.entry-content table {
  width:100%;
  border-collapse:collapse;
  margin:1.5em 0;
  font-size:.95rem;
}
.entry-content th,.entry-content td {
  border:1px solid var(--line);
  padding:10px 12px;
  text-align:left;
}
.entry-content th { background:var(--surface-2); }

.tech-note,.tech-warning,.tech-tip,.tech-important {
  border-radius:14px;
  padding:18px 20px;
  margin:24px 0;
}
.tech-note {
  background:color-mix(in srgb, var(--accent) 8%, var(--surface));
  border-left:4px solid var(--accent);
}
.tech-warning {
  background:color-mix(in srgb, var(--warning) 10%, var(--surface));
  border-left:4px solid var(--warning);
}
.tech-tip {
  background:color-mix(in srgb, var(--success) 9%, var(--surface));
  border-left:4px solid var(--success);
}
.tech-important {
  background:color-mix(in srgb, var(--danger) 8%, var(--surface));
  border-left:4px solid var(--danger);
}

.author-box {
  display:grid;
  grid-template-columns:90px 1fr;
  gap:20px;
  align-items:start;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:18px;
  padding:24px;
  margin-top:28px;
}
.author-box img { border-radius:50%; }
.author-box h3 {
  font-family:"Poppins",sans-serif;
  margin:0 0 6px;
}
.author-box p { margin:0; color:var(--muted); }

.related-posts {
  margin-top:34px;
}
.related-posts h2 {
  font-family:"Poppins",sans-serif;
  font-size:1.4rem;
}
.related-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}
.related-card {
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:14px;
  padding:16px;
}
.related-card h3 {
  font-family:"Poppins",sans-serif;
  font-size:.98rem;
  line-height:1.35;
  margin:0;
}
.related-card a { color:var(--text); }

.pagination,.nav-links { display:flex; gap:10px; flex-wrap:wrap; }
.page-numbers {
  background:var(--surface);
  border:1px solid var(--line);
  padding:8px 12px;
  border-radius:9px;
}
.page-numbers.current { background:var(--accent); color:#fff; }

.site-footer {
  border-top:1px solid var(--line);
  background:var(--surface);
  padding:40px 0;
  color:var(--muted);
  font-size:.9rem;
}
.footer-inner {
  display:flex;
  justify-content:space-between;
  gap:22px;
  flex-wrap:wrap;
  align-items:center;
}
.footer-social { display:flex; gap:12px; flex-wrap:wrap; }
.footer-social a { color:var(--muted); font-weight:650; }
.footer-social a:hover { color:var(--accent); }

.cat-oracle { --category-accent:#ef4444; }
.cat-postgresql { --category-accent:#336791; }
.cat-mysql { --category-accent:#00758f; }
.cat-exadata { --category-accent:#f97316; }
.cat-cloud { --category-accent:#0ea5e9; }
.cat-ai { --category-accent:#8b5cf6; }

.screen-reader-text {
  border:0; clip:rect(1px,1px,1px,1px); clip-path:inset(50%);
  height:1px; margin:-1px; overflow:hidden; padding:0; position:absolute; width:1px;
}

@media (max-width: 980px) {
  .content-wrap { grid-template-columns:1fr; }
  .sidebar { display:none; }
  .main-nav { display:none; width:100%; }
  .main-nav.open { display:block; }
  .main-nav ul { flex-direction:column; padding:14px 0 4px; }
  .mobile-menu-toggle { display:inline-block; }
  .header-inner { flex-wrap:wrap; padding:13px 0; }
  .header-actions { margin-left:auto; }
}
@media (max-width: 720px) {
  body { font-size:16px; }
  .hero { padding:54px 0 46px; }
  .post-card { padding:22px; }
  .post-thumb { margin:-22px -22px 18px; }
  .entry-content { padding:22px; }
  .author-box { grid-template-columns:1fr; text-align:center; }
  .author-box img { margin:auto; }
  .related-grid { grid-template-columns:1fr; }
}


/* About Me page */
.about-profile {
  display:grid;
  grid-template-columns:160px 1fr;
  gap:28px;
  align-items:start;
  margin-bottom:30px;
}
.about-profile-photo img {
  width:150px;
  height:150px;
  object-fit:cover;
  border-radius:50%;
  border:5px solid var(--surface-2);
  box-shadow:var(--shadow);
}
.about-profile h2 {
  font-family:"Poppins",sans-serif;
  margin:0 0 8px;
  font-size:1.7rem;
}
.about-profile .about-role {
  color:var(--muted);
  margin-bottom:14px;
}
.about-socials {
  display:flex;
  gap:9px;
  flex-wrap:wrap;
  margin-top:14px;
}
.about-socials a {
  display:inline-flex;
  padding:8px 12px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--surface-2);
  color:var(--text);
  font-size:.84rem;
  font-weight:700;
}
.about-socials a:hover {
  color:var(--accent);
  border-color:var(--accent);
}
.about-section {
  margin-top:34px;
}
.about-section h2 {
  font-family:"Poppins",sans-serif;
  font-size:1.45rem;
  margin-bottom:14px;
}
.about-list {
  margin:0;
  padding-left:20px;
}
.about-list li {
  margin-bottom:9px;
}
@media (max-width: 720px) {
  .about-profile {
    grid-template-columns:1fr;
    text-align:center;
  }
  .about-profile-photo img {
    margin:auto;
  }
  .about-socials {
    justify-content:center;
  }
}
/* All single blog post titles */
.single-post .entry-title,
.single-post h1.entry-title {
    font-size: 32px !important;
    line-height: 1.25 !important;
}

/* Blog content body */
.single-post .entry-content,
.single-post .entry-content p,
.single-post .entry-content li {
    font-size: 16px !important;
    line-height: 1.65 !important;
}

/* Justify paragraphs */
.single-post .entry-content p {
    text-align: justify;
} 

/* Headings inside blog content */
.single-post .entry-content h1 {
    font-size: 28px !important;
}

.single-post .entry-content h2 {
    font-size: 24px !important;
}

.single-post .entry-content h3 {
    font-size: 20px !important;
}

.single-post .entry-content h4 {
    font-size: 18px !important;
}
/* Center images and screenshots inside blog posts */
.single-post .entry-content img {
    display: block;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 100%;
    height: auto;
}

/* Center WordPress image blocks */
.single-post .entry-content .wp-block-image {
    text-align: center;
}

.single-post .entry-content .wp-block-image img {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Center images with captions */
.single-post .entry-content figure {
    margin-left: auto;
    margin-right: auto;
}

.single-post .entry-content figcaption {
    text-align: center;
}
/* Homepage hero heading */
.hero h1 {
    font-size: 52px !important;
    line-height: 1.1 !important;
}

/* Tablet */
@media (max-width: 900px) {
    .hero h1 {
        font-size: 44px !important;
    }
}

/* Mobile */
@media (max-width: 600px) {
    .hero h1 {
        font-size: 36px !important;
        line-height: 1.15 !important;
    }
}