@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');

/* ===========================
   AWSM DARK MODE (CLEAN)
   =========================== */

/* Color tokens */
:root{
  --bg: #121212;      /* his background */
  --bg-2: #121212;    /* menu same as bg */
  --bg-3: #1a1a1a;    /* optional subtle panels */
  --text: #e2f0f0;    /* his text */
  --text-2: #e2f0f0;  /* keep consistent */
  --muted: #b8c8c8;
  --border: rgba(255,255,255,0.08);
  --accent: #edc1c9;  /* his pink */
  --link: #edc1c9;
  --link-hover: #f4d2d8;
}

/* Body text */
body, p, li, input, textarea, select, button{
  font-family: 'Montserrat', Arial, sans-serif !important;
  font-weight: 400 !important;
  color: var(--text) !important;
}

/* Headings slightly heavier */
h1,h2,h3,h4,h5,h6{
  font-family: 'Montserrat', Arial, sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em;
}

/* Global background + text */
html, body{
  background: var(--bg) !important;
  color: var(--text) !important;
}

p, li, span{
  color: var(--text-2) !important;
}

h1,h2,h3,h4,h5,h6{
  color: var(--text) !important;
}

a{ color: var(--link) !important; }
a:hover{ color: var(--link-hover) !important; }

/* Kill most “white wrappers” without nuking every div/span */
#main, #top.container, .content-wrapper, .row, .centered,
.post, .post-content, .entry-content-wrapper, #sidebar, .timeline{
  background: transparent !important;
  background-image: none !important;
}

/* ===== AWSM TOP MENU (the real one) ===== */
#main_menu,
#main_menu ul,
#one_page_menu,
#one_page_menu.main_nav{
  background: var(--bg) !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Menu bar: same color as page, no border/shadow */
#main_menu{
  background: var(--bg) !important;
  border: 0 !important;
  box-shadow: none !important;
}
#main_menu ul, #one_page_menu{
  background: transparent !important;
}

#one_page_menu li,
#one_page_menu li a{
  background: transparent !important;
}

#one_page_menu li a{
  color: var(--text) !important;
}

#one_page_menu li a:hover{
  color: var(--link) !important;
}

/* Active item */
#one_page_menu li a.link-active,
#one_page_menu li.current-menu-item a,
#one_page_menu li.current_page_item a,
#one_page_menu li.current a{
  background: rgba(255,255,255,0.08) !important;
  color: var(--text) !important;
}

/* ===== Remove the blue-ish panels around text ===== */
/* AWSM accent panel (your theme sets this to rgba(52,121,158,0.8)) */
.awsm-info{
  background: transparent !important; /* or use var(--panel) if you want a subtle panel */
  box-shadow: none !important;
}

/* If any paragraph/block is getting a tinted background, force it off */
.name-box,
.name-box p,
.post-content p,
.entry-content-wrapper p,
.wp-block-paragraph{
  background: transparent !important;
}

/* Optional: if you want paragraphs to sit on a subtle dark panel instead of “floating” */
.name-box{
  background: rgba(15,20,28,0.55) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 14px !important;
  padding: 18px 22px !important;
}

/* Forms */
input, textarea, select{
  background: var(--panel-2) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
}
input::placeholder, textarea::placeholder{ color: var(--muted) !important; }

/* Buttons */
button, input[type="submit"], .button{
  background: var(--panel-2) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
}
button:hover, input[type="submit"]:hover, .button:hover{
  border-color: var(--link) !important;
}

/* ===== KILL THE MENU SEPARATOR LINE ===== */
#main_menu,
#main_menu * ,
#main_menu ul,
#main_menu ul li,
#main_menu ul li a,
#one_page_menu,
#one_page_menu li,
#one_page_menu li a,
.main_nav,
.main_nav li,
.main_nav li a{
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
}

/* If the theme draws the line via pseudo-elements */
#main_menu::before,
#main_menu::after,
#one_page_menu::before,
#one_page_menu::after,
.main_nav::before,
.main_nav::after{
  content: none !important;
  display: none !important;
}

/* If it’s a background-image/gradient line */
#main_menu,
#main_menu ul,
#one_page_menu,
.main_nav{
  background-image: none !important;
}

#one_page_menu{
  margin-left: auto !important;
}

/* "Mike Clarke" label */
#main_menu::before{
  content: "Mike Clarke";
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 500;
  font-size: 18px;
  color: var(--text);
}

/* Add name to the left of the menu */
#main_menu{
  display: flex !important;
  align-items: center !important;
  padding: 18px 24px !important; /* makes it taller */
}

