/*
Theme Name: Joe's Portfolio
Theme URI: https://wordpress.com/themes/blank-canvas-3/
Description: Blank Canvas is a barebones starter theme, stripped off of content templates but only a footer and a header. With its minimal styling, Blank Canvas is a great theme starting fresh with your website.
Version: 1.0.11
Author: Joe R
Author URI: https://automattic.com
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: joes-portfolio
*/

/* .wp-block-gutsliders-before-after.gutslider-dff4279f {
    max-width: 100%;
    max-height: 100%;
    margin: 0;
}
*/

figure.wp-block-image.size-full.is-resized.wp-duotone-unset-2 {
  float: right !important;
}

html {
  scroll-behavior: smooth;
}

/* For the Stickey Header */
.wp-block-group.alignfull.has-background-color.has-white-color.has-black-background-color.has-text-color.has-background.has-link-color.wp-elements-9e6acf2f8c7a005bc95e46c383a78127.has-global-padding.is-layout-constrained.wp-container-core-group-is-layout-23b1a4dc.wp-block-group-is-layout-constrained.wp-container-3.is-position-sticky {
  position: fixed;
  width: 100% !important;
  /* top: 0; */
  left: 0 !important;
  right: 0 !important;
  z-index: 1000 !important;
}

/* For the Stickey Header Projects*/
.wp-block-group.alignfull.has-background-color.has-white-color.has-black-background-color.has-text-color.has-background.has-link-color.wp-elements-2ecab5e064a6632b694d48f91a59892c.has-global-padding.is-layout-constrained.wp-container-core-group-is-layout-23b1a4dc.wp-block-group-is-layout-constrained.wp-container-3.is-position-sticky {
  position: fixed;
  width: 100% !important;
  /* top: 0; */
  left: 0 !important;
  right: 0 !important;
  z-index: 1000 !important;
}

/* For the Stickey Header Pages */
.wp-block-group.alignfull.has-background-color.has-white-color.has-black-background-color.has-text-color.has-background.has-link-color.wp-elements-96cfb07f225c4eec3501047aa242dfca.has-global-padding.is-layout-constrained.wp-container-core-group-is-layout-23b1a4dc.wp-block-group-is-layout-constrained {
  position: fixed;
  width: 100% !important;
  /* top: 0; */
  left: 0 !important;
  right: 0 !important;
  z-index: 1000 !important;
}

/* Animation Backgroud Particles */
.wp-block-group.particle_spacer.has-global-padding.is-layout-constrained.wp-block-group-is-layout-constrained {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}

/* Container that holds the image and border */
.post-thumbnail,
.wp-block-post-featured-image {
  display: block;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
}

/* The image inside the container */
.post-thumbnail img,
.wp-block-post-featured-image img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  transition: transform 0.4s ease;
}

/* Zoom effect on image only */
.post-thumbnail:hover img,
.wp-block-post-featured-image:hover img {
  transform: scale(1.1);
}

/* Fix Portfolio Featured Image Height */
img.attachment-post-thumbnail.size-post-thumbnail.wp-post-image {
  /* height: max(18vw, 30vh) !important; */
  object-fit: cover;
}

/* Forces the image height of the portfolio section's featured images */
figure.alignwide.wp-block-post-featured-image {
  /* height: max(18vw, 30vh) !important; */
}

/* Excerpt Read More Link into a button and not just a text link */
a.wp-block-post-excerpt__more-link {
  display: inline-block;
  padding: 10px 18px;
  background-color: #FF9400;
  /* Button color */
  color: #fff !important;
  font-weight: 400;
  text-decoration: none;
  border-radius: 6px;
  transition: background 0.3s ease, transform 0.2s ease;
  Margin-top: 15px;
}

a.wp-block-post-excerpt__more-link:hover {
  background-color: #000000;
  /* Hover color */
}

/* This hides the blog post block on the home page since I didn't want to delete it */
.hide-blog-post-plugin {
  display: none !important;
}

/* Container for the featured image */
.post-password-required .wp-block-post-featured-image {
  position: relative;
  /* display: inline-block; */
  overflow: hidden;
}

/* Blur the image */
.post-password-required .wp-block-post-featured-image img {
  filter: blur(8px);
}

/* Add the lock icon overlay */
/* Make sure the image wrapper can hold overlays */
.post-password-required .wp-block-post-featured-image {
  position: relative;
}

/* Circle */
.post-password-required .wp-block-post-featured-image::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 85px;
  height: 85px;
  background: rgba(210, 210, 210, 0.6);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  pointer-events: none;
}

/* Lock icon */
.post-password-required .wp-block-post-featured-image::after {
  content: "\f023";
  font-family: "Font Awesome 7 Free";
  font-weight: 900;
  font-size: 40px;
  color: rgba(0, 0, 0, 0.6);

  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scaleX(1.08);
  z-index: 3;
  pointer-events: none;
}

