/* Theme Name: James Whitby Web 
Theme URI: https://jameswhitbyweb.co.uk 
Author: James Whitby 
Author URI: https://jameswhitbyweb.co.uk 
Description: Custom WordPress theme for James Whitby Web portfolio Version: 1.0 
Text Domain: jameswhitbyweb */
 
/* Global */
:root {
     --primary: #92d5f2;
     --secondary: #f292c4;
     --accent: #FB5607;
     --dark: #0e0e0e;
     --card-bg: #141414;
     --light: #F8F9FA;
     --purple: #8338EC;
     --blue: #3A86FF;
     --hover-glow: rgba(242, 146, 196, 0.3);
     --error: #f24242;
     --light-grey: #A1A1A1;
     --border-grey: #313131;
     --white: 255, 255, 255;
}
 .bg-dark {
     background-color: var(--card-bg) !important;
}

.text-light-grey {
    color: var(--light-grey) !important;
}

 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
}
 h1,h2,h3,h4,h5,h6 {
     font-weight: 700;
     font-family: 'Inter', sans-serif;
}
 h2,h3,h4,h5,h6 {
     color: var(--secondary);
}
 p, p a {
    font-size: 1.25rem;
     font-weight: 300;
     color:white;
}
 html {
     scroll-behavior: smooth;
     scroll-padding-top: 50px;
     overflow-x: clip;
}
 body {
     font-family: 'Open Sans', sans-serif;
     background: var(--dark);
     color: var(--light);
     overflow-x: clip;
}
/* Animated background mesh */
 body::before {
     content: '';
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: radial-gradient(circle at 20% 50%, var(--primary) 0%, transparent 25%), radial-gradient(circle at 80% 80%, var(--secondary) 0%, transparent 25%), radial-gradient(circle at 40% 20%, var(--purple) 0%, transparent 30%);
     opacity: 0.05;
    // animation: meshFloat 20s ease-in-out infinite;
     pointer-events: none;
     z-index: 0;
}
 @keyframes meshFloat {
     0%, 100% {
         transform: translate(0, 0) rotate(0deg);
    }
     33% {
         transform: translate(-20px, -20px) rotate(1deg);
    }
     66% {
         transform: translate(20px, -10px) rotate(-1deg);
    }
}
.logo {
     font-family: 'Inter', sans-serif;
     font-size: 1.25rem;
     text-decoration: none;
}
 .logo span:nth-child(1) {
     color: var(--primary);
}
 .logo span:nth-child(2) {
     color: var(--secondary);
}
/* Buttons */
.cta-button, .frm_button_submit {
     display: inline-block;
     padding: 15px 40px;
     background: linear-gradient(45deg, var(--primary), var(--purple));
     color: var(--light);
     text-decoration: none;
     border-radius: 50px;
     font-weight: 700;
     position: relative;
     overflow: hidden;
     opacity: 0;
     transform: translateY(50px);
     transition: all 0.3s ease;
}
 .frm_button_submit {
     border: none;
     outline: none;
}
 .cta-button::before, .frm_button_submit::before {
     content: '';
     position: absolute;
     top: 50%;
     left: 50%;
     width: 0;
     height: 0;
     background: rgba(var(--white), 0.3);
     border-radius: 50%;
     transform: translate(-50%, -50%);
     transition: width 0.6s, height 0.6s;
}
 .cta-button:hover::before, .frm_button_submit:hover::before {
     width: 300px;
     height: 300px;
}

