* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { min-height: 100%; height: auto; }
body { font-family: 'Poppins','Segoe UI',sans-serif; background:#000; color:#fff; overflow-x:hidden; display:flex; flex-direction:column; min-height:100vh; }
nav { background: transparent; padding: 0; position: fixed; top: 0; left: 0; width: 100%; z-index: 9999; box-shadow: none; border-bottom: none; backdrop-filter: none; transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; pointer-events: auto; }
.nav--scrolled { background: linear-gradient(180deg, rgba(10,10,20,0.92) 0%, rgba(10,10,20,0.88) 100%); border-bottom: 1px solid rgba(255,255,255,0.08); backdrop-filter: blur(8px); box-shadow: 0 8px 20px rgba(0,0,0,0.35); }
.nav-container { max-width: 1200px; margin: 0 auto; display:flex; justify-content:space-between; align-items:center; padding:20px 30px; }
.nav-logo { font-size: 1.2em; font-weight: 900; display:flex; align-items:center; gap:8px; cursor:pointer; transition: transform 0.3s ease; }

/* Ensure logo + site title always appear (override any WP/core/plugin styles) */
.nav-logo-text{
  display:inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  max-width: none !important;
  overflow: visible !important;
  white-space: nowrap;
  line-height: 1;
}

/* If custom logo exists, keep title visible next to it */
.nav-logo .custom-logo-link{ flex: 0 0 auto; }
.nav-logo .custom-logo-link + .nav-logo-text{ display:inline-flex !important; }
.nav-logo:hover { transform: scale(1.05); }
.nav-logo-text {
  /* Use normal text color; gradient text was making it appear invisible in some browsers */
  color: #00c8ff;
  background: none;
  -webkit-background-clip: initial;
  -webkit-text-fill-color: currentColor;
  background-clip: initial;
  letter-spacing:2px;
  text-transform:none;
  font-size:1.15em;
  font-weight:700;
  text-decoration:none;
}
.nav-logo-text::after{ content:none !important; }
/* Custom logo support */
.nav-logo .custom-logo-link{ display:inline-flex; align-items:center; }
.nav-logo .custom-logo{ max-height:44px; height:auto; width:auto; display:block; }
.nav-links { display:flex; list-style:none; gap:28px; align-items:center; }
.nav-site-icon{ display:inline-flex; align-items:center; justify-content:center; margin-left:6px; border-radius:4px; overflow:hidden; }
.nav-site-icon img{ display:block; width:100%; height:100%; object-fit:contain; }
.nav-right { display:flex; align-items:center; gap:24px; }
.social-links { display:flex; align-items:center; gap:14px; }
.social-links a { display:inline-flex; align-items:center; justify-content:center; border-radius:9999px; transition: transform 0.2s ease; }
.social-links a:hover { transform: translateY(-2px) scale(1.03); }
.social-links .icon { width:28px; height:28px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; background: rgba(255,255,255,0.08); border:1.2px solid rgba(255,255,255,0.15); color: rgba(255,255,255,0.78); transition: all 0.2s ease; opacity:0.9; }
.social-links .icon:hover { transform: translateY(-2px) scale(1.05); opacity:1; border-color: rgba(255,255,255,0.25); }
.social-links .icon--fb:hover { color:#1877F2; background: rgba(24,119,242,0.12); border-color: rgba(24,119,242,0.3); }
.social-links .icon--wa:hover { color:#25D366; background: rgba(37,211,102,0.12); border-color: rgba(37,211,102,0.3); }
.social-links .icon--tg:hover { color:#29A9EA; background: rgba(41,169,234,0.12); border-color: rgba(41,169,234,0.3); }
.nav-links a { color:#00c8ff; text-decoration:none; font-weight:500; font-size:0.98rem; font-family:inherit; position:relative; transition: color 0.25s ease; text-transform:none; letter-spacing:0.2px; padding:0; border-radius:0; }
/* Ensure any standalone "Blog" link (e.g., footer inline) adopts link color in light mode too */
[data-theme="light"] .footer-inline a.blog-link{ color: var(--link); }
.nav-links a:hover { color:#ffd000; background:none; }
.nav-links a::after { content:''; position:absolute; bottom:-8px; left:0; width:0; height:2px; background:#ffd000; transition: width 0.25s ease; border-radius:2px; }
.nav-links a:hover::after { width:100%; background:#ffd000; }
.hero { background:#000; padding:120px 30px; position:relative; overflow:hidden; min-height:680px; display:flex; align-items:center; }
.hero::before, .hero::after { content:none !important; display:none !important; }
@keyframes float { 0%,100%{ transform: translateY(0px);} 50%{ transform: translateY(50px);} }
.hero-content { position:relative; z-index:1; width:100%; max-width:1200px; margin:0 auto; }
.site-main { flex: 1 0 auto; }
.hero-grid { display:grid; grid-template-columns:1fr; gap:60px; align-items:center; }
.hero-left { text-align:left; }
.hero-right { display:none; }
.hero-illustration { width:100%; max-width:520px; height:auto; filter: drop-shadow(0 30px 80px rgba(0,0,0,0.35)); }
.hero-badge { display:inline-flex; align-items:center; gap:10px; padding:8px 14px; border-radius:9999px; background: rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.15); color:#e7e7ff; font-weight:600; font-size:0.9em; margin-bottom:18px; backdrop-filter: blur(8px); }
.hero h1 { font-size: clamp(1.8rem, 4vw, 3rem); font-weight:900; letter-spacing:0.5px; text-transform:none; color:#fff; margin-bottom:16px; line-height:1.1; }
.hero p { font-size:1.15rem; color:#e7e7ff; margin-bottom:34px; line-height:1.7; font-weight:500; max-width:560px; }
.hero-buttons { display:flex; gap:16px; justify-content:flex-start; align-items:center; flex-wrap:wrap; margin-bottom:20px; }
.hero-btn { padding:16px 28px; font-size:1rem; font-weight:800; border:none; border-radius:9999px; cursor:pointer; transition: all 0.25s ease; text-transform:none; letter-spacing:0.3px; }
.hero-btn-primary { background: linear-gradient(135deg, #00c8ff 0%, #0099ff 100%); color:#000; }
.hero-btn-primary:hover { transform: translateY(-3px); }
.hero-btn-secondary { background: rgba(255,255,255,0.06); color:#e7e7ff; border:1.5px solid rgba(255,255,255,0.16); }
.hero-btn-secondary:hover { background: rgba(255,255,255,0.14); transform: translateY(-3px); }
@media (max-width: 992px) { .hero-grid{ grid-template-columns:1fr; gap:30px; text-align:center;} .hero-left{text-align:center;} .hero-buttons{ justify-content:center; flex-wrap:wrap; margin-bottom:0;} .hero p{ margin-left:auto; margin-right:auto;} .hero{ min-height:auto; align-items:flex-start; padding:140px 16px 0;} .container{ padding:40px 16px;} }
.container { max-width:1200px; margin:0 auto; padding:80px 30px; }
.section-title { text-align:center; font-size:3em; margin-bottom:60px; color:#fff; text-transform:uppercase; letter-spacing:3px; position:relative; font-weight:900; }
[data-theme="light"] .section-title { color:#0a0a0a; }
.section-title::after { content:''; display:block; width:150px; height:5px; background: linear-gradient(90deg,#00c8ff,#0099ff); margin:20px auto 0; border-radius:3px; }
.cards-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:50px; margin-top:50px; }
.card { background: linear-gradient(135deg, #0f1419 0%, #1a1f2e 100%); border-radius:20px; overflow:visible; box-shadow:none; transition: transform .5s cubic-bezier(.23,1,.320,1), border-color .5s cubic-bezier(.23,1,.320,1), scale .5s cubic-bezier(.23,1,.320,1); border:2px solid #00c8ff; position:relative; cursor:pointer; }
.card:hover { box-shadow:none; border-color:#00c8ff; }
.card-image-wrapper { position:relative; width:100%; height:200px; overflow:hidden; background: linear-gradient(135deg,#00c8ff 0%, #0099ff 100%); border-radius:18px 18px 0 0; }
.card-image { width:100%; height:100%; object-fit:cover; transition: transform .5s ease; will-change: transform; }
.card:hover .card-image { transform: scale(1.1) rotate(2deg); }
.card-image-overlay { position:absolute; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,0.3); transition: background .5s ease; }
.card:hover .card-image-overlay { background: rgba(255,0,127,0.2); }
.card-number { display:none; }
.card-content { padding:10px 16px; position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; gap:2px; }
.card-title { font-size:1.5em; color:#fff; margin:0 0 1px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; text-align:center; line-height:1.2; }
.card-description { font-size:.85em; color:#b0b0b0; text-align:center; line-height:1.4; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; max-height:2.8em; font-weight:400; letter-spacing:.2px; margin:0 0 3px; }
.card-button { background: linear-gradient(135deg, #00c8ff 0%, #0099ff 100%); color:#000; border:none; padding:9px 20px; border-radius:9999px; font-size:.95em; font-weight:900; cursor:pointer; transition: transform .3s cubic-bezier(.23,1,.32,1); width:auto; text-transform:none; letter-spacing:.5px; box-shadow:none; position:relative; overflow:hidden; text-shadow:none; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; will-change: transform; backface-visibility:hidden; -webkit-backface-visibility:hidden; display:inline-block; margin:2px auto 4px; }
.card-button:hover { transform: translateY(-3px); }
.card-button:active { transform: translateY(-1px); }
footer { background: linear-gradient(90deg, #0a0a0a 0%, #0f1419 50%, #0a0a0a 100%); padding:40px 30px; text-align:center; border-top:3px solid #00c8ff; margin-top:80px; position: static; }
footer p { color:#00c8ff; font-size:1em; font-weight:600; letter-spacing:1px; }
/* Footer inline row: text + links in one line */
.footer-inline { display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; }
.footer-inline p { margin:0; display:inline-block; }
.footer-inline > .menu-footer-container { display:inline-flex; }
.footer-inline > ul.footer-links { display:inline-flex; }
.footer-links { list-style:none; margin:0; padding:0; display:flex; gap:14px; align-items:center; }
.footer-links li { display:inline-flex; }
.footer-links a { text-decoration:none; color:#00c8ff; font-weight:600; position:relative; padding:0; border-radius:0; transition: color .25s ease, transform .2s ease; }
.footer-links a:hover { color:#ffd000; transform: translateY(-2px); }
.footer-links a::after { content:none; }
/* Special Blog link style: first letter large */
.footer-links a.blog-link::first-letter { font-size:1.15em; }
@media (max-width: 768px) { .nav-container{ flex-wrap:wrap; align-items:center; justify-content:space-between; padding:14px 16px;} .nav-logo{ order:0;} .social-links{ order:1; margin-left:auto; gap:10px;} .nav-links{ order:2; flex-basis:100%; display:flex; justify-content:flex-start; gap:16px; font-size:.92em; margin-top:8px;} .cards-grid{ grid-template-columns:1fr; gap:30px;} .section-title{ font-size:2em;} .card-content{ padding:10px 12px; gap:2px;} .card-title{ font-size:1.4em; margin-top:0; margin-bottom:2px;} .card-description{ margin-bottom:3px; } .card-button{ margin-bottom:4px; } }
@media (min-width: 993px) { .hero-grid{ grid-template-columns: 1.05fr 0.95fr; gap:60px; align-items:center; } .hero-right{ display:flex; justify-content:center; align-items:center; } .hero-right .hero-illustration{ display:none; } .hero-right-card{ width: clamp(420px, 44vw, 620px); min-height: clamp(180px, 22vw, 260px); padding:20px 22px; border: .8px solid #00c8ff; border-radius:20px; background: rgba(10,10,20,.45); backdrop-filter: blur(6px); box-shadow: 0 10px 30px rgba(0,0,0,.35); color:#e7e7ff; display:flex; flex-direction:column; gap:8px; } .hero-right-card h3{ margin:0 0 6px; font-size:1.35rem; color:#00c8ff; font-weight:800; letter-spacing:.5px; text-transform:uppercase; } .hero-right-card p{ margin:0 0 8px; line-height:1.6; color:#e7e7ff;} .hero-right-card ul{ margin:0; padding-left:18px; display:grid; gap:6px; color:#cfd8ff; font-size:.95rem; } .hero-right-tags{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:0; } .action-row{ display:flex; align-items:center; justify-content:flex-start; gap:10px 12px; flex-wrap:wrap; margin-top:8px; } .tag{ font-size:.78rem; font-weight:800; color:#00c8ff; background: rgba(0,200,255,.08); border:1px solid rgba(0,200,255,.45); padding:6px 10px; border-radius:9999px; letter-spacing:.3px; user-select:none; } .btn-contact{ align-self:flex-start; background: linear-gradient(135deg, #00c8ff 0%, #0099ff 100%); color:#000; text-decoration:none; padding:10px 16px; border-radius:9999px; font-size:.95rem; font-weight:900; letter-spacing:.3px; transition: transform .25s ease; display:inline-block; } .btn-contact:hover{ transform: translateY(-2px); } }
/* Admin bar offset for logged-in users */
.logged-in.admin-bar nav { top: 32px; }
@media screen and (max-width: 782px) {
  .logged-in.admin-bar nav { top: 46px; }
}

/* Admin bar z-index tweaks are not allowed in theme review.
   If admin bar overlaps with the theme header, handle it via a plugin or custom snippet. */
html { scroll-behavior: smooth; overflow-x: hidden; }

/* Fix: page headings/content should not touch the fixed header on pages (e.g., Services/About/Contact)
   Blog looked OK due to different grid spacing; apply a consistent top offset for non-front pages. */
body:not(.home) .site-main.container{
  padding-top: 90px;
}

@media (max-width: 768px){
  body:not(.home) .site-main.container{
    padding-top: 110px;
  }
}

/* Force header/nav to be on top and clickable on single posts */
body.single nav{ position: fixed; z-index: 99999 !important; pointer-events: auto !important; }
body.single nav *{ pointer-events: auto !important; }

/* Hide breadcrumb components on single posts (anywhere) */
body.single .breadcrumbs,
body.single .breadcrumb,
body.single .rank-math-breadcrumb,
body.single #breadcrumbs,
body.single .yoast-breadcrumbs,
body.single .trail-items,
body.single .bcn-breadcrumb,
body.single .bcn_breadcrumb_trail,
/* Also hide if someone wraps them in nav */
body.single nav .breadcrumbs,
body.single nav .breadcrumb,
body.single nav .rank-math-breadcrumb,
body.single nav #breadcrumbs,
body.single nav .yoast-breadcrumbs,
body.single nav .trail-items,
body.single nav .bcn-breadcrumb,
body.single nav .bcn_breadcrumb_trail,
/* Generic fallback: any element in nav that looks like breadcrumb */
body.single nav [aria-label*="breadcrumb" i],
body.single nav [class*="bread" i],
body.single nav [id*="bread" i],
/* If plugin injects direct anchors/spans into nav container (not menu/social/logo) */
body.single nav .nav-container > a:not(.nav-logo-text),
body.single nav .nav-container > p,
body.single nav .nav-container > span { display:none !important; }

/* Hide any header/hero titles on single posts */
body.single .hero h1,
body.single .hero .page-title,
body.single nav .page-title,
body.single header .page-title,
body.single .entry-header .entry-title,
body.single .site-header .entry-title,
body.single .site-header .page-title { display:none !important; visibility:hidden !important; }

/* Fallback: hide any stray title/breadcrumb link at very top of content on single posts */
body.single .site-main > a:first-child,
body.single .site-main > p:first-child > a:first-child,
body.single .site-main > div:first-child > a:first-child,
body.single article.single-post > a:first-child,
body.single article.single-post > p:first-child > a:first-child,
body.single article.single-post > div:first-child > a:first-child { display:none !important; }

/* Offset main content below fixed header on single posts */
body.single .site-main{ margin-top: 80px; position: relative; z-index: 1; }
/* Extra offset when admin bar is visible */
.logged-in.admin-bar body.single .site-main{ margin-top: 112px; }
@media screen and (max-width: 782px) {
  .logged-in.admin-bar body.single .site-main{ margin-top: 128px; }
}
/* Reduce top padding on single pages to keep total gap 20px below fixed nav */
body.single .site-main.container{ padding-top: 0; }
@media (max-width: 768px){
  html, body { overflow-x: hidden; }
  .single-content{ overflow-wrap:anywhere; word-break: break-word; }
}

/* Ensure page scroll is on window, not inner containers */
.site-main, .container { overflow-y: visible; }

/* Blog */
.blog-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:40px; margin-top:30px; }
.blog-grid--two{ grid-template-columns: repeat(2,1fr); }
.blog-card{ background: linear-gradient(135deg, #0f1419 0%, #1a1f2e 100%); border:1px solid rgba(0,200,255,.35); border-radius:16px; overflow:hidden; display:flex; flex-direction:column; }
.blog-thumb img{ width:100%; height:360px; object-fit:cover; display:block; }

/* Single post: keep related/recent in 2 columns but allow wider page */
body.single .related-posts .blog-grid--two,
body.single .recent-posts .blog-grid--two{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Make the single post page container full width */
body.single .site-main.container{
  max-width: none;
  width: 100%;
  padding-left: 30px;
  padding-right: 30px;
}

/* Single article should also be able to grow */
body.single .single-post{
  max-width: none;
  width: 100%;
}

/* Single post: related/recent cards
   - keep Read More visible even if title/excerpt are longer
   - shorter media area
   - no zoom
*/
body.single .related-posts .blog-card,
body.single .recent-posts .blog-card{
  display:flex;
  flex-direction:column;
}

body.single .related-posts .blog-content,
body.single .recent-posts .blog-content{
  display:flex;
  flex-direction:column;
  flex: 1;
  min-height: 0;
}

/* Clamp title/excerpt so button never gets pushed out */
body.single .related-posts .blog-title,
body.single .recent-posts .blog-title{
  display:-webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow:hidden;
}

body.single .related-posts .blog-excerpt,
body.single .recent-posts .blog-excerpt{
  display:-webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow:hidden;
}

/* Keep button stuck to bottom of card */
body.single .related-posts .blog-readmore,
body.single .recent-posts .blog-readmore{
  margin-top: auto;
  align-self: flex-start;
}

body.single .related-posts .blog-thumb,
body.single .recent-posts .blog-thumb{
  display:block;
}

body.single .related-posts .blog-thumb img,
body.single .recent-posts .blog-thumb img{
  width: 100%;
  height: 240px;
  object-fit: cover;
  background: transparent;
}

body.single .related-posts .blog-thumb img:hover,
body.single .recent-posts .blog-thumb img:hover{
  transform: none !important;
}

/* Mobile: related/recent 1 column + smaller thumb height */
@media (max-width: 768px){
  body.single .related-posts .blog-grid--two,
  body.single .recent-posts .blog-grid--two{
    grid-template-columns: 1fr;
  }

  body.single .related-posts .blog-thumb img,
  body.single .recent-posts .blog-thumb img{
    height: 180px;
  }
}
.blog-content{ padding:16px 18px; display:flex; flex-direction:column; gap:8px; }
.blog-title{ font-size:1.2rem; font-weight:800; letter-spacing:.3px; text-transform:none; margin:0; }
.blog-title a{ color:#fff; text-decoration:none; }
.blog-title a:hover{ color:#00c8ff; }
.blog-meta{ color:#b0b0b0; font-size:.85rem; display:flex; align-items:center; gap:8px; }
.blog-excerpt{ color:#cfd8ff; font-size:.95rem; line-height:1.5; margin:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis; }
.blog-readmore{ display:inline-block; margin-top:6px; }
.pagination{ margin-top:30px; text-align:center; }

.single-post{ max-width:860px; margin:0 auto; }
.single-thumb{ width:700px; height:400px; max-width:100%; margin:0 auto 24px; border-radius:16px; border:1px solid rgba(0,200,255,.35); overflow:hidden; position:relative; }
.single-thumb img{ width:100%; height:100%; object-fit:cover; display:block; border-radius:16px; }
.single-title{ font-size:2rem; font-weight:900; margin:16px auto 14px; text-align:center; max-width:860px; }
.single-meta{ color:#b0b0b0; margin-bottom:16px; }
.single-content{ color:#e7e7ff; line-height:1.8; }
.single-content img{ max-width:100%; height:auto; }
.post-nav{ display:flex; justify-content:space-between; gap:14px; margin:24px 0; }
.post-nav .prev::before,
.post-nav .next::after{ content:none !important; }
.related-posts, .recent-posts{ margin-top:40px; }
.section-subtitle{ font-size:1.4rem; font-weight:800; color:#00c8ff; margin:0 0 12px; text-transform:uppercase; letter-spacing:.5px; }
.recent-list{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.recent-list a{ color:#00c8ff; text-decoration:none; font-weight:700; }
.recent-date{ color:#888; font-size:.85rem; margin-left:8px; }

@media (max-width: 992px){ .blog-grid, .blog-grid--two{ grid-template-columns:1fr 1fr; gap:24px; } }
@media (max-width: 768px){
  .blog-grid, .blog-grid--two{ grid-template-columns:1fr; gap:20px; }

  /* Mobile blog page: smaller thumbnails */
  .blog-thumb img{ height: 220px; }

  /* Mobile: give page title some space below fixed nav */
  .site-main.container .section-title{ margin-top: 26px; }

  .single-thumb{ width:100%; height:auto; }
  .single-thumb img{ width:100%; height:auto; object-fit:contain; }
}

/* Force remove underline from Open Website buttons */
.card-button,
.card-button:link,
.card-button:visited,
.card-button:hover,
.card-button:focus,
.card-button:active,
.project-button,
.project-button:link,
.project-button:visited,
.project-button:hover,
.project-button:focus,
.project-button:active { text-decoration: none !important; }

/* Single posts: whitelist only the expected nav anchors (logo/menu/social) and hide any injected anchors (e.g., breadcrumbs or post title) */
body.single nav a { display:none !important; }
body.single nav .custom-logo-link,
body.single nav .nav-logo-text,
body.single nav .nav-links a,
body.single nav .social-links a,
body.single nav .custom-logo-link img,
body.single nav .nav-logo-text span { display:inline-flex !important; }
body.single nav .icon--theme{ display:inline-flex !important; }

/* Ensure site title/brand text is always visible */
.nav-logo-text{ display:inline-flex; align-items:center; }

/* Theme toggle button */
.icon--theme{ width:28px; height:28px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; background: rgba(255,255,255,0.08); border:1.2px solid rgba(255,255,255,0.15); color: rgba(255,255,255,0.78); cursor:pointer; transition: all .2s ease; }
.icon--theme:hover{ transform: translateY(-2px) scale(1.05); border-color: rgba(255,255,255,0.25); }
.icon--theme .icon-sun{ display:none; }
.icon--theme.is-light .icon-sun{ display:block; }
.icon--theme.is-light .icon-moon{ display:none; }

/* Light theme overrides */
/* WordPress core recommended classes */
.wp-caption{max-width:100%;}
.wp-caption-text{font-size:.9em;opacity:.8;}
.sticky{}
.gallery-caption{}
.bypostauthor{}
.alignright{float:right;margin:0 0 1em 1em;}
.alignleft{float:left;margin:0 1em 1em 0;}
.aligncenter{display:block;margin-left:auto;margin-right:auto;}

:root{ --bg:#000; --text:#fff; --muted:#cfd8ff; --link:#00c8ff; --accent:#0099ff; --border: rgba(0,200,255,.35); }

/* Dark mode: make site title match nav link cyan (avoid overrides) */
[data-theme="dark"] .nav-logo-text,
[data-theme="dark"] .nav-logo-text:visited,
[data-theme="dark"] .nav-logo-text:active,
[data-theme="dark"] .nav-logo-text:focus{
  color: #00c8ff !important;
}
[data-theme="dark"] .nav-logo-text:hover{
  color: #00c8ff !important;
}
[data-theme="light"]{ --bg:#ffffff; --text:#0a0a0a; --muted:#333; --link:#0066cc; --accent:#004c99; --border: rgba(0,0,0,.12); }

/* Light mode: keep site title cyan like nav links */
[data-theme="light"] .nav-logo-text,
[data-theme="light"] .nav-logo-text:visited,
[data-theme="light"] .nav-logo-text:active,
[data-theme="light"] .nav-logo-text:focus{
  color: #00c8ff !important;
}
[data-theme="light"] .nav-logo-text:hover{
  color: #00c8ff !important;
}

/* Apply variables */
body{ background: var(--bg); color: var(--text); }
/* Global subtle overlay across all pages in light mode */
[data-theme="light"] body{ background: linear-gradient(rgba(0,0,0,0.06), rgba(0,0,0,0.06)), var(--bg); }
.nav-logo-text, .footer-links a, .blog-title a, .recent-list a{ color: var(--link); }
.footer-links a:hover, .blog-title a:hover{ color: #ffd000; }

/* Nav and header */
[data-theme="light"] nav{ background: transparent; border-bottom:none; }
[data-theme="light"] .nav--scrolled{ background: rgba(255,255,255,0.92); border-bottom:1px solid rgba(0,0,0,0.08); box-shadow: 0 8px 20px rgba(0,0,0,0.08); }
[data-theme="light"] .nav-links a{ color:#00c8ff; }
/* Slightly darker green on hover in light mode */
[data-theme="light"] .nav-links a:hover{ color:#1e9e55; }
[data-theme="light"] .nav-links a::after{ background:#1e9e55; }
[data-theme="light"] .nav-links a:hover::after{ background:#1e9e55; }
[data-theme="light"] .social-links .icon{ background: rgba(0,0,0,0.06); border-color: rgba(0,0,0,0.12); color:#222; }
[data-theme="light"] .social-links .icon:hover{ border-color: rgba(0,0,0,0.2); }
[data-theme="light"] .icon--theme{ background: rgba(0,0,0,0.06); border-color: rgba(0,0,0,0.12); color:#222; }

/* Cards and sections */
[data-theme="light"] .card{ background: linear-gradient(135deg, #ffffff 0%, #f7f9fc 100%); border-color: var(--border); }
[data-theme="light"] .card-title{ color:#0a0a0a; }
[data-theme="light"] .card-description{ color:#333; }
[data-theme="light"] .card-image-overlay{ background: rgba(0,0,0,0.15); }

/* Blog and single */
[data-theme="light"] .blog-card{ background: #fff; border-color: var(--border); }
[data-theme="light"] .blog-content{ color:#222; }
/* Light mode: blog card 2-line paragraph full black like single */
[data-theme="light"] .blog-card .blog-excerpt{ color:#000; }
[data-theme="light"] .blog-meta{ color:#555; }
[data-theme="light"] .single-thumb{ border-color: var(--border); }
[data-theme="light"] .single-content{ color:#222; }
[data-theme="light"] .recent-date{ color:#666; }
[data-theme="light"] body.single .related-posts .blog-excerpt,
[data-theme="light"] body.single .recent-posts .blog-excerpt{ color:#000; }

/* Footer */
[data-theme="light"] footer{ background: linear-gradient(90deg, #f7f9fc 0%, #ffffff 50%, #f7f9fc 100%); border-top:3px solid var(--link); }
[data-theme="light"] footer p{ color: var(--link); }

/* Light theme: hero section overrides */
[data-theme="light"] .hero{ background:#ffffff; }
[data-theme="light"] .hero h1{ color:#0a0a0a; }
[data-theme="light"] .hero p{ color:#222; }
[data-theme="light"] .hero-badge{ background: rgba(0,0,0,0.06); border:1px solid rgba(0,0,0,0.12); color:#0a0a0a; }
[data-theme="light"] .hero-btn-secondary{ background: rgba(0,0,0,0.06); color:#0a0a0a; border:1.5px solid rgba(0,0,0,0.16); }
[data-theme="light"] .hero-btn-secondary:hover{ background: rgba(0,0,0,0.12); }
/* Match hero right card to hero background in light mode */
[data-theme="light"] .hero-right-card{ background: rgba(255,255,255,0.9); color:#222; border-color: var(--border); box-shadow: 0 10px 30px rgba(0,0,0,0.08); position:relative; }
[data-theme="light"] .hero-right-card::after{ content:''; position:absolute; inset:0; background: rgba(0,0,0,0.06); border-radius: inherit; z-index:0; pointer-events:none; }
[data-theme="light"] .hero-right-card > *{ position:relative; z-index:1; }
/* Light mode: hero subtle overlay on top of background but below content */
[data-theme="light"] .hero{ position:relative; }
[data-theme="light"] .hero::after{ content:'' !important; display:block !important; position:absolute; inset:0; background: rgba(0,0,0,0.06); z-index:0; pointer-events:none; }