/*
Theme Name: OpeneraTech (Navy + Cyan / Amber)
Description: Bootstrap 5 + Material-inspired styling with brand colors from the logo.
*/

/* ---------- Brand Palette (from logo) ---------- */
:root{
  /* Primary = electric cyan; Accent = warm amber; Surfaces lean navy */
  --ot-primary: #00C2FF;        /* Electric cyan */
  --ot-primary-600:#00A8E8;     /* Deeper cyan */
  --ot-primary-700:#008ECF;     /* Even deeper cyan */
  --ot-primary-200:#99E6FF;     /* Light cyan */
  --ot-primary-50:#E6F9FF;      /* Very light cyan tint */
  --ot-accent:#FFC233;          /* Amber/yellow from tagline + arrow */
  --ot-on-primary:#ffffff;

  /* Neutrals / Surface */
  --ot-dark:#071523;            /* Deep navy */
  --ot-body:#0f172a;            /* slate/navy for text on light */
  --ot-muted:#6b7280;           /* slate-500 */
  --ot-bg:#ffffff;              /* keep main surface light */
  --ot-soft:#f0fbff;            /* soft surface (cyan tint) */

  /* Feedback (slightly tuned to brand) */
  --ot-success:#24a148;
  --ot-warning:#f59e0b;
  --ot-danger:#d32f2f;

  /* Elevation (unchanged) */
  --elev-1: 0 1px 2px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.10);
  --elev-2: 0 4px 6px rgba(0,0,0,.10), 0 2px 4px rgba(0,0,0,.08);
  --elev-3: 0 10px 15px rgba(0,0,0,.12), 0 4px 6px rgba(0,0,0,.08);
}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Roboto',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  color:var(--ot-body);
  background:var(--ot-bg);
  line-height:1.6;
}

/* Optional font overrides you declared */
h1,h2,h3,h4,h5,h6 { font-family: "Montserrat", sans-serif; }
p { font-family: "Poppins", sans-serif; }
button,input,textarea { font-family: "Roboto", sans-serif; }
.small-note { font-family: "Manrope", sans-serif; }

/* Links */
a{
  color:var(--ot-primary);
  text-decoration:none;
}
a:hover{
  color:var(--ot-primary-700);
  text-decoration:underline;
}

/* Images */
img{
  max-width:100%;
  height:auto;
  border-radius:.25rem;
}

/* ---------- Header / Navbar ---------- */
header.site-header .navbar{
  border-bottom:1px solid rgba(0,194,255,.18);
  background:#fff;
  box-shadow: var(--elev-1);
}
.navbar-light .navbar-nav .nav-link{
  color:#374151;
  border-radius:.5rem;
  padding:.5rem .75rem;
}
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus,.current-menu-item .nav-link{
  color:var(--ot-primary);
  background:var(--ot-primary-50);
}
.navbar-light .navbar-nav .nav-link.active{
  color:var(--ot-primary-700);
  font-weight:600;
}

/* Brand */
.brand-logo img{
  height:40px;
  width:auto;
}