/* Navigation */
 .navbar-toggler, .navbar-toggler:focus {
     outline: none;
     box-shadow: none;
     border: none;
}
 .navbar {
     z-index: 1030;
}
 .navbar.scrolled {
     background: transparent;
}
 .navbar.scrolled::before {
     content: "";
     position: absolute;
     inset: 0;
     background-color: rgba(10, 9, 8, 0.8);
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
     z-index: -1;
}
 .nav-links a, .nav-links a:focus {
     color: var(--light);
     text-decoration: none;
     position: relative;
}
 .nav-links a:hover {
     color: var(--primary);
}
/* Hero Section */
 .hero-background {
     overflow: hidden;
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 800 800'%3E%3Cg fill='none' stroke='%23313131' stroke-width='1'%3E%3Cpath d='M769 229L1037 260.9M927 880L731 737 520 660 309 538 40 599 295 764 126.5 879.5 40 599-197 493 102 382-31 229 126.5 79.5-69-63'/%3E%3Cpath d='M-31 229L237 261 390 382 603 493 308.5 537.5 101.5 381.5M370 905L295 764'/%3E%3Cpath d='M520 660L578 842 731 737 840 599 603 493 520 660 295 764 309 538 390 382 539 269 769 229 577.5 41.5 370 105 295 -36 126.5 79.5 237 261 102 382 40 599 -69 737 127 880'/%3E%3Cpath d='M520-140L578.5 42.5 731-63M603 493L539 269 237 261 370 105M902 382L539 269M390 382L102 382'/%3E%3Cpath d='M-222 42L126.5 79.5 370 105 539 269 577.5 41.5 927 80 769 229 902 382 603 493 731 737M295-36L577.5 41.5M578 842L295 764M40-201L127 80M102 382L-261 269'/%3E%3C/g%3E%3Cg fill='%23313131'%3E%3Ccircle cx='769' cy='229' r='5'/%3E%3Ccircle cx='539' cy='269' r='5'/%3E%3Ccircle cx='603' cy='493' r='5'/%3E%3Ccircle cx='731' cy='737' r='5'/%3E%3Ccircle cx='520' cy='660' r='5'/%3E%3Ccircle cx='309' cy='538' r='5'/%3E%3Ccircle cx='295' cy='764' r='5'/%3E%3Ccircle cx='40' cy='599' r='5'/%3E%3Ccircle cx='102' cy='382' r='5'/%3E%3Ccircle cx='127' cy='80' r='5'/%3E%3Ccircle cx='370' cy='105' r='5'/%3E%3Ccircle cx='578' cy='42' r='5'/%3E%3Ccircle cx='237' cy='261' r='5'/%3E%3Ccircle cx='390' cy='382' r='5'/%3E%3C/g%3E%3C/svg%3E");
     background-color: var(--dark) !important;
     border-bottom: 1px solid var(--border-grey);
}
 .floating-photo {
     width: 250px;
     height: 250px;
     background-image: url('https://staging.jameswhitbyweb.co.uk/wp-content/uploads/2025/12/me.png');
     background-size: cover;
     background-position: center;
     border-radius: 50%;
     top: 20%;
     right: 10%;
     opacity: 0.8;
     transform: rotate(5deg);
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
 @keyframes float {
     0%, 100% {
         transform: translateY(0) scale(1);
    }
     33% {
         transform: translateY(-30px) scale(1.1);
    }
     66% {
         transform: translateY(30px) scale(0.9);
    }
}
 .hero-content {
     z-index: 2;
     max-width: 1000px;
     padding: 0 20px;
}
 .hero-services-bottom {
     bottom: 50px;
}
 .hero-title {
     font-size: clamp(0rem, 10vw, 6rem);
     line-height: 0.9;
     margin-bottom: 20px;
     overflow: hidden;
}
 .hero-title span {
     display: inline-block;
     opacity: 0;
     transform: translateY(100px) rotateX(90deg);
}
 .hero-subtitle {
     opacity: 0;
     transform: translateY(50px);
     margin-bottom: 40px;
}

/* Projects section */
/* Project section */
 .text-section {
     position: sticky;
     top: 100px;
}

 .g-custom {
     gap: 36px;
}
 .project-card a {
     text-decoration: none;
     color: inherit;
}
 .project-card {
     background: var(--card-bg);
     border: 1px solid rgba(var(--white), 0.05);
     overflow: hidden;
     position: relative;
     cursor: pointer;
    /* simplify: only transform + shadow transitions */
     transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
     will-change: transform;
}
 .project-card:hover {
     transform: translateY(-10px);
     border-color: var(--secondary);
     z-index: 2;
     box-shadow: 0 20px 40px rgba(242, 146, 196, 0.10), 0 0 60px rgba(242, 146, 196, 0.05);
}
.project-card:last-child .project-image {
    border-bottom: 1px solid var(--border-grey);
    background-color: var(--dark);
}
 .project-card::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: linear-gradient(135deg, transparent, var(--hover-glow));
     opacity: 0;
     transition: opacity 0.3s;
     pointer-events: none;
}
 .project-card:hover::before {
     opacity: 1;
}
 .project-image {
     width: 100%;
     height: 250px;
     position: relative;
     overflow: hidden;
}
 .project-image img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
 .project-card:hover .project-image img {
     transform: scale(1.1);
}
 .project-content {
     padding: 30px;
}
 .project-category {
     font-size: 11px;
     font-weight: 700;
     letter-spacing: 2px;
     text-transform: uppercase;
     color: var(--purple);
     margin-bottom: 15px;
}
 .project-title {
     margin-bottom: 15px;
     transition: color 0.3s;
}
 .project-description p {
     font-size: 15px;
     line-height: 1.5;
     color: var(--light-grey);
     margin-bottom: 25px;
}
 .project-tags {
     display: flex;
     flex-wrap: wrap;
     gap: 8px;
}
 .tag {
     padding: 5px 12px;
     background: rgba(var(--white), 0.05);
     border: 1px solid rgba(var(--white), 0.1);
     font-size: 12px;
     font-weight: 500;
     letter-spacing: 0.5px;
     transition: all 0.3s;
}
 .project-card:hover .tag {
     border-color: var(--secondary);
     background: rgba(242, 146, 196, 0.1);
}

