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

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    background: rgba(210 210 210 / 60%);
    border-radius: 50%;

    display: flex;             /* center the icon inside */
    align-items: center;
    justify-content: center;

    width: 85px;               /* make it a square */
    height: 85px;              /* same as width */
}

.lock-icon i {
  color: #b3b3b3;
}

/* 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;
}

/* 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;
}

.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: 1rem; /* 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; }