.lock-icon i {
  color: #b3b3b3;
  transform: scaleX(1.08);
}

/* Adds Margins for the Projects Password Input Form when a post is password protected. */
form.post-password-form {
  margin-left: 5%;
  margin-right: 5%;
}

/* Contact Icons */
.fa-envelope {
  color: #FF9400;
  /* Change to your brand color */
  margin-right: 5px;
}

footer .fa-envelope {
  color: #fff;
  /* White icon in the footer */
  margin-right: 5px;
}

.fa-mobile {
  color: #FF9400;
  /* Change to your brand color */
  /* margin-right: 10px; */
}

footer .fa-mobile {
  color: #fff;
  /* White icon in the footer */
  margin-right: 5px;
}

.fa-linkedin {
  color: #FF9400;
  /* Change to your brand color */
  margin-right: 8px;
}

footer .fa-linkedin {
  color: #fff;
  /* White icon in the footer */
  margin-right: 13px;
}

.fa-location-dot {
  color: #FF9400;
  /* Change to your brand color */
  /* margin-right: 10px; */
}

footer .fa-location-dot {
  color: #fff;
  /* White icon in the footer */
  margin-right: 5px;
}

.fa-globe {
  color: #FF9400;
  /* Change to your brand color */
  margin-right: 5px;
}

.download-button .fa-download {
  color: #FF9400;
}

.download-button .wp-block-button__link:hover .fa-download {
  color: #fff;
}

/* Verified_User Icon */
.verified_user {
  color: #666666;
}

/* Keep featured images in Query Loop consistent */
.wp-block-post-featured-image img {
  width: 100%;
  height: auto;
  object-fit: cover;
  aspect-ratio: 16 / 9;
  /* Adjust ratio if needed */
}

a:hover {
  text-decoration: underline;
}

/* This Hides the "Progress Bars" in the About Section of the Home Page */
div#wpsm_progress_b_row_171 {
  display: none;
}

/* Sets the H4 margins */
h4.wp-block-heading {
  margin: 1% 0 1% 0;
}

/* For the particles on the Portfolio Pages */
canvas#my-particles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  z-index: -1;
  pointer-events: none;
}

/* --- Tunable variables --- */
:root {
  --link-underline-offset: 4px;
  /* how far below the text */
  --link-underline-thickness: 2px;
  /* line thickness */
}

/* Base: content links only (adjust selectors if needed) */
.entry-content a,
.wp-block-post-content a,
.prose a {
  /* add/remove containers based on your theme */
  text-decoration: underline;
  text-decoration-thickness: var(--link-underline-thickness);
  text-underline-offset: var(--link-underline-offset);
  text-decoration-skip-ink: auto;
}

/* States (keep underlines consistent) */
.entry-content a:hover,
.wp-block-post-content a:hover,
.prose a:hover {
  text-decoration-thickness: calc(var(--link-underline-thickness) + 1px);
}

.entry-content a:focus-visible,
.wp-block-post-content a:focus-visible,
.prose a:focus-visible {
  outline: 2px solid currentColor;
  /* strong keyboard focus */
  outline-offset: 2px;
}

/* Exclusions: don't style navs/buttons/menus etc. */
nav a,
.wp-block-navigation a,
.menu a,
button a,
a.button,
.wp-element-button,
.wp-block-button__link {
  text-decoration: none;
}

/* --- Fallback for older browsers (no text-underline-offset) --- */
@supports not (text-underline-offset: 1px) {

  .entry-content a,
  .wp-block-post-content a,
  .prose a {
    text-decoration: none;
    /* disable default underline */
    border-bottom: var(--link-underline-thickness) solid currentColor;
    padding-bottom: var(--link-underline-offset);
  }

  .entry-content a:hover,
  .wp-block-post-content a:hover,
  .prose a:hover {
    border-bottom-width: calc(var(--link-underline-thickness) + 1px);
  }
}

/* ---------------------------
   Underlines only for body text links
   --------------------------- */
.entry-content a,
.wp-block-post-content a,
.prose a {
  text-decoration: underline;
  text-decoration-thickness: var(--link-underline-thickness);
  text-underline-offset: var(--link-underline-offset);
  text-decoration-skip-ink: auto;
}

/* Hover effect for text links */
.entry-content a:hover,
.wp-block-post-content a:hover,
.prose a:hover {
  text-decoration-thickness: calc(var(--link-underline-thickness) + 1px);
}

/* ---------------------------
   Exclusions: no underline on titles, navs, buttons
   --------------------------- */
.entry-title a,
.post-title a,
.wp-block-navigation a,
nav a,
.menu a,
button a,
a.button,
.wp-element-button,
.wp-block-button__link,
a.wp-block-post-excerpt__more-link {
  text-decoration: none !important;
  /* border-bottom: none !important; */
  /* kill fallback underline too */
}

