/* ===== Base ===== */
body {
  margin: 0;
  font-family: Roboto, sans-serif;
  background-color: #212121;
  color: #E0E0E0;
}

a {
  color: #F57C00;
  text-decoration: none;
}

p, ul li {
  font-size: 1.2rem;
  margin: 0;
  color: #E0E0E0;
}

ul li {
  padding: 0.1rem 0 0 0;
}

p {
  padding: 0 0 1rem 0;
}

/* ===== Typography ===== */
h1, h2, h3, h4, section h2 {
  font-family: Montserrat, sans-serif;
}

/* Responsive type: scale down on small screens */
h1 {
  font-size: clamp(2.5rem, 6vw, 3.5rem);
  line-height: 1.15;
}

section h2 {
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1.15;
  color: #1D7FA8;
}

h3 {
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  margin-bottom: 0;
}

h4 {
  font-size: 1.5rem;
  margin-bottom: 0;
}

/* ===== Section Layout ===== */
section {
  padding: 1rem 0.5rem;
  max-width: 1000px;
  margin: auto;
}

/* ===== Header / Topbar ===== */
header {
  font-family: Montserrat, sans-serif !important;
}

header h1 {
  font-size: 4rem;
  margin: 0;
  color: #1D7FA8;
}

header p {
  color: #1D7FA8;
  font-size: 2rem;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-around;
  background: linear-gradient(to right, #0A1F44, #2e677f);
  padding: 0.25rem 1rem;
  flex-wrap: wrap;
}

.brand {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.brand img {
  width: 80px;
  height: auto;
}

.brand h1 {
  font-size: clamp(2rem, 6vw, 2.2rem);
  color: #E0E0E0;
}

.tagline {
  font-size: 1rem;
  font-style: italic;
  color: #E0E0E0;
  padding: 0;
}

/* ===== Navigation ===== */
nav ul {
  margin: 0;                   /* <— primary culprit on many themes */
  padding: 0;
  list-style: none;
  display: flex;
  gap: 1.5rem;
  align-items: center;         /* vertical centering of links */
}

nav li {
  position: relative;
}

nav a {
  color: #ffffff;
  font-weight: bold;
  font-size: clamp(0.9rem, 4vw, 1.2rem);
}

nav li:hover > ul {
  display: block;
}

nav ul ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  padding: 0.5rem;
  background-color: #E0E0E0;
  border-radius: 0.5rem;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
  z-index: 1000;
}

nav ul ul li {
  margin: 0;
}

nav ul ul li a {
  color: #212121;
  white-space: nowrap;
}

nav ul li ul li a:hover {
  background-color: #00797D;
}

/* Dropdown with icon */
.has-dropdown .dropdown-toggle {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  cursor: pointer;
}

.has-dropdown .dropdown-toggle i {
  font-size: 1.3rem;
  line-height: 1;
  margin-top: 2px;
  color: inherit;
}

/* ===== Footer ===== */
.site-footer {
  background-color: #0A1F44;
  color: #E0E0E0;
  padding: 3rem 2rem;
  font-family: Roboto, sans-serif;
}

.site-footer address {
  font-style: normal;
  margin: 0 0 .5rem;
  color: inherit;
  font-size: 1.2rem;
}

.site-footer address a {
  color: #F57C00;
  text-decoration: none;
  font-weight: bold;
  font-size: 1.2rem;
}

.site-footer .footer-col p,
.site-footer .footer-col address {
  margin: 0 0 .5rem;
  line-height: 1.6;
}

.footer-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.footer-col {
  flex: 1 1 200px;
  min-width: 200px;
}

.footer-col h3 {
  margin: 0 0 1rem;
  color: #1D7FA8;
  font-family: Montserrat, sans-serif;
}

.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-col ul li {
  margin-bottom: 0.5rem;
}

.footer-col ul li a {
  color: #E0E0E0;
}

.footer-col ul li a:hover {
  text-decoration: underline;
}

/* Brand block in footer */
.footer-brand {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0;
}

.footer-brand h2 {
  font-size: 2rem;
  margin: 0;
  color: #ffffff;
  font-family: Montserrat, sans-serif;
}

.footer-logo {
  height: 50px;
  margin: 0;
}

/* Social links */
.social-links {
  margin-top: 1rem;
}

.social-links a {
  margin-right: 0.75rem;
  color: #E0E0E0;
  font-size: 1.5rem;
  display: inline-block;
  transition: color 0.3s ease;
}

.social-links a:hover {
  color: #F57C00;
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
  .footer-container {
    flex-direction: column;
    align-items: flex-start;
  }

  .footer-col {
    width: 100%;
  }
}

.project-flow {
  width: 100%;
  border-collapse: collapse;
  margin: 2rem 0;
  font-size: 1.2rem;
}

.project-flow th,
.project-flow td {
  border: 1px solid #444;
  padding: 0.75rem 1rem;
  text-align: left;
}

.project-flow th {
  background-color: #156082;
  color: #E0E0E0;
  font-family: Montserrat, sans-serif;
}

/* Center the whole footer content area */
.site-footer { text-align: center; }

.footer-container {
  justify-content: center;          /* was: space-between */
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

/* Make columns a consistent width and center each column block */
.footer-col {
  flex: 0 1 260px;                  /* fixed-ish column width with wrap */
  min-width: 220px;
  margin: 0 0 1rem 0;
}

/* Keep internal text mostly left-aligned for readability,
   but still keep the block centered */
.footer-col > * {
  text-align: left;
  margin-left: auto;
  margin-right: auto;
  max-width: 28rem;                 /* prevents super-wide lines */
}

/* Brand column visually centred */
.brand-col { text-align: center; }
.footer-brand { justify-content: center; }

/* Address normalisation (keeps visual consistency) */
.site-footer address {
  font-style: normal;
  margin: 0 0 .5rem;
  color: inherit;
  font-size: 1.2rem;
}
.site-footer address a {
  color: #F57C00;
  text-decoration: none;
  font-weight: bold;
  font-size: 1.2rem;
}

/* Mobile: center the columns themselves */
@media (max-width: 768px) {
  .footer-container {
    flex-direction: column;
    align-items: center;           /* was: flex-start */
  }
  .footer-col { width: 100%; max-width: 32rem; }
}

/* ===== Layout Container (Blog specific) ===== */
main#content {
  max-width: 1000px;           /* matches section layout */
  margin: auto;                /* centre horizontally */
  padding: 1rem 0.5rem;        /* add left/right breathing room */
  box-sizing: border-box;
}

article.post h1, .post-card {
  color: #E0E0E0;
  font-family: Montserrat, sans-serif;
}

article.post h2 {
  font-size: 3rem;
  color: #1D7FA8;
  font-family: Montserrat, sans-serif;
}

article.post h3 {
  font-size: 2rem;
  color: #E0E0E0;
  font-family: Montserrat, sans-serif;
  margin: 0 0 1rem 0;
}

article.post li {
  margin: 0 0 0 0;
}

/* ===== Callouts (admonitions) ===== */
.callout {
  display: flex;
  gap: 0.85rem;
  padding: 1rem 1.25rem;
  border-radius: 0.75rem;
  margin: 1.25rem 0;
  font-family: Roboto, sans-serif;
  font-size: 1.2rem;
  line-height: 1.2;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.callout__icon {
  flex: 0 0 auto;
  font-size: 1.6rem;
  line-height: 1;
  margin-top: 0.15rem;
}

.callout__title {
  font-family: Montserrat, sans-serif;
  font-weight: 700;
  margin: 0 0 0.25rem 0;
}

.callout__content p {
  margin: 0 0 0.75rem 0;   /* add paragraph spacing */
  font: inherit;           /* inherit your body typography */
  line-height: inherit;
}
.callout__content p:last-child { margin-bottom: 0; }

/* --- Variants --- */

/* Information (Blue) */
.callout--info {
  background-color: #1D7FA8;
  color: #E3F2FD;
  border-left: 6px solid #64B5F6;
}
.callout--info .callout__icon { color: #64B5F6; }
.callout--info a { color: #BBDEFB; }

/* Success (Green) */
.callout--success {
  background-color: #1B5E20;
  color: #E8F5E9;
  border-left: 6px solid #4CAF50;
}
.callout--success .callout__icon { color: #81C784; }
.callout--success a { color: #A5D6A7; }
.callout--success li { color: #E8F5E9; font-size: 1.2rem; }

/* Warning (Orange) */
.callout--warning {
  background-color: #d66b00;
  color: #FFF3E0;
  border-left: 6px solid #E65100;
}
.callout--warning .callout__icon { color: #FFB74D; }
.callout--warning a { color: #FFE0B2; }
.callout--warning li { color: #FFF3E0; font-size: 1.2rem; }

/* Danger (Red) */
.callout--danger {
  background-color: #B71C1C;
  color: #FFEBEE;
  border-left: 6px solid #F44336;
}
.callout--danger .callout__icon { color: #E57373; }
.callout--danger a { color: #FFCDD2; }

/* Base fallback (Info-style) */
.callout:not([class*="callout--"]) {
  background-color: #0A1F44;
  color: #E0E0E0;
  border-left: 6px solid #1D7FA8;
}

/* Mobile */
@media (max-width: 640px) {
  .callout { padding: 0.9rem 1rem; }
}

/* ===== Figures & Tables ===== */
:root{
  --fig-label-col: #F57C00;
  --tbl-label-col: #F57C00;
}

body { counter-reset: figureCounter tableCounter; }

.figure{
  text-align: center;
  max-width: 100%;
}

.figure--image{
  counter-increment: figureCounter;
  border-radius: 0.5rem;
}

.figure--table{
  counter-increment: tableCounter;
}

.figure img{
  max-width: 100%;
  height: auto;
}

/* Captions appear below, with auto numbering */
.figure figcaption{
  margin-top: 1rem;
  font-size: 1rem;
  color: #F57C00;
}

.figure--image .figure__label::before{
  content: "Figure " counter(figureCounter) ": ";
  color: var(--fig-label-col);
  font-weight: 700;
  margin-right: .25rem;
}

.figure--table .table__label::before{
  content: "Table " counter(tableCounter) ": ";
  color: var(--tbl-label-col);
  font-weight: 700;
  margin-right: .25rem;
}

/* Table basics */
.table-wrap { overflow-x: auto; }
.table-wrap table{
  width: 100%;
  border-collapse: collapse;
  font-size: 1rem;
}
.table-wrap th,
.table-wrap td{
  border: 1px solid #444;
  padding: 0.6rem 0.75rem;
  text-align: left;
}
.table-wrap th{
  background-color: #156082;
  color: #E0E0E0;
  font-family: Montserrat, sans-serif;
}

/* Optional: narrower images when authors set width style via render hook */
.figure--image img[style*="width"]{
  display: block;
  margin-left: auto;
  margin-right: auto;
  border-radius: 0.25rem;
}

/* ===== Bullet spacing normaliser ===== */

/* sensible base: keep left indent, add bottom rhythm */
ul, ol {
  margin: 0 0 1rem 1.5rem;
  padding: 0;
}

/* nested lists:
   - no gap before the first nested bullet
   - a bit of gap after the nested block before the next top-level bullet */
li > ul,
li > ol {
  margin-top: -0.6rem;          /* no space going down a level */
  margin-bottom: 0.6rem;  /* space coming back up */
}

/* --- Mobile polish & full-bleed header/footer --- */

/* Make sure nothing creates a phantom horizontal scroll */
html, body { overflow-x: hidden; }

/* A simple content wrapper you can use inside header/footer to center content */
.wrap { max-width: 1000px; margin: 0 auto; padding: 0 12px; }