/* ============================================================
  # CSS CUSTOM PROPERTIES (VARIABLES)
  Defined on :root so they're available everywhere.
  Change these to retheme the entire site in one place.
============================================================ */
:root {
  --green:        #00ff41;   /* Matrix bright green — primary accent */
  --green-mid:    #00cc33;   /* Mid green — hover states */
  --green-dark:   #008f11;   /* Darker green — secondary text/borders */
  --green-dim:    #003b00;   /* Very dark green — subtle backgrounds */
  --black:        #000000;   /* Pure black */
  --bg:           #050505;   /* Near-black page background */
  --bg-card:      #0d0d0d;   /* Card/section background */
  --bg-card-2:    #111111;   /* Slightly lighter for alternating sections */
  --border:       #1a1a1a;   /* Subtle borders */
  --border-glow:  #00ff4133; /* Green glow border (with alpha) */
  --text:         #c8c8c8;   /* Main body text — off-white for readability */
  --text-dim:     #666666;   /* Muted / secondary text */
  --white:        #ffffff;

  --font-mono:    'Share Tech Mono', 'Courier New', monospace;
  --font-body:    'Inter', system-ui, sans-serif;

  --radius:       4px;       /* Slight rounding — keep it sharp/technical */
  --transition:   0.25s ease;

  --max-width:    1160px;    /* Content container max width */
}


/* ============================================================
  # RESET & BASE
  Minimal reset — removes browser defaults that would fight our design.
  box-sizing: border-box means padding/border don't expand element size.
============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth; /* Enables smooth anchor scrolling */
  font-size: 18px; /* Increased base — all rem units scale up with this */
}

body {
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.7;
  overflow-x: hidden; /* Prevent horizontal scroll from animations */
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: var(--green);
  text-decoration: none;
  transition: color var(--transition);
}

a:hover {
  color: var(--green-mid);
}

ul {
  list-style: none;
}


/* ============================================================
  # TYPOGRAPHY
  Headings use the monospace font to reinforce the technical aesthetic.
  Body text uses Inter for clean readability.
============================================================ */
h1, h2, h3, h4 {
  font-family: var(--font-mono);
  color: var(--white);
  line-height: 1.2;
  letter-spacing: 0.02em;
}

h2 {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  margin-bottom: 1rem;
}

h3 {
  font-size: 1.1rem;
  color: var(--white);
  margin-bottom: 0.75rem;
}

p {
  color: var(--text);
  margin-bottom: 1rem;
}

p:last-child {
  margin-bottom: 0;
}


/* ============================================================
  # UTILITY: CONTAINER
  Centres content and constrains max width with side padding.
  Used by all sections to keep content aligned.
============================================================ */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 2rem;
}


/* ============================================================
  # UTILITY: SECTION HEADER
  Reusable header block used at the top of each section.
  .section-tag is the small // LABEL above the heading.
============================================================ */
.section-header {
  text-align: center;
  margin-bottom: 3.5rem;
}

.section-tag {
  font-family: var(--font-mono);
  color: var(--green);
  font-size: 0.85rem;
  letter-spacing: 0.15em;
  margin-bottom: 0.75rem;
  text-transform: uppercase;
}

.section-intro {
  max-width: 600px;
  margin: 0 auto;
  color: var(--text-dim);
  font-size: 1.05rem;
}


/* ============================================================
  # UTILITY: BUTTONS
  .btn-primary  — solid green, primary CTA
  .btn-outline  — transparent with green border
  .btn-full     — full width (used inside the form)
  Hover states use a glowing box-shadow for the matrix feel.
============================================================ */
.btn {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  padding: 0.85rem 2rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--transition);
  text-transform: uppercase;
}

.btn-primary {
  background-color: var(--green);
  color: var(--black);
  border-color: var(--green);
}

.btn-primary:hover {
  background-color: transparent;
  color: var(--green);
  box-shadow: 0 0 20px var(--border-glow);
}

.btn-outline {
  background-color: transparent;
  color: var(--green);
  border-color: var(--green);
}

.btn-outline:hover {
  background-color: var(--green);
  color: var(--black);
  box-shadow: 0 0 20px var(--border-glow);
}