/* No underline on linked headings inside content */
.entry-content :is(h1, h2, h3, h4, h5, h6) a,
.wp-block-post-content :is(h1, h2, h3, h4, h5, h6) a,
.wp-block-heading>a {
  text-decoration: none !important;
  border-bottom: none !important;
  /* kills fallback line */
}

/* Prevent hover underline from global a:hover */
.entry-content :is(h1, h2, h3, h4, h5, h6) a:hover,
.wp-block-post-content :is(h1, h2, h3, h4, h5, h6) a:hover,
.wp-block-heading>a:hover {
  text-decoration: none !important;
  border-bottom: none !important;
}

/* Remove underline from post date/time links */
time a,
.entry-meta time a,
.wp-block-post-date a {
  text-decoration: none !important;
  border-bottom: none !important;
  /* remove fallback underline */
}

/* Prevent underline on hover too */
time a:hover,
.entry-meta time a:hover,
.wp-block-post-date a:hover {
  text-decoration: none !important;
  border-bottom: none !important;
}

/* Button Style Hover State */
/* Button hover */
.wp-block-button__link:hover {
  background: #000;
  color: #fff !important;
  transition: background 0.3s ease, transform 0.2s ease;
}


/* iPhone/Safari fix: ensure dots/icons sit above the rail line */
@media (max-width: 768px) {

  .shtl.vertical-timeline .shtl__bar,
  .shtl.vertical-timeline .shtl__bar-inner {
    position: relative;
    z-index: 0;
    /* base layer */
  }

  .shtl.vertical-timeline .shtl__line,
  .shtl.vertical-timeline .shtl__progress {
    position: absolute;
    z-index: 1;
    /* line under dots */
  }

  .shtl.vertical-timeline .shtl__dots-viewport,
  .shtl.vertical-timeline .shtl__dots {
    position: relative;
    overflow: visible;
    /* don't clip pins */
    z-index: 2;
  }

  .shtl.vertical-timeline .shtl__dot {
    position: absolute;
    /* JS sets top/left */
    z-index: 3;
    /* pins above the line */
  }

  /* Force hardware compositing on the circle (iOS Safari) */
  .shtl.vertical-timeline .shtl__dot-circle {
    position: relative;
    z-index: 3;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    will-change: transform;
  }
}

/* Resume Header Margins */
.rb-template-default .rbt-section-heading {
  margin: 20px 0 20px !important;
}

/* Mobile Resume Padding Tweaks */
@media screen and (max-width: 900px) {
  .rb-template-container {
    padding: 45px 0 45px 0 !important;
  }
}

/* Beforo & After Badges */
.gutslider-ba-item .gutslider-label.horizontal.before-label {
  left: 0;
  border-radius: 6px;
  font-weight: 600;
}

.gutslider-ba-item .gutslider-label.horizontal.after-label {
  right: 0;
  border-radius: 6px;
  background-color: rgba(255, 148, 0, 0.97);
  font-weight: 600;
}

/* Base sticky header */
header.wp-block-template-part {
  position: sticky;
  top: 0;
  /* no gap when logged out */
  z-index: 1000;
  /* or whatever you needed */
}

/* Only offset when the WP admin bar is showing */
.admin-bar header.wp-block-template-part {
  top: var(--wp-admin--admin-bar--height, 32px);
}

/* Fallback for older WP where the var doesn't exist & mobile toolbar is taller */
@media (max-width: 782px) {
  .admin-bar header.wp-block-template-part {
    top: 46px;
  }
}

.site-header {
  /* position: fixed; /* or sticky, if you prefer */
  /* top: calc(0px + var(--wp-admin--admin-bar--position-offset, 0px)); */
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1000;
  /* higher than content */
}


/* Base pill style for company terms inside the Query Loop */
.company-pill,
.company-pill a,
.company-pill span {
  font-size: .85rem;
  line-height: 1.6;
}

/* Wrap sets spacing if there are multiple companies */
.company-pill {
  display: inline-flex;
  gap: .4rem;
  flex-wrap: wrap;
}

/* Each term becomes a pill */
.company-pill a,
.company-pill span {
  display: inline-flex;
  align-items: center;
  padding: .18rem .6rem;
  border-radius: 999px;
  background: #f5f5f5;
  border: 1px solid rgba(0, 0, 0, .06);
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease, transform .05s ease;
  white-space: nowrap;
}

/* Optional little building icon 
.company-pill a::before,
.company-pill span::before {
  content: "🏢";
  font-size: .9em;
  margin-right: .4rem;
  line-height: 1;
  opacity: .8;
}*/

/* Hover/active states for linked terms */
/* .company-pill a:hover {
  background: #eeeeee;
  border-color: rgba(0,0,0,.12);
} */
.company-pill a:active {
  transform: translateY(1px);
}

/* Dark mode polish (respects system preference) */
@media (prefers-color-scheme: dark) {

  .company-pill a,
  .company-pill span {
    background: #e8e8e8;
    border-color: rgba(255, 255, 255, .08);
  }

  /* .company-pill a:hover {
    background: #262626;
    border-color: rgba(255,255,255,.15);
  }*/
}