/* ---------- Hero ---------- */
.ot-hero{
  padding:72px 0;
  background:linear-gradient(180deg, var(--ot-soft) 0%, #ffffff 100%);
}
.ot-hero h1{
  font-weight:800;
  letter-spacing:-.5px;
  color:#111827;
}
.ot-hero .lead{
  font-size:1.15rem;
  color:#4b5563;
}

/* ---------- Cards ---------- */
.card{
  border:0;
  border-radius:1rem;
  box-shadow:var(--elev-1);
  transition:transform .12s ease, box-shadow .12s ease;
  background:#fff;
}
.card:hover{
  transform:translateY(-2px);
  box-shadow:var(--elev-2);
}
.card .card-title{
  color:#111827;
  font-weight:700;
}
.card .card-subtitle{
  color:var(--ot-muted);
}

/* ---------- Buttons (Bootstrap overrides) ---------- */
.btn{
  border-radius:.75rem;
  font-weight:600;
  letter-spacing:.2px;
  box-shadow: var(--elev-1);
  border:0;
}
.btn:focus{
  box-shadow:0 0 0 .25rem rgba(0,194,255,.28);
}

.btn-primary{
  color:var(--ot-on-primary);
  background-color:var(--ot-primary);
}
.btn-primary:hover{ background-color:var(--ot-primary-600); }
.btn-primary:active{ background-color:var(--ot-primary-700); }

.btn-outline-primary{
  color:var(--ot-primary);
  border:1px solid var(--ot-primary);
  background:transparent;
}
.btn-outline-primary:hover{
  color:var(--ot-on-primary);
  background:var(--ot-primary);
  border-color:var(--ot-primary);
}

/* Accent button (amber from logo tagline/arrow) */
.btn-accent{
  color:#0b1320;
  background:var(--ot-accent);
}
.btn-accent:hover{
  background:#e3ad24;
}

/* ---------- Forms ---------- */
.form-control{
  border-radius:.75rem;
  border:1px solid rgba(0,194,255,.3);
}
.form-control:focus{
  border-color:var(--ot-primary);
  box-shadow:0 0 0 .25rem rgba(0,194,255,.28);
}
.form-check-input:focus{
  box-shadow:0 0 0 .25rem rgba(0,194,255,.28);
}
.form-select{
  border-radius:.75rem;
  border:1px solid rgba(0,194,255,.3);
}

/* ---------- Badges / Alerts ---------- */
.badge.bg-primary{
  background-color:var(--ot-primary)!important;
}
.alert-primary{
  color:#064c63;
  background-color:var(--ot-primary-50);
  border-color:var(--ot-primary-200);
}

/* ---------- Footer (deep navy like app icon) ---------- */
.site-footer{
  background: linear-gradient(180deg, #0b1426 0%, #07101f 100%);
  color:#d6f3ff;
  padding:40px 0 20px;
}
.site-footer a{ color:#bfeaff; }
.site-footer a:hover{ color:#ffffff; }
.site-footer .footer-bottom{
  border-top:1px solid rgba(191,234,255,.16);
  margin-top:20px;
  padding-top:12px;
  font-size:.9rem;
  color:#a9daff;
}

/* ---------- Widgets ---------- */
.widget{
  margin-bottom:24px;
  background:#fff;
  border-radius:1rem;
  padding:1rem;
  box-shadow:var(--elev-1);
}
.widget-title{
  font-size:1.05rem;
  font-weight:700;
  margin-bottom:.75rem;
  color:#111827;
  border-left:4px solid var(--ot-primary);
  padding-left:.5rem;
}

/* ---------- Post meta ---------- */
.post-meta{
  color:var(--ot-muted);
  font-size:.9rem;
}

/* ---------- Pagination ---------- */
.pagination .page-numbers{
  display:inline-block;
  padding:.5rem .75rem;
  border:1px solid rgba(0,194,255,.3);
  border-radius:.75rem;
  margin:0 .15rem;
  color:#374151;
  background:#fff;
}
.pagination .page-numbers:hover{
  background:var(--ot-primary-50);
  border-color:var(--ot-primary-200);
  color:var(--ot-primary-700);
}
.pagination .current{
  background:var(--ot-primary);
  border-color:var(--ot-primary);
  color:#fff;
}

/* ---------- Tables ---------- */
.table{
  --bs-table-striped-bg: var(--ot-primary-50);
  --bs-table-hover-bg: rgba(0,194,255,.08);
  border-color: rgba(17,24,39,.08);
}
.table thead th{
  border-bottom:2px solid rgba(17,24,39,.12);
  color:#111827;
}

/* ---------- Breadcrumbs ---------- */
.breadcrumb{
  --bs-breadcrumb-divider-color: var(--ot-muted);
  --bs-breadcrumb-item-active-color: var(--ot-primary-700);
}
.breadcrumb .breadcrumb-item a{ color:var(--ot-primary); }
.breadcrumb .breadcrumb-item.active{ color:var(--ot-primary-700); }

/* ---------- Chips / Pills ---------- */
.badge.rounded-pill{
  padding:.5rem .75rem;
  background:var(--ot-primary-50);
  color:var(--ot-primary-700);
}

/* ---------- Accessibility helpers ---------- */
.screen-reader-text{
  position:absolute;
  left:-10000px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}
.screen-reader-text:focus{
  position:static;
  width:auto;
  height:auto;
}

/* ---------- Code blocks ---------- */
.chat-conversation .chatgpt-code-wrap {
  max-width: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.chat-conversation pre { 
  max-width: 100%;
  overflow: auto;
  white-space: pre;
  margin: 0;
}
.chat-conversation pre code {
  display: block;
  white-space: pre;
  word-break: normal;
  tab-size: 2;
}

/* ---------- Utility surfaces ---------- */
.surface-soft{ background:var(--ot-soft); }
.surface-card{
  background:#fff;
  box-shadow:var(--elev-1);
  border-radius:1rem;
}

/* ---------- Focus ring utility ---------- */
.focus-ring{
  outline:none;
  box-shadow:0 0 0 .25rem rgba(0,194,255,.28) !important;
}

/* ---------- Ripple-ish hover ---------- */
.clickable:hover{
  background:var(--ot-primary-50);
  transition:background .12s ease;
}
.nav-links{
  display:flex;
  justify-content:space-between;
}
#menu-footer{ gap:15px; }