.btn-full {
  width: 100%;
  text-align: center;
  margin-top: 0.5rem;
}


/* ============================================================
  # FIXED STATUS WIDGET
  Pinned to top-left, just below the navbar (5rem top offset).
  Smaller font than the in-page terminal block — it's a subtle
  ambient detail, not the focus of the page.
  Hidden on mobile via media query at the bottom of this file.
============================================================ */
.status-widget {
  position: fixed;
  top: 5.5rem;        /* Clears the navbar */
  left: 1.5rem;
  z-index: 900;       /* Below navbar (1000) but above page content */
  font-size: 1.05rem;
  padding: 1.25rem 1.5rem;
  opacity: 0.9;
  pointer-events: none; /* Doesn't block clicks on content behind it */
  min-width: 270px;
}

.status-widget .terminal-output {
  line-height: 2.1;
  font-size: 1.05rem;
}


/* ============================================================
  # NAVIGATION BAR
  Starts fully transparent over the hero, turns solid on scroll.
  JavaScript adds the .scrolled class — CSS handles the transition.
  The mobile hamburger (.nav-toggle) is hidden on desktop.
============================================================ */
#navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background var(--transition), border-color var(--transition);
  padding: 1.25rem 0;
}

#navbar.scrolled {
  background: rgba(5, 5, 5, 0.96);
  border-bottom-color: var(--border);
  padding: 0.9rem 0;
  backdrop-filter: blur(8px); /* Frosted glass effect when scrolled */
}

.nav-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 2rem;
  display: grid;
  /* Logo | centred links | CTA — equal outer columns keep middle truly centred */
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
}

/* Nav links sit in the auto (middle) column, perfectly centred */
.nav-links {
  justify-self: center;
}

/* CTA button in column 3, pushed to the right edge */
.nav-cta {
  justify-self: end;
}

/* Logo text with bracket characters */
.nav-logo {
  font-family: var(--font-mono);
  /* Scales from 0.78rem on narrow screens up to 1rem on wide screens
     so "[DIGITALJUNKYS CONSULTING]" never breaks or overlaps the
     centred nav links. */
  font-size: clamp(0.78rem, 1.4vw, 1rem);
  color: var(--white);
  letter-spacing: 0.05em;
  transition: color var(--transition);
  justify-self: start;
  white-space: nowrap;
}

.nav-logo:hover { color: var(--green); }

.logo-bracket { color: var(--green); }
.logo-accent   { color: var(--green); }

/* Centred main nav links */
.nav-links {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  list-style: none;
}

.nav-links a {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  color: var(--text);
  transition: color var(--transition);
}

.nav-links a:hover { color: var(--green); }

/* Woo→WooCommerce expanding nav link.
   "COMMERCE" is collapsed to zero width by default and slides
   open on hover. On touch devices (no :hover) it stays expanded. */
.nav-plugin-expand {
  display: inline-block;
  max-width: 0;
  overflow: hidden;
  vertical-align: bottom;
  white-space: nowrap;
  transition: max-width 0.25s ease;
}

.nav-plugin-link:hover .nav-plugin-expand,
.nav-plugin-link:focus .nav-plugin-expand {
  max-width: 8em; /* generous upper bound for "COMMERCE" */
}

/* GET IN TOUCH — standalone CTA in column 3 */
.nav-cta {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  border: 1px solid var(--green);
  color: var(--green);
  padding: 0.45rem 1.1rem;
  border-radius: var(--radius);
  transition: all var(--transition);
  white-space: nowrap;
}

.nav-cta:hover {
  background-color: var(--green);
  color: var(--black);
}

/* Hamburger button — visible only on mobile */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}

.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--green);
  transition: all var(--transition);
}


/* ============================================================
  # HERO SECTION
  Full-viewport height. Position relative so the canvas and
  content can be stacked using absolute/z-index positioning.
============================================================ */
#hero {
  position: relative;
  height: 100vh;
  min-height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Canvas fills the entire hero — matrix rain renders here */
#matrix-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0; /* Behind everything else */
}