/* Make company terms look like plain text and ignore clicks */
.company-pill a {
  pointer-events: none;
  /* no clicks */
  cursor: default;
  /* no hand cursor */
  text-decoration: none;
  /* no underline */
  color: inherit;
  /* match surrounding text color */
}


/* Add space between list items in post/page content only */
:where(.wp-block-post-content, .entry-content) :is(ul, ol):not(.wp-block-navigation__container)>li:not(:last-child) {
  margin-block-end: .5rem;
  /* space between list items */
}

/* Keep nested lists tight so the spacing doesn't double up */
:where(.wp-block-post-content, .entry-content) li> :is(ul, ol) {
  margin-block-start: 0.3em;
  /* small gap before a nested list */
}

/* Safety: ensure navigation menus are unaffected */
.wp-block-navigation .wp-block-navigation__container>li {
  margin: 0;
  /* no extra gaps in the menu */
}


/* ================== To make Portfolio Cards Fade in on scroll =================== */
/* Hidden ? visible */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 420ms ease, transform 420ms ease;
  will-change: opacity, transform;
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Optional: tiny within-row stagger */
.reveal[data-delay] {
  transition-delay: var(--row-stagger, 0ms);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    transition: none;
    transform: none;
    opacity: 1;
  }
}


.has-scroll-hint {
  position: relative;
}

.has-scroll-hint::after {
  content: "";
  pointer-events: none;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 56px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
  opacity: 1;
  transition: opacity 260ms ease;
}

.has-scroll-hint.is-scrolled::after {
  opacity: 0;
}


/* Items hidden by the filter only */
.filter-hidden {
  display: none !important;
}

/* Items forced visible while a filter is active */
.filter-force-visible {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

/* Cards are hidden by CLASS, not inline styles */
.wp-block-post-template .reveal:not(.is-visible),
.wp-block-post-template [data-aos]:not(.aos-animate) {
  opacity: 0;
  visibility: hidden;
}



/* Filter buttons layout */
/* ========== Visual styles (global) ========== */

/* Filter buttons as pills */
.company-filter .filter {
  appearance: none;
  border: 1px solid rgba(0, 0, 0, .1);
  background: #929292 !important;
  padding: .25rem .7rem;
  border-radius: 999px;
  font-size: .9rem;
  line-height: 1.6;
  cursor: pointer;
  color: white;
}

.company-filter .filter.is-active {
  border-color: rgba(0, 0, 0, .25);
  background: #1F1F1F !important;
  color: white;
  font-weight: bold;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  .company-filter .filter {
    background: #1f1f1f;
    border-color: rgba(255, 255, 255, .12);
  }

  .company-filter .filter.is-active {
    background: #262626;
    border-color: rgba(255, 255, 255, .25);
  }
}


/* Header layout: title left, filter pills right */
.portfolio-header-scope .wp-block-columns>.wp-block-column:last-child {
  display: flex;
  justify-content: flex-end !important;
  align-items: center;
}

/* Wrapper around "Filter:" label + pills */
.portfolio-header-scope .pills-wrap {
  display: flex;
  justify-content: flex-end !important;
  align-items: center;
  margin-left: auto;
}

/* Keep pills in a row and nicely spaced */
.portfolio-header-scope .company-filter {
  display: inline-flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin: 0;
}

/* Label spacing (if you're using it) */
.portfolio-header-scope .filter-label {
  margin-right: 10px !important;
  white-space: nowrap;
}



/* ========== Header-scoped layout ========== */
/* Assumes: 
   - A Group around the Columns with class "portfolio-header-scope"
   - In the right column, a Group wrapping label + shortcode with class "pills-wrap"
   - The label Paragraph has class "filter-label"
*/

/* Neutralize core auto-centering inside the header scope; do not force a width */
.portfolio-header-scope .is-layout-constrained> :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: none !important;
}

/* Make both columns share the same row height */
.portfolio-header-scope .wp-block-columns {
  align-items: stretch !important;
}