/* ===== Pink accent headings ===== */

/* Make section headings / main headings pink */
h2, h3{
  color: var(--accent) !important;
}

/* Keep your big hero name white (optional — remove if you want it pink too) */
h1{
  color: var(--text) !important;
}

/* If AWSM uses special title classes, catch those too */
.section-title,
.entry-title,
.awsm-title,
.resume-title,
.timeline-title{
  color: var(--accent) !important;
}

/* Only keep the first text node vibe — hide common nested label elements */
#one_page_menu a > *{
  display: none !important;
}

/* ===== Cards/blocks: force dark panels instead of white ===== */
.awsm-box,
.awsm-info,
.resume-item,
.timeline-item,
.portfolio-item,
.entry,
.hentry,
.post,
.wp-block-group,
.wp-block-media-text,
.wp-block-column,
.wp-block-columns,
.wp-block-cover__inner-container{
  background: rgb(35,35,35) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow: none !important;
}

/* Ensure inner wrappers don't stay white */
.awsm-box * ,
.awsm-info * ,
.resume-item * ,
.timeline-item * ,
.portfolio-item * ,
.wp-block-group *{
  background-color: transparent !important;
}

/* ===== Work History timeline cards only ===== */
.timeline .timeline_unit,
.timeline_unit{
  background: rgb(35,35,35) !important;
  color: var(--text) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow: none !important;
}

/* Some inner bits in AWSM stay white unless you hit them too */
.timeline .timeline_unit *{
  background-color: transparent !important;
}

/* Keep media/iframes looking normal */
.timeline .timeline_unit iframe,
.timeline .timeline_unit img,
.timeline .timeline_unit video{
  background-color: transparent !important;
}

/* ===== KILL AWSM FAKE HR SEPARATORS ===== */
.hr{
  display: none !important;
}

/* ===== KILL ALL AWSM SEPARATORS (HR, LINES, BARS) ===== */

/* Fake HR */
.hr{
  display: none !important;
}

/* Separator bars */
.separator,
.separator.wide,
.separator.small,
.separator.medium{
  display: none !important;
}

/* Any leftover divider-style elements */
.section-separator,
.section-divider,
.section-line{
  display: none !important;
}

/* ===== Remove AWSM blue hero/name box background ===== */
.name-box{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

h5{
  color:#b7dbd8 !important;
}

#work-history .post,
#work-history .hentry{
  background: rgba(255,255,255,0.03) !important;
  border: 0 !important;
  box-shadow: none !important;
}

#work-history .post{
  padding: 36px 28px !important;
  border-radius: 14px !important;
}

/* Projects: round + subtle charcoal panels (AWSM timeline cards) */
#projects .timeline_unit{
  background: rgba(255,255,255,0.03) !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 14px !important;
  overflow: hidden !important; /* makes videos/images respect rounded corners */
}

/* If AWSM uses an inner wrapper that stays white/blue, force it transparent */
#projects .timeline_unit .data_meta_hold,
#projects .timeline_unit .data_meta_hold *{
  background: transparent !important;
}

/* Comfortable padding for the card content */
#projects .timeline_unit .data_meta_hold{
  padding: 28px 24px !important;
}

/* Remove separator lines in WP Responsive Menu */
#wprmenu_menu li a{
  border: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

#wprmenu_menu li{
  border: none !important;
  border-bottom: none !important;
}

/* WP Responsive Menu: kill ALL possible separators (border, shadow, bg-image, pseudo lines) */
#wprmenu_menu_wrap li,
#wprmenu_menu_wrap li a{
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;           /* kills inset separator lines */
  background-image: none !important;     /* kills gradient separators */
}

#wprmenu_menu_wrap li::before,
#wprmenu_menu_wrap li::after,
#wprmenu_menu_wrap li a::before,
#wprmenu_menu_wrap li a::after{
  content: none !important;
  display: none !important;
  border: 0 !important;
  box-shadow: none !important;
  background: none !important;
}

/* Extra scope (some versions use cbp-spmenu) */
.cbp-spmenu li,
.cbp-spmenu li a{
  border: 0 !important;
  box-shadow: none !important;
  background-image: none !important;
}

.cbp-spmenu li::before,
.cbp-spmenu li::after,
.cbp-spmenu li a::before,
.cbp-spmenu li a::after{
  content: none !important;
  display: none !important;
}