/* About Section */
 .about-image {
     height: 500px;
}
 .image-card {
     width: 250px;
     height: 350px;
     background-size: cover;
}
 .image-card img {
     width: 100%;
     height: 100%;
     object-fit: cover;
}
 .card-1 {
     background-image: url('/wp-content/uploads/2025/12/me.png');
     top: 0;
     left: 0;
}
 .card-2 {
     background-image: url('/wp-content/uploads/2025/12/prom.jpg');
     top: 50px;
     left: 150px;
}
 .card-3 {
     background-image: url('/wp-content/uploads/2025/12/madrid.jpeg');
     top: 100px;
     left: 300px;
}

/* Skill Section */
.skill-badge {
     background-color: hsla(0, 0%, 100%, 0.10);
     border: 1px solid rgba(var(--white), 0.2);
     color: #fff;
     transition: all 0.3s ease;
}
 .skill-badge:hover {
     background-color: rgba(var(--white), 0.2);
}

/* Process Section */
.process-card {
  background: var(--card-bg);
  border: 1px solid rgba(var(--white), 0.1);
  border-radius: 16px;
  position: relative;
  transition: all 0.3s ease;
  overflow: hidden;
}
.process-card:hover {
    transform: translateY(-10px);
     border-color: var(--secondary);
     box-shadow: 0 20px 40px rgba(242, 146, 196, 0.10), 0 0 60px rgba(242, 146, 196, 0.05);
}
.process-number {
  top: 1.5rem;
  right: 1.5rem;
  opacity: 0.1;
  font-family: 'Inter', sans-serif;
}
.process-icon {
  width: 60px;
  height: 60px;
  background: rgba(var(--white), 0.05);
  border: 1px solid rgba(var(--white), 0.1);
}
.process-card:hover .process-icon, .process-card:hover .process-number {
  color: var(--secondary) !important;
  opacity: 1;
}

/* Contact Section */
 .frm_fields_container {
     display: grid;
     gap: 20px;
}
 .frm_form_fields label {
     margin-bottom: 12px;
}
 .frm_error_style {
     background-color: var(--error);
     padding: 10px;
     margin-bottom: 20px;
}
 .frm_error {
    color: var(--error);
    margin-top:5px;
}
 .frm_form_fields input:not([type="submit"]), .frm_form_fields textarea {
     width: 100%;
     padding: 15px;
     background: rgba(var(--white), 0.05);
     border: 2px solid transparent;
     border-radius: 10px;
     color: var(--light);
     transition: all 0.3s ease;
}
 .frm_form_fields input:focus, .frm_form_fields textarea:focus {
     outline: none;
     border-color: var(--primary);
     background: rgba(var(--white), 0.08);
}

/* Footer */
 .footer {
     border-width: 1px 0px 1px 0px;
     border-style: solid;
     border-color: var(--light-grey);
}
 .footer-links li:not(.footer-links li:last-child) {
    margin-bottom: .5rem;
}
 .footer-links a {
     color: var(--light);
     text-decoration: none;
     transition: color 0.3s ease;
}
 .footer-links a:hover {
     color: var(--primary);
}


/* Breadcrumbs */
.rank-math-breadcrumb p, .rank-math-breadcrumb p a {
  margin-bottom: 0;
  font-size: 17px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  iframe {height: 50vh !important;}
  .about-image {
         height: 400px;
    }
     .card-1 {
         width: 100%;
    }
     .hero {
         min-height: 75vh;
    }
     .hero-services-bottom {
         bottom: 20px;
    }
}
 @media (max-width: 1024px) {
     .text-section {
         position: relative;
         top: 0;
    }
}

/* Single case studies */
iframe {width: 100%; height: 70vh; margin-bottom:1.5rem;}