/* Right column: vertically center contents */
.portfolio-header-scope .wp-block-columns>.wp-block-column:last-child {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* Wrapper around label + pills: push to the right and keep items centered */
.portfolio-header-scope .pills-wrap {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .5rem;
  margin-left: auto;
  /* pushes the whole wrapper to the right edge */
}

/* Label sits snug next to the pills */
.portfolio-header-scope .filter-label {
  display: inline-flex;
  flex: 0 0 auto;
  margin: 0;
  white-space: nowrap;
  font-weight: 600;
  opacity: .85;
}

/* Collapse the Shortcode block wrapper so it does not take full width */
.portfolio-header-scope .pills-wrap>.wp-block-shortcode {
  display: inline-flex;
  flex: 0 0 auto;
  width: auto;
  margin: 0;
  padding: 0;
}

/* Pills row: compact, wraps nicely, no auto-push */
.portfolio-header-scope .company-filter {
  display: inline-flex;
  flex: 0 0 auto;
  gap: .5rem;
  flex-wrap: wrap;
  margin: 0;
}

/* Prevent pills from squishing into single letters */
.portfolio-header-scope .company-filter .filter {
  flex-shrink: 0;
  white-space: nowrap;
}

/* Optional: center the whole pack on small screens */
@media (max-width: 640px) {
  .portfolio-header-scope .pills-wrap {
    justify-content: center;
    margin-left: 0;
  }
}


/* Mobile: put the filter under the title and left align it */
@media (max-width: 640px) {

  /* Make the columns behave like a stacked header */
  .portfolio-header-scope .wp-block-columns {
    align-items: flex-start !important;
    gap: .5rem;
  }

  /* Right column (the one with the label+pills) */
  .portfolio-header-scope .wp-block-columns>.wp-block-column:last-child {
    justify-content: flex-start;
    /* was flex-end on desktop */
    align-items: center;
    width: 100%;
    margin-left: 0;
  }

  /* Wrapper around label + pills: push to the right and keep items centered */
  .portfolio-header-scope .pills-wrap {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .5rem;
    margin-left: auto !important;
    /* this is what pushes it to the right */
  }

  /* Keep a 10px space between label and first pill */
  .portfolio-header-scope .filter-label {
    margin-right: 10px;
  }

  /* Pills row stays compact and wraps nicely */
  .portfolio-header-scope .company-filter {
    display: inline-flex;
    flex: 0 0 auto;
    gap: .5rem;
    flex-wrap: wrap;
    margin: 0;
  }
}



/* ========== Contact Modal ========== */
/* Hide Contact nav item on the home page (WP adds .home to <body>) */
.home .menu-item-contact {
  display: none !important;
}

/* Modal shell */
.contact-modal {
  position: fixed;
  inset: 0;
  visibility: hidden;
  /* allow transitions when hidden */
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease, visibility 0s linear 220ms;
  /* delay visibility toggle until fade ends */
  z-index: 9999;
}

.contact-modal.is-open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition: opacity 220ms ease, visibility 0s;
  /* show immediately */
}

/* Base backdrop element: no transitions here */
.contact-backdrop {
  position: absolute;
  inset: 0;
  pointer-events: auto;
}

/* --- Layer 1: the blur (fades in) --- */
.contact-backdrop::before {
  content: "";
  position: absolute;
  inset: 0;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  /* Safari */
  opacity: 0;
  /* start hidden */
  transition: opacity 700ms ease;
  /* fade the blur */
  will-change: opacity;
  transform: translateZ(0);
  /* force GPU layer */
}

/* --- Layer 2: the tint (fades in) --- */
.contact-backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .45);
  opacity: 0;
  /* start hidden */
  transition: opacity 600ms ease;
  /* tint slightly earlier */
  will-change: opacity;
  transform: translateZ(0);
}

/* When open: fade both layers */
.contact-modal.is-open .contact-backdrop::before {
  opacity: 1;
}

.contact-modal.is-open .contact-backdrop::after {
  opacity: 1;
}

/* Optional: delay the blur so the tint appears first, reducing "pop" */
.contact-modal.is-open .contact-backdrop::before {
  transition-delay: 80ms;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {

  .contact-backdrop::before,
  .contact-backdrop::after {
    transition: none !important;
  }
}


.contact-modal.is-open .contact-backdrop {
  opacity: 1;
}

/* Dialog */
.contact-dialog {
  position: relative;
  width: min(960px, 92vw);
  margin: 10vh auto;
  /* your �push down� spacing */
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, .18);
  overflow: hidden;

  transform: translateY(-20px) scale(.98);
  opacity: 0;
  transition:
    transform 280ms cubic-bezier(.22, .61, .36, 1),
    /* nice springy ease */
    opacity 220ms ease;
}

/* Dialog: start slightly above + transparent */
.contact-modal .contact-dialog {
  transform: translateY(-48px) scale(.985);
  opacity: 0;
  will-change: transform, opacity;
  transition:
    transform 360ms cubic-bezier(.22, .61, .36, 1),
    opacity 240ms ease;
}

.contact-modal.is-open .contact-dialog {
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {

  .contact-modal,
  .contact-backdrop,
  .contact-dialog {
    transition: none !important;
  }
}

/* Close button */
/* Make the close button obvious and on top in modals */
.contact-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: #111;
  /* icon uses currentColor */
  box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
  cursor: pointer;
  z-index: 5;
  /* sit above image/content */
}

/* Make sure the SVG actually renders and inherits color */
.contact-close svg {
  width: 24px;
  height: 24px;
  display: block;
  stroke: currentColor;
  /* belt-and-suspenders */
  stroke-width: 2;
  stroke-linecap: round;
  /* match your SVG lines */
  fill: none;
}

.contact-close svg {
  pointer-events: none;
  /* ensures clicks go to button, not SVG */
}