/* Force site fonts in WP Responsive Menu (your actual wrappers) */
#wprmenu_bar,
#wprmenu_bar * ,
.cbp-spmenu,
.cbp-spmenu * ,
#mg-wprmenu-menu,
#mg-wprmenu-menu *{
  font-family: 'Montserrat', Arial, sans-serif !important;
  font-weight: 400 !important;
}

#main,
#main:after,
#main:before {
    border-bottom: 0 !important;
    background-image: none !important;
}

#back-top a{
background:rgba(255,255,255,0.04);
border:1px solid rgba(255,255,255,0.08);
border-radius:14px;
box-shadow:none;
}

#back-top a:before,
#back-top a i{
color:#b7dbd8 !important;
}

#back-top a:hover{
background:rgba(255,255,255,0.08);
border-color:#edc1c9;
}

#back-top a:hover:before,
#back-top a:hover i{
color:#ffffff !important;
}

/* Proper 16:9 video ratio */
#projects iframe,
#projects video{
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9 !important;
	position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 14px; /* matches your card vibe */
}

/* One-page sections: remove "mystery" extra height and giant gaps */
.home #top > .content-wrapper{
  min-height: 0 !important;
  height: auto !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Set a consistent, sane spacing BETWEEN sections */
.home #top > .content-wrapper + .content-wrapper{
  margin-top: -20px !important;   /* tweak this */
  padding-top: 0 !important;
}

/* Increase gap specifically before Contact */
.home #top > .content-wrapper + #contact.content-wrapper {
  margin-top: 140px !important;
}



/* Hide the theme tooltip text for mailto icons... */
.profile_social_links a[href^="mailto:"] > span {
  font-size: 0 !important;
}

/* Make the tooltip bubble look nicer for longer text */
.profile_social_links a[href^="mailto:"] > span {
  padding: 6px 10px !important;
  min-width: 78px !important;     /* tweak */
  text-align: center !important;
  white-space: nowrap !important; /* prevent wrap */
  line-height: 1.1 !important;
}

/* ...and replace with our own tooltip label */
.profile_social_links a[href^="mailto:"] > span::before {
  content: "Contact me";
  font-size: 12px; /* tweak to match */
}

.profile_social_links a[href^="mailto:"]{
  background-image: url("https://mikeclarke.dev/wp-content/uploads/2026/02/email.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 55% 55% !important;
}

/* Contact section styling */
#contact {
  text-align: center;
}

#contact p {
  font-size: 18px;
  margin: 12px 0;
}

#contact strong,
#contact a[href^="mailto:"] {
  font-size: 22px;
  font-weight: 500;
  color: var(--accent); /* your pink */
}

#contact a {
  text-decoration: none;
}

#contact a:hover {
  opacity: 0.8;
}

.contact-cta{
  display:flex;
  justify-content:center;
  gap:20px;
  margin:40px 0 20px;
  flex-wrap:wrap;
}

.cta-button{
  padding:14px 32px;        /* slightly taller + wider */
  border-radius:999px;
  text-decoration:none;
  font-size:16px;           /* bump from 14px */
  font-weight:500;
  letter-spacing:0.5px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  transition:all 0.25s ease;
  border:1px solid rgba(255,255,255,0.25);
  background:rgba(255,255,255,0.03);
  color:#fff;
}

.cta-button:hover{
  background:rgba(255,255,255,0.08);
  transform:translateY(-2px);
}

/* Optional: slight accent on hover */
.cta-button:hover{
  border-color:#b7dbd8;
}

.cta-button{
  border-color:#b7dbd8;
}

/* Remove panel background ONLY for Contact section */
#contact.content-wrapper,
#contact .post,
#contact .post-content {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Add breathing room under Contact CTA */
#contact .contact-cta {
	padding-bottom: 130px;   /* adjust 60–120px to taste */
}

/* One-page sections: stop the theme forcing huge empty height */
.home #top > .content-wrapper{
  min-height: 0 !important;
  height: auto !important;
}

/* Give every section a consistent, sane spacing */
.home #top > .content-wrapper{
  padding-bottom: 80px !important;
}

.project-video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 14px; /* matches your card vibe */
}

.project-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

html, body {
  overflow-y: auto !important;
  height: auto !important;
}

/* Center project card titles */
#projects .timeline_unit .title,
#projects .timeline_unit h2,
#projects .timeline_unit h3 {
    text-align: center !important;
}

/* Tighten title wrapper spacing */
#projects .timeline_unit .data_meta_hold {
    padding: 10px 24px !important;   /* was 28px 24px */
}

.project-video{
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  overflow: hidden;

  /* THIS is where the poster should go */
  background-image: var(--poster);
  background-color: #0e0e0e;
  background-position: center !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
}