/* Dark gradient overlay — bottom is darker so text is readable */
.hero-overlay {
  position: absolute;
  inset: 0; /* shorthand for top/right/bottom/left: 0 */
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.55) 0%,
    rgba(0,0,0,0.70) 60%,
    rgba(5,5,5,0.95) 100%
  );
  z-index: 1;
}

/* Hero content sits above canvas and overlay */
.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0 1.5rem;
  max-width: 860px;
}

/* Small terminal-style prefix above the main headline */
.hero-pre {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--green-dark);
  letter-spacing: 0.2em;
  margin-bottom: 1.5rem;
}

/* Blinking cursor after the pre text */
.cursor-blink {
  animation: blink 1s step-end infinite;
  color: var(--green);
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* Main hero heading — large, monospace, with glow on accent word */
.hero-title {
  font-size: clamp(2.8rem, 8vw, 6rem);
  line-height: 1.05;
  margin-bottom: 1.5rem;
  letter-spacing: -0.01em;
}

.hero-title-accent {
  color: var(--green);
  text-shadow: 0 0 30px rgba(0, 255, 65, 0.5);
}

.hero-subtitle {
  font-size: clamp(1rem, 2vw, 1.2rem);
  color: var(--text-dim);
  max-width: 600px;
  margin: 0 auto 2.5rem;
  line-height: 1.8;
}

.hero-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 3rem;
}

/* Three-stat strip at bottom of hero */
.hero-stats {
  display: flex;
  gap: 3rem;
  justify-content: center;
  flex-wrap: wrap;
  border-top: 1px solid var(--border);
  padding-top: 2rem;
}

.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
}

.stat-number {
  font-family: var(--font-mono);
  font-size: 2rem;
  color: var(--green);
  line-height: 1;
}

.stat-label {
  font-size: 0.75rem;
  color: var(--text-dim);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Animated scroll indicator arrow at the bottom of the hero */
.scroll-indicator {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  animation: bounce 2s ease-in-out infinite;
}

.scroll-arrow {
  display: block;
  width: 20px;
  height: 20px;
  border-right: 2px solid var(--green);
  border-bottom: 2px solid var(--green);
  transform: rotate(45deg);
  opacity: 0.7;
}

@keyframes bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(8px); }
}


/* ============================================================
  # SERVICES SECTION
  Alternating background colour (bg-card-2) to break up the page.
  6-card grid that collapses responsively.
============================================================ */
#services {
  background: var(--bg-card-2);
  padding: 6rem 0;
}

/* CSS Grid: 3 columns on desktop, collapses via media queries */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

/* Card base styles — used by services and cert section */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2rem;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.card:hover {
  border-color: var(--green);
  box-shadow: 0 0 24px var(--border-glow);
  transform: translateY(-3px); /* Subtle lift on hover */
}

.card-icon {
  font-size: 1.8rem;
  color: var(--green);
  margin-bottom: 1.25rem;
  line-height: 1;
}

.card h3 {
  font-size: 1rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}

.card p {
  font-size: 1rem;
  color: var(--text-dim);
  line-height: 1.7;
}


/* ============================================================
  # WORDPRESS PLUGINS SECTION
  Showcases the Digitaljunkys plugin portfolio. Uses the same
  card pattern as services but with extra metadata: a status
  pill in the top-right, a feature list, and a price/CTA footer.
============================================================ */
#plugins {
  background: var(--bg);
  padding: 6rem 0;
}

.plugins-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}

.plugin-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2rem;
  position: relative;
  display: flex;
  flex-direction: column;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.plugin-card:hover {
  border-color: var(--green);
  box-shadow: 0 0 24px var(--border-glow);
  transform: translateY(-3px);
}

/* Status pill in the top-right corner */
.plugin-status {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  padding: 0.3rem 0.6rem;
  border-radius: 2px;
  text-transform: uppercase;
}

.plugin-status-soon {
  color: var(--green-mid);
  background: var(--green-dim);
  border: 1px solid var(--green-dark);
}

.plugin-status-free {
  color: var(--black);
  background: var(--green);
  border: 1px solid var(--green);
}

