/* -----------------------------------------------------------
   DevSecOpsDad Custom Brand Styles
   Applies site-wide via site-css in _config.yml
   ----------------------------------------------------------- */

/* --- GLOBAL LAYOUT / BACKGROUND (light touch) ------------- */

html, body {
  background-color: #020811;
  color: #D7E2F0;
}

/* Keep content nicely centered but not cramped */
.container-md {
  max-width: 1100px;
}

/* --- NAVBAR BRAND TEXT ------------------------------------- */

.devsecopsdad-brand {
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.devsecopsdad-brand .brand-devsecops {
  color: #1DA4FF; /* Electric blue */
}

.devsecopsdad-brand .brand-dad {
  color: #C0CAD8; /* Metallic silver */
  margin-left: 0.18em;
}

/* Navbar border glow */
.navbar-custom {
  border-bottom: 1px solid #0A4C8D;
}

/* --- NAVBAR AVATAR / LOGO --------------------------------- */

.avatar-img-border {
  border-color: #1DA4FF !important;
  box-shadow: 0 0 12px rgba(29,164,255,0.35);
}

.avatar-img {
  border-radius: 0 !important; /* square logo */
}

/* --- LINK COLORS ------------------------------------------- */

a,
a:visited {
  color: #1DA4FF;
}

a:hover,
a:focus {
  color: #38C0FF;
}

/* --- CODE BLOCKS & INLINE CODE ---------------------------- */

pre,
code {
  background-color: #050B14 !important;
  border-radius: 0.75rem;
  border: 1px solid #0A4C8D !important;
  color: #E6EEF8 !important;
  font-family: SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;
}

pre {
  padding: 1rem 1.25rem;
  overflow-x: auto;
}

p code,
li code {
  padding: 0.1rem 0.3rem;
}

/* --- SIMPLE SYNTAX HIGHLIGHTING (optional, subtle) -------- */

code .k,
code .kd,
code .kn {
  color: #FF6B81; /* keywords */
}

code .s,
code .s1,
code .s2 {
  color: #FFE083; /* strings */
}

code .n,
code .nx,
code .na {
  color: #7FD3FF; /* identifiers */
}

code .c,
code .cm,
code .c1,
code .cs {
  color: #6A7A91;
  font-style: italic;
}

/* --- TAG BADGES -------------------------------------------- */

.label-default,
.tag {
  background-color: #04111E !important;
  border: 1px solid #1DA4FF !important;
  color: #D7E2F0 !important;
  border-radius: 0.5rem;
  padding: 0.2rem 0.5rem;
}

/* --- HOMEPAGE HERO PANEL ----------------------------------- */

.devsecopsdad-hero {
  padding: 3rem 1rem 2.5rem;
  background: radial-gradient(circle at top, rgba(29,164,255,0.23) 0, transparent 55%),
              #020811;
  border-radius: 1.5rem;
  margin-bottom: 2.5rem;
  box-shadow: 0 0 40px rgba(0,0,0,0.75);
  text-align: center;
}

.devsecopsdad-hero-logo {
  width: 100%;
  max-width: 280px;   
  height: auto;
  margin-bottom: 1.25rem;
}

.devsecopsdad-hero-title {
  margin-bottom: 0.25rem;
  font-size: 2.2rem;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.devsecopsdad-hero-title .brand-devsecops {
  color: #1DA4FF;
}

.devsecopsdad-hero-title .brand-dad {
  color: #C0CAD8;
}

.devsecopsdad-hero-subtitle {
  margin: 0;
  font-size: 1rem;
  color: #9BA8B8;
}

/* --- NAVBAR DROPDOWNS & SEARCH ---------------------------- */

.dropdown-menu {
  background-color: #04111E;
  border: 1px solid #0A4C8D;
}

.dropdown-item {
  color: #D7E2F0;
}

.dropdown-item:hover {
  background-color: #0A4C8D;
  color: #E6EEF8;
}

/* Search link in navbar */
#nav-search-link {
  color: #E6EEF8 !important;
}

#nav-search-link:hover {
  color: #38C0FF !important;
}

/* --- BLOCKQUOTES ------------------------------------------- */

blockquote {
  border-left: 4px solid #1DA4FF;
  padding-left: 1rem;
  color: #B7C6D8;
}

/* --- FOOTER TEXT & LINKS ----------------------------------- */

.beautiful-jekyll-footer .copyright,
.beautiful-jekyll-footer .theme-by {
  color: #9BA8B8 !important;
}

.beautiful-jekyll-footer a {
  color: #1DA4FF !important;
}

.beautiful-jekyll-footer a:hover {
  color: #38C0FF !important;
}

/* ===========================================================
   1) PAGINATION – "Older Posts" / "Newer Posts"
   HTML (from DevTools):
   <ul class="pagination main-pager">
     <li class="page-item next">
       <a class="page-link" href="...">Older Posts →</a>
     </li>
   </ul>
   =========================================================== */

.pagination.main-pager {
  justify-content: center;                 /* center it */
  margin: 2rem 0;
}

.pagination.main-pager .page-item .page-link {
  background-color: #04111E !important;   /* dark pill */
  color: #E6EEF8 !important;              /* bright text */
  border-radius: 999px;                   /* pill shape */
  border: 1px solid #1DA4FF !important;   /* DevSecOpsDad blue border */
  padding: 0.6rem 1.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 0 12px rgba(0,0,0,0.6);
  transition:
    background-color 0.18s ease-out,
    color 0.18s ease-out,
    box-shadow 0.18s ease-out,
    transform 0.15s ease-out;
}