/* Make iframe fill the box */
.project-video iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;

  opacity: 0;
  animation: vimeoFadeIn 0.2s linear 0.35s forwards;
}

@keyframes vimeoFadeIn { to { opacity: 1; } }

/* --- Lightbox overlay (CSS-only) --- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 99999;

  display: grid;
  place-items: center;

  padding: 24px;
  background: rgba(0,0,0,0.75);

  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
}

/* Open state */
.lightbox:target {
  opacity: 1;
  pointer-events: auto;
}

/* The “card” */
.lightbox__inner {
  position: relative;
  width: min(1000px, 92vw);
  max-height: 88vh;

  background: rgba(20,20,20,0.85);
  border-radius: 18px;
  overflow: hidden;

  /* subtle modern pop */
  transform: translateY(8px) scale(0.99);
  transition: transform 180ms ease;
}

.lightbox:target .lightbox__inner {
  transform: translateY(0) scale(1);
}

/* Image scales nicely */
.lightbox__inner img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 88vh;
  object-fit: contain;
}

/* Close button */
.lightbox__close {
  position: absolute;
  top: 10px;
  right: 10px;

  width: 40px;
  height: 40px;
  border-radius: 999px;

  display: grid;
  place-items: center;

  background: rgba(0,0,0,0.55);
  color: #fff;
  text-decoration: none;
  font-size: 24px;
  line-height: 1;
}

.lightbox__close:hover {
  background: rgba(0,0,0,0.75);
}

/* Optional: caption */
.lightbox__caption {
  padding: 12px 14px;
  font-size: 14px;
  opacity: 0.85;
}

/* 1) Make the lightbox unbeatable in z-index */
.lightbox{
  z-index: 2147483647 !important; /* max-ish */
}

/* 2) Force the overlay onto its own composited layer (fixes iframe weirdness) */
.lightbox,
.lightbox__inner{
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  will-change: transform;
}

/* 3) (Optional but recommended) Ensure your vimeo cards never have crazy z-index */
.project-video,
.project-video iframe{
  position: relative;
  z-index: 0 !important;
}

/* If your cards live inside #projects */
#projects,
#projects *{
  z-index: auto;
}

/* Only on mobile/tablet widths: hide AWSM's regular menu */
@media (max-width: 616px) {
  #main_menu {
    display: none !important;
  }
}

html  {
  scroll-padding-top: 90px; /* set to your menu bar height */
}

/* Footer typography refinement */
.copyright_text,
.copyright_text p {
  font-size: 0.8rem !important;
  opacity: 0.75;
}

.copyright_text p {
  visibility: hidden;
  position: relative;
}

.copyright_text p::after {
  content: "© 2026 Mike Clarke. Powered by Meks and Wordpress.com.";
  visibility: visible;
  position: absolute;
  left: 0;
  width: 100%;
  text-align: center;
}

.hero-image-parent {
  border: none !important;
  box-shadow: none !important;
	margin-bottom: -50px !important;  /* try 15–30px */
}

#home {
  padding-top: 60px !important;  /* lower this value until it feels right */
}

@media (max-width: 616px) {
  .row.section-active {
     margin-top: -80px !important;   /* tweak this */
     padding-top: 0 !important;
  }
}

/* Set a consistent, sane spacing BETWEEN sections */
.home #top > .content-wrapper + .content-wrapper{
  margin-top: -20px !important;   /* tweak this */
  padding-top: 0 !important;
}

.hero-image.hero_animate {
  outline: 1px solid rgba(255,255,255,0.06) !important;
  outline-offset: 6px !important;
  border-radius: 50% !important;
}

#home p {
  max-width: 684px;
  margin-left: auto;
  margin-right: auto;
}

.zero_margin.main-title.title {
  color: rgba(255, 255, 255, 0.98) !important;
	font-weight: 500; /* instead of default 400 */
  letter-spacing: 0.5px;
}

.subline {
  opacity: 0.85;
}

video {
  pointer-events: none;
}

/* Make all project tiles a flex column so we can control vertical layout */
#projects .timeline_unit .data_meta_hold{
  display: flex;
  flex-direction: column;
}

/* Title: always reserve 2 lines of space, clamp overflow */
#projects h3.title_with_image{
  line-height: 1.15;
  min-height: calc(2 * 1.15em);   /* always reserve 2 lines */
  margin: 0 0 10px 0;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;          /* show max 2 lines */
  overflow: hidden;
}

#projects .timeline{
  align-items: stretch;
}