.plugin-card .card-icon {
  font-size: 1.8rem;
  color: var(--green);
  margin-bottom: 1.25rem;
  line-height: 1;
}

.plugin-card h3 {
  font-size: 1rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 0.6rem;
}

.plugin-tagline {
  color: var(--text);
  font-size: 0.95rem;
  margin-bottom: 1.1rem;
  font-style: italic;
}

.plugin-features {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem 0;
  flex-grow: 1;
}

.plugin-features li {
  position: relative;
  padding-left: 1.25rem;
  font-size: 0.88rem;
  color: var(--text-dim);
  line-height: 1.6;
  margin-bottom: 0.5rem;
}

.plugin-features li::before {
  content: "›";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--green);
  font-family: var(--font-mono);
  font-weight: bold;
}

/* Price + CTA strip sits at the bottom of every card */
.plugin-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
  gap: 1rem;
}

.plugin-price {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-dim);
  letter-spacing: 0.05em;
}

.plugin-price-amount {
  color: var(--green);
  font-size: 1rem;
  font-weight: bold;
}

.plugin-cta {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: var(--green);
  text-transform: uppercase;
  border: 1px solid var(--green-dark);
  padding: 0.5rem 0.85rem;
  border-radius: 2px;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
  white-space: nowrap;
}

.plugin-cta:hover {
  background: var(--green);
  color: var(--black);
  border-color: var(--green);
}

.plugins-note {
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-dim);
  margin-top: 2rem;
}


/* ============================================================
  # QUALIFICATIONS / CERTIFICATIONS SECTION
  3-card grid. Each card has a styled "badge" on the left and
  cert info on the right. .cert-pro uses a brighter green for
  professional-level badges; .cert-associate uses a dimmer shade.
============================================================ -->
============================================================ */
#qualifications {
  background: var(--bg);
  padding: 6rem 0;
}

/* 2×2 grid — cleaner layout with 4 certs, gives each card more breathing room */
.certs-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-bottom: 2rem;
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}

.cert-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.cert-card:hover {
  border-color: var(--green);
  box-shadow: 0 0 24px var(--border-glow);
}

/* Official Credly badge image container */
.cert-badge-img {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 0;
}

.cert-badge-img img {
  width: 140px;
  height: 140px;
  object-fit: contain;
  /* Subtle glow on the badge to tie it into the green theme */
  filter: drop-shadow(0 0 12px rgba(0, 255, 65, 0.25));
  transition: filter var(--transition), transform var(--transition);
}

.cert-card:hover .cert-badge-img img {
  filter: drop-shadow(0 0 20px rgba(0, 255, 65, 0.5));
  transform: scale(1.05);
}

.cert-code {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--green);
  letter-spacing: 0.1em;
  margin-bottom: 0.25rem;
}

.cert-desc {
  font-size: 0.88rem;
  color: var(--text-dim);
  line-height: 1.6;
}

/* Small note below cert cards */
.certs-note {
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-dim);
  margin-top: 1.5rem;
}

.highlight {
  color: var(--green);
  font-family: var(--font-mono);
}


/* ============================================================
  # ABOUT / EXPERIENCE SECTION
  Two-column layout: paragraphs left, fact list right.
  The fact list uses a ::before pseudo-element for the green tick.
============================================================ */
#about {
  background: var(--bg-card-2);
  padding: 6rem 0;
}

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: start;
}

.about-text p {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--text);
  margin-bottom: 1.25rem;
}

/* Green-ticked fact list */
.fact-list li {
  position: relative;
  padding-left: 1.75rem;
  margin-bottom: 1rem;
  color: var(--text-dim);
  font-size: 0.95rem;
  line-height: 1.6;
}

.fact-list li::before {
  content: '▶';
  position: absolute;
  left: 0;
  color: var(--green);
  font-size: 0.7rem;
  top: 0.35em;
}


/* ============================================================
  # CONTACT SECTION
  Two-column: contact details left, form right.
  The terminal-block gives the left side a code-window aesthetic.
============================================================ */
#contact {
  background: var(--bg);
  padding: 6rem 0;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 4rem;
  align-items: start;
}

