/*
Theme Name: CW Bianca Voyage
Theme URI: http://cwbiancavoy.blog/
Author: CW Bianca Voyage
Author URI: http://cwbiancavoy.blog/
Description: A dark, gradient-driven blogging theme for CW Bianca Voyage — a technology blog covering AI, gadgets, software, security and the future of computing. Built around a "digital nebula" visual language: layered gradient orbs, glass panels and soft depth in place of flat cards.
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: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cwbiancavoyage
Tags: blog, technology, dark, gradient, one-column, two-columns, custom-menu, featured-images, translation-ready

CW Bianca Voyage WordPress Theme, (C) 2026 CW Bianca Voyage
CW Bianca Voyage is distributed under the terms of the GNU GPL v2 or later.
*/

/* -------------------------------------------------------------------------
   0. DESIGN TOKENS
   Palette: deep space navy base, indigo/cyan/violet/rose gradient family.
   Type: Space Grotesk (display) + Inter (body/UI).
------------------------------------------------------------------------- */
:root{
  --bg-deep:      #0a0f1e;
  --bg-panel:     #0f1830;
  --bg-panel-2:   #131e3d;
  --line:         rgba(241,245,251,.09);
  --line-strong:  rgba(241,245,251,.16);

  --ink:          #eef2fb;
  --ink-muted:    #93a2c2;
  --ink-faint:    #5c6d90;

  --indigo:       #6d6af5;
  --indigo-soft:  #8b89ff;
  --cyan:         #35d0f5;
  --violet:       #a876f0;
  --rose:         #f45fa0;
  --amber:        #f5b94d;

  --grad-nebula: radial-gradient(circle at 20% 20%, rgba(109,106,245,.55), transparent 55%),
                 radial-gradient(circle at 80% 15%, rgba(53,208,245,.4), transparent 50%),
                 radial-gradient(circle at 60% 80%, rgba(168,118,240,.45), transparent 55%),
                 radial-gradient(circle at 10% 85%, rgba(244,95,160,.3), transparent 50%);
  --grad-line:   linear-gradient(90deg, var(--indigo), var(--cyan) 45%, var(--violet) 75%, var(--rose));

  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 10px;

  --font-display: 'Space Grotesk', 'Segoe UI', sans-serif;
  --font-body: 'Inter', 'Segoe UI', sans-serif;

  --maxw: 1180px;
}

@media (prefers-color-scheme: light){
  /* Theme is intentionally dark-first; kept identical in light OS mode per brief. */
}