/* Content layout */
.contact-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  min-height: 360px;
}

.contact-left {
  padding: clamp(22px, 3vw, 40px);
  background: #f6f6f6;
}

.contact-right {
  position: relative;
  background: #222;
}

.contact-right img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Mobile: stack, text first, image second */
@media (max-width: 720px) {
  .contact-content {
    display: flex;
    /* simpler stacking than grid for mobile */
    flex-direction: column;
  }

  .contact-left {
    order: 1;
    padding: 20px;
    /* tighten spacing on small screens */
  }

  .contact-right {
    order: 2;
    /* image goes BELOW the text */
    display: block;
    /* ensure it�s visible */
    height: 220px;
    /* set a nice mobile height */
    overflow: hidden;
    /* crop if needed */
  }

  .contact-right img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
}

/* Force modal typography to use your theme colors */
.contact-modal,
.contact-modal h2,
.contact-modal p,
.contact-modal li,
.contact-modal a {
  color: var(--wp--preset--color--foreground, #222);
  /* fallback if theme variable missing */
  font-family: var(--wp--preset--font-family--body, inherit);
}

/* Heading override */
.contact-modal h2 {
  color: var(--wp--preset--color--heading, #000);
  /* or your theme's heading color */
}

/* Paragraph / list text */
.contact-modal p,
.contact-modal li {
  color: var(--wp--preset--color--foreground, #333);
  /* or body text color */
}

/* Links */
.contact-modal a {
  color: var(--wp--preset--color--link, #333);
  text-decoration: underline;
}

.contact-modal a:hover {
  color: var(--wp--preset--color--link-hover, #FF9400);
}

/* Set a modal-only icon color token */
.contact-modal {
  --modal-icon: #FF9400;
}

/* orange */

/* Font icons & any element that uses currentColor */
.contact-modal .icon,
.contact-modal i,
.contact-modal [class^="fa-"],
.contact-modal .fa,
.contact-modal .material-icons {
  color: var(--modal-icon) !important;
}

/* Inline SVG icons (logos-only, custom SVG, etc.) */
.contact-modal svg {
  fill: var(--modal-icon) !important;
  stroke: var(--modal-icon) !important;
  /* if strokes are used */
}

/* Password Protected Project Page Design */
.protected-form {
  max-width: 60%;
  margin: 5% !important;
}

.protected-form input {
  width: 100%;
  padding: 0.8rem;
  font-size: 1rem;
}

.protected-form button {
  margin-top: .5rem;
  padding: .6rem 1rem;
  border-radius: 6px;
}

/* Fix Navigation Wrapping So it Doesn't Cover Content */
:root {
  --header-h: 0px;
  /* live header height */
  --admin-bar-h: 0px;
  /* live WP admin bar height */
}


/* Make in-page jumps/anchors land below the header */
html {
  scroll-padding-top: calc(var(--header-h) + 8px + var(--admin-bar-h));
}

/* Ensure admin bar stays above */
#wpadminbar {
  position: fixed;
  z-index: 100000;
}


/*Float Footer to the bottom always */
/* Parent must be a flex column that fills the viewport */
.wp-site-blocks {
  min-height: 100vh;
  /* fallback */
  min-height: 100dvh;
  /* modern browsers/mobile */
  display: flex;
  flex-direction: column;
}

/* Let the footer take the remaining space above it */
.wp-site-blocks>.wp-block-template-part__footer,
.wp-site-blocks>footer {
  margin-top: auto;
  /* pushes footer to bottom */
  /* flex-shrink: 0;    <- usually not needed with margin-top:auto */
}

/* Optional: avoid margins �lifting� the footer */
main,
.wp-site-blocks>.wp-block-group {
  margin-block: 0;
}

/* WP's common mobile breakpoint */
@media (max-width: 782px) {

  /* Overlay/drawer container on mobile */
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
  .wp-block-navigation__responsive-dialog .wp-block-navigation__responsive-container-content {
    box-sizing: border-box;
    padding-inline-end: max(5%, env(safe-area-inset-right));
    /* right in LTR, left in RTL */
  }

  /* Add comfy tap space to each link too (optional but nice) */
  .wp-block-navigation .wp-block-navigation-item__content {
    display: block;
    padding-block: 12px;
    padding-inline: 16px;
  }
}

/* Put caption under the lightbox image and keep it aligned to the image width */
.ba-fsl-caption {
  background: rgba(0, 0, 0, .78);
  color: #fff;
  border-radius: 6px;
}




/* 1) Let the column/section stretch children to full height */
.wp-block-columns,
.wp-block-column {
  align-items: stretch;
}

/* If your slider sits inside a column, make that column a flex container */
.wp-block-column {
  display: flex;
  flex-direction: column;
}


/* Force GutSlider containers to fill their section instead of using vh */
.ba-gutslider .swiper-container-outer {
  height: 100% !important;
}


/* 2) Make the GutSlider block fill the available height */
.ba-gutslider {
  flex: 1 1 auto;
  height: 100% !important;
  min-height: clamp(320px, 45vh, 620px);
  width: 100%;
  position: relative;
  overflow: hidden;
}

/* 3) Force Swiper internals to also fill the height */
.ba-gutslider .swiper,
.ba-gutslider .swiper-wrapper,
.ba-gutslider .swiper-slide {
  height: 100% !important;
}

/* 4) Make images behave like your single images */
.ba-gutslider img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  /* switch to contain if you do not want cropping */
  display: block;
}


/* Target the exact filter column from your Inspect snippet */
.wp-block-column.pills-col.has-global-padding.is-content-justification-right.is-layout-constrained.wp-block-column-is-layout-constrained {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
}

/* Kill the constrained layout auto-centering INSIDE this column */
.wp-block-column.pills-col.has-global-padding.is-content-justification-right.is-layout-constrained.wp-block-column-is-layout-constrained> :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: none !important;
}

/* Make the label behave inline and not sit above */
.wp-block-column.pills-col.has-global-padding.is-content-justification-right.is-layout-constrained.wp-block-column-is-layout-constrained>.wp-block-heading.filter-label {
  margin: 0 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  flex: 0 0 auto !important;
}

/* Make the wrapper shrink to its contents (prevents it from becoming a full-width block) */
.wp-block-column.pills-col.has-global-padding.is-content-justification-right.is-layout-constrained.wp-block-column-is-layout-constrained>.wp-block-group.pills-wrap {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  /* important: the wrapper has has-global-padding */
}

/* Kill constrained layout auto-centering INSIDE the wrapper too */
.wp-block-column.pills-col.has-global-padding.is-content-justification-right.is-layout-constrained.wp-block-column-is-layout-constrained>.wp-block-group.pills-wrap.is-layout-constrained> :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: none !important;
}

/* Keep the pills in one compact row */
.wp-block-column.pills-col.has-global-padding.is-content-justification-right.is-layout-constrained.wp-block-column-is-layout-constrained .company-filter {
  display: inline-flex !important;
  align-items: center !important;
  gap: .5rem !important;
  margin: 0 !important;
}

.ai-button .wp-block-button__link {
  font-size: 20px;
  padding: 8px 20px;
  border-radius: 6px;
}

.ai-button .material-symbols-outlined {
  font-size: 22px;
}

/* For AI button in the About section */
/* .ai-button .wp-block-button__link::before {
  content: "";
  width: 1em;
  height: 1em;
  display: inline-block;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center; */

/* Simple spark icon as inline SVG */
/* background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M12 2l1.8 5.2L19 9l-5.2 1.8L12 16l-1.8-5.2L5 9l5.2-1.8L12 2zm7 12l.9 2.1L22 17l-2.1.9L19 20l-.9-2.1L16 17l2.1-.9L19 14zM5 14l1.1 2.9L9 18l-2.9 1.1L5 22l-1.1-2.9L1 18l2.9-1.1L5 14z'/></svg>"); 
}*/

.wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
}