.contact-details {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.contact-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  color: var(--green-dark);
  margin-bottom: 0.3rem;
  text-transform: uppercase;
}

.contact-value {
  font-family: var(--font-mono);
  font-size: 1rem;
  color: var(--white);
}

a.contact-value:hover {
  color: var(--green);
}

/* Terminal-style block with $ prompt */
.terminal-block {
  background: var(--black);
  border: 1px solid var(--border);
  border-left: 3px solid var(--green);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  margin-top: 0.5rem;
}

.prompt {
  color: var(--green);
  margin-right: 0.5rem;
  user-select: none;
}

.terminal-output {
  margin-top: 0.5rem;
  color: var(--text-dim);
  line-height: 2;
}

.green { color: var(--green); }


/* ============================================================
  # CONTACT CTA PANEL
  Right column of the contact section — two large CTA buttons
  and a short intro paragraph. No form needed.
============================================================ */
.contact-cta-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.25rem;
}

.contact-cta-intro {
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--text);
  margin-bottom: 0.5rem;
}

/* Full-width buttons stacked vertically in the CTA panel */
.btn-contact {
  width: 100%;
  text-align: center;
  font-size: 0.9rem;
  padding: 1rem 2rem;
}

.contact-cta-note {
  font-size: 0.85rem;
  color: var(--text-dim);
  margin-top: 0.25rem;
}


/* ============================================================
  # FOOTER
  Minimal three-row layout: logo + tagline, nav links, copyright.
============================================================ */
#footer {
  background: var(--black);
  border-top: 1px solid var(--border);
  padding: 3rem 0 2rem;
}

.footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  text-align: center;
}

.footer-logo {
  font-family: var(--font-mono);
  font-size: 1.2rem;
  color: var(--white);
}

.footer-tagline {
  font-size: 0.8rem;
  color: var(--text-dim);
  letter-spacing: 0.08em;
  margin-top: 0.4rem;
}

.footer-nav {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  justify-content: center;
}

.footer-nav a {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--text-dim);
  text-transform: uppercase;
  transition: color var(--transition);
}

.footer-nav a:hover { color: var(--green); }

.footer-copy {
  font-size: 0.78rem;
  color: var(--text-dim);
  margin: 0;
}


/* ============================================================
  # SCROLL REVEAL ANIMATION
  Elements with .reveal start invisible and slide up.
  JavaScript's IntersectionObserver adds .visible when they
  enter the viewport — triggering the CSS transition below.
============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}


/* ============================================================
  # RESPONSIVE — TABLET (max 900px)
============================================================ */
@media (max-width: 900px) {

  /* Services: 2 columns on tablet */
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Plugins: stay 2-col on tablet — already 2-col on desktop */

  /* Certs: stay 2-col on tablet */

  /* About and contact stack vertically */
  .about-grid,
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}


