/*
 Theme Name:   SwanCode
 Theme URI:    https://chasevz.github.io/Portfolio/home.html
 Description:  A custom theme for GeneratePress
 Author:       Chase VanderZwan
 Author URI:   https://tomusborne.com
 Template:     generatepress
 Version:      1.1
*/

/* Hide the page title on all pages */
.page .entry-title {
    display: none;
}

/* Site Wrapper */
.site-wrapper {
    width: 100%;
    max-width: 1920px;
    margin-inline: auto;
}

/* Remove bottom margin on last paragraph */
.gb-container p:last-child:last-of-type {
    margin-bottom: 0px;
}

.block-editor-block-list__layout .gb-container p:nth-last-child(2) {
    margin-bottom: 0px;
}

.ar-16-9 {
    aspect-ratio: 16/9;
}

.ar-9-16 {
    aspect-ratio: 9/16;
}

.ar-4-3 {
    aspect-ratio: 4/3;
}

.ar-1-1 {
	aspect-ratio: 1/1;
}

/* Visually Hidden */
.visually-hidden:not(:focus):not(:active) {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

/* No Underline */
.no-ul, .no-ul a {
	text-decoration: none;
}

/* Make fade-in elements visible in editor */
.editor-styles-wrapper .elm-fade-in-up,
.editor-styles-wrapper .elm-fade-in-left,
.editor-styles-wrapper .elm-fade-in-right,
.editor-styles-wrapper .elm-fade-in-down {
    opacity: 1 !important;
    transform: none !important;
}

/* Base fade-in styles */
.elm-fade-in-up,
.elm-fade-in-left,
.elm-fade-in-right,
.elm-fade-in-down {
    opacity: 0;
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Individual transform directions */
.elm-fade-in-up {
    transform: translateY(100px);
}

.elm-fade-in-left {
    transform: translateX(-100px);
}

.elm-fade-in-right {
    transform: translateX(100px);
}

.elm-fade-in-down {
    transform: translateY(-100px);
}

/* Animation when element comes into view */
.elm-fade-in-up.in-view,
.elm-fade-in-left.in-view,
.elm-fade-in-right.in-view,
.elm-fade-in-down.in-view {
    opacity: 1;
    transform: translate(0);
}

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
    .elm-fade-in-up,
    .elm-fade-in-left,
    .elm-fade-in-right,
    .elm-fade-in-down {
        transition: none;
        opacity: 1;
        transform: none;
    }
}

/* Animation Delay Utilities */
.delay-100 { --fade-delay: 100ms; }
.delay-200 { --fade-delay: 200ms; }
.delay-300 { --fade-delay: 300ms; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .delay-100,
    .delay-200,
    .delay-300 {
        transition: none !important;
        animation-delay: 0ms !important;
        transition-delay: 0ms !important;
    }
}

/* Remove default Group block spacing */
.wp-block-group {
    margin: 0 !important;
    padding: 0 !important;
}

.wp-block-group > .wp-block-group__inner-container {
    margin: 0 !important;
    padding: 0 !important;
}

/* One-time animation classes */
.elm-fade-in-up-once {
    opacity: 0;
    transform: translateY(100px);
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.elm-fade-in-left-once {
    opacity: 0;
    transform: translateX(-100px);
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.elm-fade-in-right-once {
    opacity: 0;
    transform: translateX(100px);
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.elm-fade-in-down-once {
    opacity: 0;
    transform: translateY(-100px);
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Animation when element comes into view */
.elm-fade-in-up-once.in-view,
.elm-fade-in-left-once.in-view,
.elm-fade-in-right-once.in-view,
.elm-fade-in-down-once.in-view {
    opacity: 1;
    transform: translate(0);
}

.elm-fade-in-up.in-view,
.elm-fade-in-left.in-view,
.elm-fade-in-right.in-view,
.elm-fade-in-down.in-view,
.elm-fade-in-up-once.in-view,
.elm-fade-in-left-once.in-view,
.elm-fade-in-right-once.in-view,
.elm-fade-in-down-once.in-view {
    transition-delay: var(--fade-delay, 0ms);
    animation-delay: var(--fade-delay, 0ms);
}

/* Character-by-character text reveal utility */
.reveal-text span {
    opacity: 0;
    display: inline-block;
    transition: opacity 0.25s cubic-bezier(.4,0,.2,1);
}

/* Parallax background utility (JS sets background-position) */
.parallax-bg {
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: scroll;
    background-position: center center;
    will-change: background-position;
}

/* Image zoom-in effect */
.zoom-in-on-view {
    transition: transform 1.2s cubic-bezier(.4,0,.2,1), opacity 1.2s cubic-bezier(.4,0,.2,1);
    transform: scale(1.58);
    opacity: 0.1;
}
.zoom-in-on-view.zoomed-in {
    transform: scale(1);
    opacity: 1;
}

.parallax-mouse {
  background-size: cover;
  background-position: center center;
  position: relative;
  overflow: hidden;
  height: 400px;
}

@keyframes underlineGrow {
  to {
    transform: scaleX(1);
  }
}

.timeline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  justify-self: center;
  gap: 0px;
  position: relative;
  margin: 0 auto;
  margin-left: auto !important;
  margin-right: auto !important;
}
.timeline::before {
  content: '';
  position: absolute;
  top: 100px;
  left: 40px;
  right: 40px;
  height: 4px;
  background: #3b7d3b;
  z-index: 0;
  border-radius: 2px;
}

/* Safari-specific timeline line fix */
@supports (-webkit-appearance: none) {
  .timeline::before {
    left: 50px !important;
    right: 50px !important;
    width: calc(100% - 100px) !important;
  }
}

/* Flickity carousel styles */
.carousel {
    /* Flickity will be initialized via JavaScript */
}

/* Single cell per slide */
.carousel-cell {
    width: 100%;
    margin-right: 0;
}

/* Two cells per slide */
.carousel-cell-2 {
    width: calc(50% - 2rem * 1/2);
    margin-right: 2rem;
}

/* Three cells per slide */
.carousel-cell-3 {
    width: calc(33.333% - 1rem * 2/3);
    margin-right: 1rem;
}

/* Full-width background utility for GenerateBlocks */
.gb-container.full-width-bg,
div.full-width-bg {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    position: relative !important;
}

/* Constrain content within full-width backgrounds */
.gb-container.full-width-bg .gb-inside-container,
div.full-width-bg .gb-inside-container {
    max-width: 1400px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

/* Alternative approach using alignfull */
.wp-block-group.alignfull {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
}

.wp-block-group.alignfull .gb-container {
    max-width: 1400px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Force full-width for any element with full-width-bg class */
*[class*="full-width-bg"] {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    position: relative !important;
}

/* Full-width backgrounds within carousel cells */
.carousel-cell .full-width-bg,
.carousel-cell-2 .full-width-bg,
.carousel-cell-3 .full-width-bg {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    position: relative !important;
}

/* Constrain content within carousel full-width backgrounds */
.carousel-cell .full-width-bg .gb-inside-container,
.carousel-cell-2 .full-width-bg .gb-inside-container,
.carousel-cell-3 .full-width-bg .gb-inside-container {
    max-width: 1400px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

/* Ensure parent containers don't constrain */
.site-wrapper,
.container,
.wp-block-group,
.gb-container {
    overflow-x: visible !important;
}

/* Prevent horizontal overflow from 100vw elements */
body {
    overflow-x: hidden !important;
}

/* Alternative solution: Use CSS custom property to handle scrollbar width */
:root {
    --vw: 1vw;
}

/* For browsers that support it, use the actual available width */
@supports (width: 100dvw) {
    .gb-container.full-width-bg,
    div.full-width-bg,
    .wp-block-group.alignfull,
    *[class*="full-width-bg"],
    .carousel-cell .full-width-bg,
    .carousel-cell-2 .full-width-bg,
    .carousel-cell-3 .full-width-bg {
        width: 100dvw !important;
        max-width: 100dvw !important;
    }
}

/* Flickity carousel arrow styling */
.flickity-button {
    background: transparent !important;  /* Remove background */
    opacity: 0 !important;  /* Hide arrows by default */
    transition: opacity 0.3s ease !important;
}

/* Show arrows on carousel hover */
.carousel:hover .flickity-button {
    opacity: 0.7 !important;  /* Show arrows when hovering over carousel */
}

/* Show arrows more prominently when hovering directly on them */
.flickity-button:hover {
    opacity: 1 !important;
    background: rgba(145, 145, 145, 0.8) !important;  /* gray background on hover */
}

/* Style the arrow icons */
.flickity-button-icon {
    fill: #070707 !important;  /* Dark arrow color */
}

/* Position adjustments */
.flickity-button:disabled {
    opacity: 0.3 !important;  /* Very faded when disabled */
}