/* -------------------------------------------------------------------------
   1. RESET & BASE
------------------------------------------------------------------------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  background: var(--bg-deep);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body::before{
  content:"";
  position: fixed;
  inset: -10% -10% auto -10%;
  height: 900px;
  background: var(--grad-nebula);
  filter: blur(10px);
  opacity: .55;
  pointer-events: none;
  z-index: 0;
}
img{ max-width: 100%; height: auto; display: block; }
a{ color: var(--indigo-soft); text-decoration: none; }
a:hover{ color: var(--cyan); }
ul, ol{ padding-left: 1.2em; }
h1,h2,h3,h4{
  font-family: var(--font-display);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 .5em;
  color: #fff;
}
h1{ font-size: clamp(2.2rem, 4vw, 3.6rem); }
h2{ font-size: clamp(1.7rem, 3vw, 2.4rem); }
h3{ font-size: 1.35rem; }
p{ margin: 0 0 1.1em; }
p:last-child{ margin-bottom: 0; }
::selection{ background: var(--violet); color: #fff; }
:focus-visible{ outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 4px; }

.container{ max-width: var(--maxw); margin: 0 auto; padding: 0 24px; position: relative; z-index: 1; }
.visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.screen-reader-text{ position:absolute; left:-9999px; }

/* buttons */
.btn{
  display: inline-flex; align-items: center; gap: .5em;
  padding: .8em 1.5em;
  border-radius: 100px;
  font-family: var(--font-display);
  font-size: .95rem;
  font-weight: 500;
  border: 1px solid var(--line-strong);
  color: var(--ink);
  background: rgba(255,255,255,.03);
  transition: border-color .2s ease, transform .2s ease, background .2s ease;
}
.btn:hover{ border-color: var(--cyan); color: #fff; transform: translateY(-2px); }
.btn-primary{
  border: none;
  background: var(--grad-line);
  color: #08101f;
  font-weight: 600;
}
.btn-primary:hover{ color: #08101f; filter: brightness(1.08); }

/* -------------------------------------------------------------------------
   2. HEADER
------------------------------------------------------------------------- */
.site-header{
  position: sticky; top: 0; z-index: 50;
  background: rgba(10,15,30,.72);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
}
.site-header-inner{
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 24px;
}
.site-branding{ display: flex; align-items: center; gap: 12px; }
.site-branding .orb{
  width: 34px; height: 34px; border-radius: 50%;
  background: conic-gradient(from 200deg, var(--indigo), var(--cyan), var(--violet), var(--rose), var(--indigo));
  box-shadow: 0 0 24px rgba(109,106,245,.6);
  flex: none;
}
.site-title{ font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; color: #fff; margin:0; letter-spacing:-.01em; }
.site-title a{ color:#fff; }
.site-description{ display:none; }

.primary-nav ul{ list-style:none; display:flex; gap: 28px; margin:0; padding:0; }
.primary-nav a{
  font-family: var(--font-display); font-size: .95rem; color: var(--ink-muted);
  padding: 6px 0; border-bottom: 2px solid transparent;
}
.primary-nav a:hover, .primary-nav .current-menu-item a{ color:#fff; border-color: var(--cyan); }

.menu-toggle{
  display:none; background:none; border:1px solid var(--line-strong); color:#fff;
  width:42px; height:42px; border-radius: 10px; font-size:1.2rem; cursor:pointer;
}

@media (max-width: 860px){
  .menu-toggle{ display:block; }
  .primary-nav{
    position:fixed; inset: 74px 16px auto 16px; background: var(--bg-panel);
    border:1px solid var(--line); border-radius: var(--radius-md);
    padding: 10px; display:none; box-shadow: 0 30px 60px rgba(0,0,0,.5);
  }
  .primary-nav.is-open{ display:block; }
  .primary-nav ul{ flex-direction:column; gap:0; }
  .primary-nav a{ display:block; padding: 12px 10px; border-bottom:1px solid var(--line); }
}

/* -------------------------------------------------------------------------
   3. HERO (front page)
------------------------------------------------------------------------- */
.hero{ padding: 90px 0 70px; position:relative; overflow:hidden; }
.hero-grid{ display:grid; grid-template-columns: 1.1fr .9fr; gap: 50px; align-items:center; }
.hero-eyebrow-row{ display:flex; align-items:center; gap:10px; margin-bottom: 18px; color: var(--ink-muted); font-size:.92rem; }
.hero-eyebrow-row .dot{ width:8px; height:8px; border-radius:50%; background: var(--cyan); box-shadow:0 0 10px var(--cyan); }
.hero h1{ margin-bottom: .4em; }
.hero .lede{ font-size: 1.15rem; color: var(--ink-muted); max-width: 46ch; }
.hero-actions{ display:flex; gap:14px; margin-top: 30px; flex-wrap: wrap; }

.hero-art{ position:relative; height: 420px; }
.blob{ position:absolute; border-radius:50%; filter: blur(2px); }
.blob-1{
  width:300px; height:300px; top:10px; right:40px;
  background: radial-gradient(circle at 35% 30%, #b7b4ff, var(--indigo) 45%, #241f6b 80%);
  box-shadow: -30px 40px 90px rgba(109,106,245,.55), inset -20px -20px 60px rgba(0,0,0,.35), inset 15px 15px 30px rgba(255,255,255,.25);
}
.blob-2{
  width:170px; height:170px; bottom:20px; left:0;
  background: radial-gradient(circle at 35% 30%, #9df1ff, var(--cyan) 45%, #0a5b73 80%);
  box-shadow: -18px 24px 60px rgba(53,208,245,.5), inset -14px -14px 40px rgba(0,0,0,.3), inset 10px 10px 20px rgba(255,255,255,.3);
}
.blob-3{
  width:120px; height:120px; top:60px; left:60px;
  background: radial-gradient(circle at 35% 30%, #f3cdea, var(--rose) 45%, #7a123f 80%);
  box-shadow: -14px 18px 50px rgba(244,95,160,.5), inset -10px -10px 30px rgba(0,0,0,.3), inset 8px 8px 16px rgba(255,255,255,.3);
}
.ring{
  position:absolute; border-radius:50%; border: 1px solid var(--line-strong);
}
.ring-1{ width:380px; height:380px; top:-10px; right:0; }
.ring-2{ width:220px; height:220px; bottom:-10px; left:30px; border-color: rgba(53,208,245,.25); }

@media (max-width: 860px){
  .hero-grid{ grid-template-columns: 1fr; }
  .hero-art{ height: 280px; }
}

/* -------------------------------------------------------------------------
   4. SECTIONS / BENTO GRID
------------------------------------------------------------------------- */
.section{ padding: 70px 0; }
.section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap: 20px; margin-bottom: 34px; flex-wrap:wrap; }
.section-head p{ color: var(--ink-muted); max-width: 50ch; margin-top:.3em; }
.section-head .btn{ flex:none; }

.panel{
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01));
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(6px);
}

.bento{
  display:grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 22px;
}
.bento .card.feature{ grid-column: span 4; grid-row: span 2; }
.bento .card.tall{ grid-column: span 2; grid-row: span 2; }
.bento .card.wide{ grid-column: span 3; }
.bento .card.reg{ grid-column: span 3; }

@media (max-width: 960px){
  .bento{ grid-template-columns: 1fr 1fr; }
  .bento .card.feature, .bento .card.tall, .bento .card.wide, .bento .card.reg{ grid-column: span 2; }
}
@media (max-width: 620px){
  .bento{ grid-template-columns: 1fr; }
}

.card{
  position:relative;
  display:flex; flex-direction:column;
  padding: 26px;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: var(--bg-panel);
  overflow:hidden;
  transition: border-color .25s ease, transform .25s ease;
}
.card:hover{ border-color: var(--line-strong); transform: translateY(-3px); }
.card::before{
  content:""; position:absolute; inset:0; opacity:.5; pointer-events:none;
  background: radial-gradient(circle at 90% -10%, rgba(109,106,245,.35), transparent 60%);
}
.card .cat-pill{
  align-self:flex-start;
  font-family: var(--font-display); font-size:.78rem;
  padding: 5px 12px; border-radius:100px;
  border:1px solid var(--line-strong); color: var(--cyan); margin-bottom: 14px;
  position: relative; z-index:1;
}
.card h3{ position:relative; z-index:1; }
.card h3 a{ color:#fff; }
.card h3 a:hover{ color: var(--cyan); }
.card .excerpt{ color: var(--ink-muted); font-size:.96rem; position:relative; z-index:1; }
.card .meta{ margin-top:auto; padding-top: 16px; font-size:.85rem; color: var(--ink-faint); position:relative; z-index:1; }
.card.feature{ justify-content:flex-end; min-height: 320px; }
.card.feature .thumb{
  position:absolute; inset:0;
  background: var(--grad-nebula);
}
.card.feature .thumb img{ width:100%; height:100%; object-fit:cover; opacity:.55; }

/* category chips row */
.chip-row{ display:flex; flex-wrap:wrap; gap: 12px; }
.chip{
  display:flex; align-items:center; gap:10px;
  padding: 12px 18px; border-radius: 100px;
  border: 1px solid var(--line); background: var(--bg-panel);
  color: var(--ink); font-family: var(--font-display); font-size:.92rem;
}
.chip .swatch{ width:10px; height:10px; border-radius:50%; }
.chip:hover{ border-color: var(--cyan); color:#fff; }

/* newsletter */
.newsletter{
  padding: 50px; text-align:center;
  background: var(--grad-nebula), var(--bg-panel-2);
}
.newsletter h2{ margin-bottom:.3em; }
.newsletter p{ color: var(--ink-muted); max-width:52ch; margin: 0 auto 26px; }
.newsletter form{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.newsletter input[type=email]{
  padding: .9em 1.2em; border-radius: 100px; border:1px solid var(--line-strong);
  background: rgba(255,255,255,.04); color:#fff; min-width: 280px; font-family: var(--font-body);
}

/* -------------------------------------------------------------------------
   5. BLOG LIST / ARCHIVE
------------------------------------------------------------------------- */
.page-header-band{ padding: 60px 0 30px; }
.page-header-band .kicker{ color: var(--cyan); font-family: var(--font-display); margin-bottom:.4em; display:block; }
.post-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
@media (max-width: 760px){ .post-grid{ grid-template-columns: 1fr; } }

.pagination{ display:flex; gap:10px; justify-content:center; margin: 50px 0; }
.pagination a, .pagination span{
  min-width:42px; height:42px; display:inline-flex; align-items:center; justify-content:center;
  border-radius: 10px; border:1px solid var(--line); color: var(--ink-muted);
}
.pagination .current{ background: var(--grad-line); color:#08101f; border:none; font-weight:600; }

/* -------------------------------------------------------------------------
   6. SINGLE POST / PAGE
------------------------------------------------------------------------- */
.single-header{ padding: 70px 0 30px; text-align:left; max-width: 780px; margin:0 auto; }
.single-header .cat-pill{ display:inline-block; font-family: var(--font-display); font-size:.8rem; color: var(--cyan); border:1px solid var(--line-strong); border-radius:100px; padding:5px 14px; margin-bottom: 18px; }
.single-header .meta-row{ color: var(--ink-muted); font-size:.95rem; margin-top: 14px; }
.single-thumb{ max-width: 900px; margin: 30px auto; border-radius: var(--radius-lg); overflow:hidden; border:1px solid var(--line); }

.entry-content{ max-width: 720px; margin: 0 auto; font-size:1.08rem; }
.entry-content h2{ margin-top:1.6em; }
.entry-content h3{ margin-top:1.4em; }
.entry-content blockquote{
  margin: 2em 0; padding: 1.2em 1.6em; border-left: 3px solid var(--cyan);
  background: var(--bg-panel); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--ink); font-style: italic;
}
.entry-content pre{
  background: #060a16; border:1px solid var(--line); border-radius: var(--radius-sm);
  padding: 18px; overflow-x:auto; font-size:.9rem;
}
.entry-content code{ background: rgba(255,255,255,.06); padding: .15em .4em; border-radius: 4px; font-size:.92em; }
.entry-content pre code{ background:none; padding:0; }
.entry-content ul li, .entry-content ol li{ margin-bottom:.5em; }
.entry-content img{ border-radius: var(--radius-md); }
.entry-content a{ text-decoration: underline; text-decoration-color: rgba(53,208,245,.5); text-underline-offset: 3px; }

.tags-row{ max-width: 720px; margin: 40px auto 0; display:flex; gap:10px; flex-wrap:wrap; }
.tags-row a{ font-size:.85rem; border:1px solid var(--line); padding:6px 12px; border-radius:100px; color: var(--ink-muted); }

.author-box{
  max-width:720px; margin: 50px auto 0; padding: 26px; border-radius: var(--radius-md);
  border:1px solid var(--line); background: var(--bg-panel); display:flex; gap:18px; align-items:center;
}
.author-box .orb-sm{ width:52px; height:52px; border-radius:50%; flex:none; background: conic-gradient(from 200deg, var(--indigo), var(--cyan), var(--violet), var(--rose)); }

.related-posts{ max-width: 900px; margin: 60px auto 0; }

/* page (non-post) content width */
.page .entry-content{ max-width: 780px; }

/* contact form */
.contact-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items:start; }
@media (max-width: 800px){ .contact-grid{ grid-template-columns: 1fr; } }
.wpcf-field{ margin-bottom: 18px; }
.wpcf-field label{ display:block; font-family: var(--font-display); font-size:.9rem; margin-bottom:6px; color: var(--ink-muted); }
.wpcf-field input, .wpcf-field textarea{
  width:100%; padding: .9em 1em; border-radius: var(--radius-sm); border: 1px solid var(--line-strong);
  background: rgba(255,255,255,.03); color:#fff; font-family: var(--font-body); font-size: 1rem;
}
.wpcf-field textarea{ min-height: 140px; resize:vertical; }
.contact-info-card{ padding: 30px; }
.contact-info-card ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:18px; }
.contact-info-card li{ display:flex; gap:14px; align-items:flex-start; }
.contact-info-card .ico{ width:38px; height:38px; border-radius:10px; background: var(--grad-line); flex:none; }

/* comments */
.comments-area{ max-width:720px; margin: 60px auto 0; }
.comment-list{ list-style:none; margin:0; padding:0; }
.comment-body{ padding: 20px 0; border-bottom:1px solid var(--line); }
.comment-respond input, .comment-respond textarea{
  width:100%; padding:.8em 1em; border-radius: var(--radius-sm); border:1px solid var(--line-strong);
  background: rgba(255,255,255,.03); color:#fff; margin-bottom:14px;
}

/* -------------------------------------------------------------------------
   7. SIDEBAR / WIDGETS
------------------------------------------------------------------------- */
.widget{ padding: 24px; margin-bottom: 22px; border-radius: var(--radius-md); border:1px solid var(--line); background: var(--bg-panel); }
.widget-title{ font-family: var(--font-display); font-size:1rem; color:#fff; margin-bottom: 14px; text-transform:none; }
.widget ul{ list-style:none; margin:0; padding:0; }
.widget li{ padding: 8px 0; border-bottom:1px solid var(--line); font-size:.95rem; }
.widget li:last-child{ border-bottom:none; }

/* -------------------------------------------------------------------------
   8. FOOTER
------------------------------------------------------------------------- */
.site-footer{ margin-top: 80px; border-top:1px solid var(--line); padding: 60px 0 30px; position:relative; z-index:1; }
.footer-grid{ display:grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 40px; }
@media (max-width: 760px){ .footer-grid{ grid-template-columns: 1fr 1fr; } }
.footer-grid h4{ font-family: var(--font-display); font-size:.95rem; color:#fff; margin-bottom: 16px; }
.footer-grid ul{ list-style:none; margin:0; padding:0; }
.footer-grid li{ margin-bottom: 10px; }
.footer-grid a{ color: var(--ink-muted); }
.footer-brand-blurb{ color: var(--ink-muted); max-width: 34ch; margin-top: 14px; font-size:.95rem; }
.footer-bottom{
  margin-top: 50px; padding-top: 26px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px;
  font-size:.85rem; color: var(--ink-faint);
}
.social-row{ display:flex; gap: 12px; }
.social-row a{
  width: 38px; height:38px; border-radius:50%; border:1px solid var(--line-strong);
  display:flex; align-items:center; justify-content:center; color: var(--ink-muted);
}
.social-row a:hover{ border-color: var(--cyan); color:#fff; }

/* 404 */
.error-404{ text-align:center; padding: 100px 0; }
.error-404 .code{ font-family: var(--font-display); font-size: 7rem; background: var(--grad-line); -webkit-background-clip:text; background-clip:text; color:transparent; line-height:1; }

/* utility */
.mt-0{ margin-top:0; }
.text-center{ text-align:center; }