/* ============================================================
  # RESPONSIVE — MOBILE (max 600px)
  Full centre-justified layout. Single column grids.
  Squarer, wider service and cert cards.
============================================================ */
@media (max-width: 600px) {

  /* Base: reduce font size slightly so nothing overflows */
  html { font-size: 16px; }

  /* ---- HERO ---- */

  /* Push content below fixed navbar, reduce bottom so stats don't clash with arrow */
  .hero-content {
    padding: 5rem 1.25rem 2rem;
  }

  /* Reduce title size for mobile */
  .hero-title {
    font-size: clamp(1.9rem, 10vw, 2.8rem);
    text-align: center;
    margin-bottom: 1rem;
  }

  .hero-pre {
    font-size: 0.7rem;
    margin-bottom: 1rem;
    text-align: center;
  }

  .hero-subtitle {
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
    text-align: center;
  }

  .hero-actions {
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
  }

  .hero-actions .btn {
    width: 100%;
    max-width: 300px;
    text-align: center;
  }

  /* Stats: 3 in a row on mobile, compact */
  .hero-stats {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 0;
    justify-content: space-around;
    padding-top: 1.25rem;
    margin-bottom: 2.5rem; /* space above the scroll arrow */
  }

  .stat-number {
    font-size: 1.4rem;
  }

  .stat-label {
    font-size: 0.6rem;
  }

  /* Hide scroll arrow on mobile — it overlaps the stats */
  .scroll-indicator {
    display: none;
  }

  /* Tighter section padding on mobile — kills the dead space between sections */
  #services, #plugins, #qualifications, #about, #contact {
    padding: 3.5rem 0;
  }

  .section-header {
    margin-bottom: 2rem;
  }

  /* Centre everything in section headers */
  .section-header,
  .section-tag,
  .section-intro {
    text-align: center;
  }

  /* ---- SERVICES CARDS ---- */
  /* Single column, wider cards with more height (squarer feel) */
  .services-grid {
    grid-template-columns: 1fr;
    max-width: 100%;
    gap: 1rem;
  }

  .card {
    text-align: center;
    padding: 2rem 1.5rem;
    min-height: 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .card-icon {
    font-size: 2.2rem;
    margin-bottom: 1rem;
  }

  .card h3 {
    text-align: center;
  }

  .card p {
    text-align: center;
  }

  /* ---- PLUGIN CARDS ---- */
  /* Single column on mobile, badge stays in corner */
  .plugins-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .plugin-card {
    padding: 1.75rem 1.5rem;
  }

  .plugin-status {
    top: 0.75rem;
    right: 0.75rem;
    font-size: 0.55rem;
    padding: 0.25rem 0.5rem;
  }

  .plugin-footer {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
    text-align: center;
  }

  .plugin-cta {
    text-align: center;
  }

  /* ---- CERT CARDS ---- */
  /* Single column, wider, squarer — badge and info side by side */
  .certs-grid {
    grid-template-columns: 1fr;
    max-width: 100%;
    gap: 1rem;
  }

  .cert-card {
    flex-direction: row;         /* Badge left, info right on mobile */
    align-items: center;
    padding: 1.25rem;
    gap: 1.25rem;
    min-height: 140px;           /* Squarer feel */
  }

  .cert-badge-img {
    flex-shrink: 0;
    padding: 0;
  }

  .cert-badge-img img {
    width: 90px;
    height: 90px;
  }

  .cert-info {
    text-align: left;
  }

  .cert-info h3 {
    font-size: 0.95rem;
  }

  .cert-desc {
    display: none;  /* Hide description on mobile — card is compact */
  }

  .certs-note {
    text-align: center;
  }

  /* ---- ABOUT SECTION ---- */
  .about-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .about-text,
  .about-text p {
    text-align: center;
  }

  /* Centre the fact list but keep the ▶ marker */
  .about-facts {
    display: flex;
    justify-content: center;
  }

  .fact-list {
    display: inline-block;
    text-align: left;  /* Keep text left-aligned within the centred block */
  }

  /* ---- CONTACT SECTION ---- */
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .contact-details {
    align-items: center;
    text-align: center;
  }

  .contact-item {
    text-align: center;
  }

  .contact-cta-panel {
    text-align: center;
  }

  .contact-cta-intro {
    text-align: center;
  }

  .terminal-block {
    text-align: left;  /* Terminal output stays left-aligned */
  }

  /* ---- STATUS WIDGET ---- */
  .status-widget {
    display: none;
  }

  /* ---- NAVIGATION ---- */
  /* Collapse to logo + hamburger only */
  .nav-inner {
    grid-template-columns: 1fr auto;
  }

  /* Hide desktop CTA and centred links */
  .nav-cta,
  .nav-links {
    display: none;
  }

  /* Show hamburger */
  .nav-toggle {
    display: flex;
    grid-column: 2;
  }

  /* Touch devices don't reliably hover — always show the full
     "WOOCOMMERCE PLUGINS" text on mobile/footer. */
  .nav-plugin-expand {
    max-width: 8em;
  }

  /* Full-screen mobile menu */
  .nav-links.open {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0,0,0,0.97);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2.5rem;
    z-index: 999;
  }

  .nav-links.open a {
    font-size: 1.2rem;
  }

  /* Show CTA inside the open mobile menu */
  .nav-cta.mobile-open {
    display: block;
    font-size: 1.2rem;
    padding: 0.75rem 2rem;
  }
}