.material-symbols-outlined {
  font-variation-settings:
    'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 24;
}

.material-symbols-filled {
  font-family: "Material Symbols Outlined";
  font-variation-settings:
    'FILL' 1,
    'wght' 400,
    'GRAD' 0,
    'opsz' 24;
}


/* All buttons smaller on mobile */
@media (max-width: 768px) {
  .wp-block-button__link {
    font-size: 16px;
    padding: 10px 16px;
  }
}

/* About section layout */
@media (max-width: 768px) {
  .about-me-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px;
  }

  .about-me-row .wp-block-buttons {
    display: flex;
    flex-direction: row;
    gap: 12px;
    width: auto;
  }

  .about-me-row .ai-button .wp-block-button__link,
  .about-me-row .wp-block-button .wp-block-button__link {
    font-size: 16px;
    padding: 10px 16px;
  }
}

@media (max-width: 786px) {
  .wp-block-buttons.is-layout-flex.wp-container-core-buttons-is-layout-c0ff379e.wp-block-buttons-is-layout-flex {
    margin-top: 5px !important;
    margin-bottom: 10px !important;
  }
}

/* Time Line Icon Color to White */

i.fa-solid.fa-graduation-cap {
  color: #fff;
}

i.fa-solid.fa-pen-nib {
  color: #fff;
}

/* Orange Ross AI Nav Link */
li.has-small-font-size.wp-block-navigation-item.ross-ai-open.ai-nav.wp-block-navigation-link {
  color: #FF9400;
}

/* Tablet: use hamburger menu earlier without showing desktop links */
@media (max-width: 1024px) {

  /* Hide only the normal desktop nav that sits directly in the header nav block */
  header .wp-block-navigation:not(.has-background)>.wp-block-navigation__container {
    display: none !important;
  }

  /* Show the hamburger button */
  header .wp-block-navigation__responsive-container-open {
    display: flex !important;
    align-items: center;
  }

  /* Keep header nav aligned right */
  header .wp-block-navigation {
    justify-content: flex-end !important;
  }

  /* Only when opened, show the responsive menu contents */
  header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container {
    display: none !important;
  }

  header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem;
  }
}