/* Hover / focus */
.pagination.main-pager .page-item .page-link:hover,
.pagination.main-pager .page-item .page-link:focus {
  background-color: #1DA4FF !important;
  color: #020811 !important;
  box-shadow:
    0 0 16px rgba(29,164,255,0.85),
    0 0 4px rgba(0,0,0,0.9);
  transform: translateY(-1px);
}

/* Disabled, if Beautiful Jekyll outputs it */
.pagination.main-pager .page-item.disabled .page-link {
  background-color: #141824 !important;
  border-color: #444C5A !important;
  color: #6F7B8D !important;
  box-shadow: none;
  cursor: default;
}

/* ===========================================================
   2) FOOTER SOCIAL ICONS
   HTML (from DevTools):
   <ul class="list-inline text-center footer-links">
     <li class="list-inline-item">
       <a href="https://github.com/EEN421" title="GitHub">
         <span class="fa-stack fa-lg" aria-hidden="true">
           <i class="fas fa-circle fa-stack-2x"></i>
           <i class="fab fa-github fa-stack-1x fa-inverse"></i>
         </span>
         <span class="sr-only">GitHub</span>
       </a>
     </li>
   </ul>
   We’ll ignore the circle glyph and draw our own bubble on the span.
   =========================================================== */

/* Layout for footer icon row */
.beautiful-jekyll-footer .footer-links {
  margin-bottom: 0.75rem;
}

/* Base bubble on the span.fa-stack */
.beautiful-jekyll-footer .footer-links .fa-stack.fa-lg {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background-color: #04111E !important;        /* dark disc */
  border: 1px solid rgba(29,164,255,0.8) !important;
  box-shadow:
    0 0 6px rgba(0,0,0,0.9),
    0 0 10px rgba(29,164,255,0.35);
  transition:
    background-color 0.18s ease-out,
    box-shadow 0.18s ease-out,
    transform 0.15s ease-out;
}

/* Hide the Font Awesome circle glyph – we don't need its color */
.beautiful-jekyll-footer .footer-links .fa-stack.fa-lg .fas.fa-circle.fa-stack-2x {
  display: none !important;
}

/* Actual icons (GitHub, Twitter, LinkedIn) */
.beautiful-jekyll-footer .footer-links .fa-stack.fa-lg .fa-stack-1x,
.beautiful-jekyll-footer .footer-links .fa-stack.fa-lg .fa-stack-1x.fa-inverse {
  color: #E6EEF8 !important;       /* bright white symbol */
  font-size: 1.3rem;
  opacity: 1 !important;
  text-shadow: 0 0 4px rgba(0,0,0,0.7);
}

/* Hover: electric-blue bubble, dark icon for contrast */
.beautiful-jekyll-footer .footer-links a:hover .fa-stack.fa-lg {
  background-color: #1DA4FF !important;
  box-shadow:
    0 0 14px rgba(29,164,255,0.9),
    0 0 24px rgba(29,164,255,0.6);
  transform: translateY(-1px);
}

.beautiful-jekyll-footer .footer-links a:hover .fa-stack.fa-lg .fa-stack-1x,
.beautiful-jekyll-footer .footer-links a:hover .fa-stack.fa-lg .fa-stack-1x.fa-inverse {
  color: #020811 !important;
}

/* Slight spacing between icons */
.beautiful-jekyll-footer .footer-links .list-inline-item {
  margin: 0 0.35rem;
}

/* ===== DevSecOpsDad GitHub Dark–style syntax colours ===== */

/* Base code block background + default text */
.highlight,
.highlight pre,
pre.highlight,
code.highlighter-rouge {
  background-color: #0d1117;   /* GitHub Dark background */
  color: #c9d1d9;              /* default code text */
}

/* Comments */
.highlight .c,
.highlight .cm,
.highlight .c1,
.highlight .cs {
  color: #8b949e;              /* soft grey, high contrast on dark */
  font-style: italic;
}

/* Keywords (let, where, summarize, etc.) */
.highlight .k,
.highlight .kd,
.highlight .kn,
.highlight .kp,
.highlight .kr,
.highlight .kt {
  color: #1da4ff;              /* DevSecOpsDad electric blue */
}

/* Functions, identifiers, attributes, variables */
.highlight .nf,
.highlight .na,
.highlight .nc,
.highlight .nn,
.highlight .nx,
.highlight .nv,
.highlight .no {
  color: #00a7a0;              /* Gentle Teal */
}

/* Strings + regex */
.highlight .s,
.highlight .s1,
.highlight .s2,
.highlight .sb,
.highlight .sc,
.highlight .sd,
.highlight .sh,
.highlight .si,
.highlight .sx,
.highlight .sr,
.highlight .ss {
  color: #ff6b5c;              /* Warm Coral */
}

/* Numbers */
.highlight .m,
.highlight .mb,
.highlight .mf,
.highlight .mh,
.highlight .mi,
.highlight .mo,
.highlight .il {
  color: #f5b25c;              /* Golden Sand */
}

/* Operators & punctuation */
.highlight .o,
.highlight .ow,
.highlight .p {
  color: #c9d1d9;
}

/* Errors / important tokens */
.highlight .err {
  color: #f97373;              /* bright red-pink for visibility */
  background-color: transparent;
}

/* Links inside code (rare, but keep from going bright blue) */
.highlight a {
  color: inherit;
}

/* --- TABLES: high-contrast on dark page ------------------- */

table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  background-color: #f7f9fa;   /* light card-style background */
  color: #2f3a44;              /* dark text for contrast */
}

table th,
table td {
  padding: 0.5rem 0.75rem;
  border: 1px solid #d0d6e0;
}

/* Header row: slightly darker band */
table thead th {
  background-color: #e3e8f0;
  font-weight: 600;
  color: #2f3a44;
}

/* Zebra-strip rows for readability */
table tbody tr:nth-child(even) {
  background-color: #eef3fb;
}