/* About section: stack title + buttons earlier on tablets */
@media (max-width: 1333px) {
  .about-me-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px;
  }

  .about-me-row .wp-block-buttons {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px;
    width: auto;
  }

}

/* Move profile image under timeline earlier (tablet) */
@media (max-width: 1200px) {
  .about-timeline-row {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .about-timeline-row>.wp-block-column {
    width: 100% !important;
    flex-basis: 100% !important;
  }

  .about-timeline-row>.wp-block-column:first-child {
    order: 1 !important;
  }

  .about-timeline-row>.wp-block-column:last-child {
    order: 2 !important;
  }
}

/* Stop nested header flex rows from wrapping at tablet size */
@media (max-width: 1024px) {
  header.wp-block-template-part .is-layout-flex {
    flex-wrap: nowrap !important;
    row-gap: 0 !important;
  }
}

/* Better tablet/mobile nav spacing while keeping right alignment */
@media (max-width: 1024px) {
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
    padding: 80px 28px 32px 28px !important;
  }

  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
    gap: 12px !important;
  }

  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
    padding: 10px 0 !important;
    font-size: 20px !important;
  }
}

@media (max-width: 1024px) {
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
    top: 24px !important;
    right: 24px !important;
  }
}

/* Keep Ross AI nav link orange in tablet/mobile overlay menu */
@media (max-width: 1024px) {
  .wp-block-navigation__responsive-container.is-menu-open .ross-ai-open .wp-block-navigation-item__content {
    color: #FF9400 !important;
  }
}

/* Tablet + mobile nav overlay styling */
@media (max-width: 1024px) {

  /* Black flyout background */
  .wp-block-navigation__responsive-container.is-menu-open {
    background-color: #000 !important;
  }

  /* Make all nav links white */
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
    color: #fff !important;
  }

  /* Keep Ross AI orange */
  .wp-block-navigation__responsive-container.is-menu-open .ross-ai-open .wp-block-navigation-item__content {
    color: #FF9400 !important;
  }

  /* Make the X icon white */
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
    color: #fff !important;
  }

  /* Make hamburger icon white too (when visible) */
  .wp-block-navigation__responsive-container-open {
    color: #fff !important;
  }

  /* SVG icons inherit white */
  .wp-block-navigation__responsive-container-open svg,
  .wp-block-navigation__responsive-container-close svg {
    fill: currentColor !important;
  }
}

/* Remove unnecessary nav gap when hamburger menu is active */
@media (max-width: 1024px) {
  header .wp-block-navigation {
    gap: 0 !important;
  }
}

/* ----------------- Living Resume controls ----------------- */

/* Controls row */
.resume-controls {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: flex-start !important;
  flex-wrap: wrap;
  gap: 16px;
}

/* Dropdown group */
.resume-controls .resume-select-group {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: 100%;
  margin: 0 !important;
}

/* Remove Gutenberg spacing inside dropdown group */
.resume-select-group>* {
  margin-top: 0;
  margin-bottom: 8px;
}

.resume-select-group>*:last-child {
  margin-bottom: 0;
}

/* Resume dropdown */
.resume-dropdown {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  box-sizing: border-box;
  width: auto;
  min-width: 360px;
  max-width: 100%;
  min-height: 52px;

  padding: 10px 48px 10px 20px;

  border: 1px solid #d7d7d7;
  border-radius: 6px;

  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 20px;

  color: #000;
  font-family: inherit;
  font-size: 20px;
  line-height: 1.4;

  cursor: pointer;
}

.resume-dropdown:hover {
  border-color: #000;
}

.resume-dropdown:focus-visible {
  outline: 2px solid #FF9400;
  outline-offset: 2px;
}

/* Button container */
.resume-controls .wp-block-buttons {
  flex: 0 0 auto !important;
  width: auto !important;
  margin: 0 !important;
}

.resume-controls .wp-block-button {
  margin: 0 !important;
}

/* Resume button */
.resume-controls .ai-button .wp-block-button__link {
  font-size: 20px;
  padding: 8px 20px;
  border-radius: 6px;
}

/* Mobile */
@media (max-width: 768px) {
  .resume-controls {
    flex-direction: column;
    align-items: stretch !important;
  }

  .resume-select-group,
  .resume-dropdown,
  .resume-controls .wp-block-buttons {
    width: 100% !important;
  }

  .resume-dropdown {
    min-width: 0;
    min-height: 44px;
    padding: 10px 44px 10px 16px;
    font-size: 16px;
    background-position: right 14px center;
  }

  .resume-controls .ai-button .wp-block-button__link {
    font-size: 16px;
    padding: 10px 16px;
  }
}