/*
Theme Name: Twenty Twenty-Five Child
Description: Child theme for the Twenty Twenty-Five theme
Template: twentytwentyfive
Version: 1.0.0
Tags: block-template
Text Domain: twentytwentyfive-child
*/

/* Fluid typography implementation */
:root {
--size: 1600;
}

html {
  font-size: clamp(18px, 1.1vw, 22px);
}

/* Stop shrinking below desktop */
@media (max-width: 1600px) {
html {
font-size: 20px;
}
}

/* Stop growing at 2400px */
@media (min-width: 2400px) {
html {
font-size: 25px;
}
}

.wp-block-columns {
  display: flex; /* WP may already handle widths/gaps */
  position: relative; /* required for sticky containment */
}

.left-column {
  position: sticky;
  top: calc(var(--site-header-height, 100px) + 32px);
  align-self: start;
}

@media (max-width: 600px) {

  .left-column {
    position: static;
  }

}

/* Set a max-width for <main> */
.wp-singular main {
  max-width: 3000px;
  margin: 0 auto;
}

.max-width {
    max-width: 75ch;
    margin-inline: auto;
    padding-inline: 1rem; /* optional, improves mobile UI */
}

.taxonomy-category a {
	margin-left: 5px;
}

/* Custom logo */
.site-logo svg {
  width: 55px;
  height: 55px;
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.site-logo svg:hover {
  opacity: 0.7;
}

/* Fixes unwanted spacing between inline <p> tags in flex row block. First line is for categories and tags, second line is for custom fields */
.wp-block-group.is-layout-flex {
  column-gap: 2 !important;
}
.wp-block-group.is-layout-flex.wp-container-core-group-is-layout-6c531013.wp-block-group-is-layout-flex {
  column-gap: 5px !important;
}
.wp-block-group.is-layout-flex p {
  margin: 0 !important;
}
.wp-block-post-featured-image {
  margin-left: auto !important;
  margin-right: 0 !important;
  align-self: flex-end; /* optional, if inside a flex container */
  max-width: 100%; /* or set a specific width like 400px */
}

/* Fixing the alignment for the Qualifications page */
.wp-block-post-template h3 {
    display: flex;
    align-items: center;
}

/* Fixing the alignment for the Expertise achive page */
.case-study-tags {
    text-align: right;
}

/* Fixing the alignment for the Case studies page */
.case-study-meta .wp-block-group.is-layout-flex {
  align-items: flex-start;
}
.case-study-meta .meta-label {
  display: inline-flex;
  flex-shrink: 0;
}
.case-results-wrapper .wp-block-post-title {
  line-height: 1.5;
  min-height: 3em; /* 2 lines × 1.5 */ /* uniform height only for portfolio grid */
}

/* Contact badge */
/* Row block container */
.copy-badge {
  display: inline-flex;        /* flex to enable align-items */
  align-items: center;         /* vertical centering inside flex */
  justify-content: center;     /* optional: horizontal centering */
  opacity: 0;
  transition: opacity 0.3s ease;

  /* remove fixed height & padding */
  height: auto;
  padding: 0;

  /* optional: set width to fit content */
  width: auto;
}

.footer-copy-badge {
  padding-top: 20px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Contact badge visible after clicking */
.copy-badge.show, .footer-copy-badge.show {
  opacity: 1;
}

/*For the accordion toggles*/
/* --- ACCORDION ANIMATION (CSS GRID METHOD) --- */

/* 1. Target the Panel */
.wp-block-accordion-panel > .wp-block-group {
    display: block; /* ensure group behaves like a single container */
    margin: 0;      /* remove any extra spacing */
}

.wp-block-accordion-panel {
    display: grid !important; /* Force grid layout */
    grid-template-rows: 0fr;  /* Start closed (0 fraction of space) */
    transition: grid-template-rows 0.4s ease-out !important; /* Animate the row size */
    
    /* Remove native hiding techniques so we can control it */
    height: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    
    /* Reset margins/padding to prevent spacing glitches */
    margin: 0 !important;
    padding: 0 !important;
}

/* 2. Target the Inner Content */
/* The grid animation requires an inner wrapper. 
   Fortunately, WP blocks usually have children elements we can target. */
.wp-block-accordion-panel > * {
    overflow: hidden; /* Hide content when row is 0fr */
    min-height: 0;    /* Required for grid transition to work */
}

/* 3. The Open State */
/* When WP adds the .is-open class, we expand the row to 1fr (full available space) */
.wp-block-accordion-item.is-open .wp-block-accordion-panel {
    grid-template-rows: 1fr;
}


/* --- FIXING THE "EXTRA SPACE" ISSUE --- */

/* The "spacing issue" happens because 'display: grid' stops margins 
   from collapsing. We must move the spacing from the child <p> tags 
   to the panel padding itself, but ONLY when open. */

.wp-block-accordion-panel > * {
    /* Force children to have 0 margins to prevent double-spacing */
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    
    /* Optional: Add a small transition to opacity for a smoother look */
    transition: opacity 0.4s ease-out, visibility 0.4s;
    opacity: 0;
    visibility: hidden;
}

/* When open, restore opacity and simulate the spacing via padding */
.wp-block-accordion-item.is-open .wp-block-accordion-panel > * {
    opacity: 1;
    visibility: visible;
    
    /* Add the spacing INSIDE the expanded area. 
       Adjust '20px' to match your theme's spacing. */
    padding-top: 20px; 
    padding-bottom: 20px;
}

/* 4. Icon Animation (Optional) */
.wp-block-accordion-heading__toggle-icon {
    transition: transform 0.3s ease;
}
.wp-block-accordion-item.is-open .wp-block-accordion-heading__toggle-icon {
    transform: rotate(45deg);
}

	/* Implement sticky header */
	body {
	padding-top: var(--site-header-height, 80px);
	}
html {
  overflow-y: scroll;
}
	.site-header {
	--site-header-height: 80px;
	outline: 1px solid transparent !important;	
	}
.site-header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 1000;

	background-color: rgba(255,255,255,0); /* fully transparent at top */
	transition: background-color 0.3s ease;
}

.site-header.is-scrolled {
	background-color: rgba(255,255,255,0.9); /* opaque on scroll */
	border-bottom: 1px solid rgba(0,0,0,0.05);
}

html[data-scheme="dark"] .site-header.is-scrolled {
	background-color: rgba(20,20,20,0.9);
	border-bottom: 1px solid rgba(255,255,255,0.15);
}

	@media (max-width: 768px) {
	.site-header {
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	}
	}

/* Disable sticky header below 768px (mobile portrait) */
@media (max-width: 768px) {
  .site-header {
    position: static !important;  /* no sticky/fixed */
    top: auto !important;
    left: auto !important;
    right: auto !important;
    backdrop-filter: none !important;   /* optional: remove blur */
    -webkit-backdrop-filter: none !important;
    background-color: inherit !important; /* let it be transparent or normal */
  }

  body {
    padding-top: 0 !important; /* remove offset added for sticky header */
  }
}

@media (max-width: 768px) {
  .site-header.is-scrolled {
    background-color: rgba(255,255,255,0.75); /* or dark mode variant */
    backdrop-filter: blur(8px); /* subtle blur */
  }
}

.site-footer {
    z-index: 1000;

    background-color: rgba(255, 255, 255, 0.75);
    color: #111;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid rgba(0,0,0,0.05);

    transition:
        background-color 0.3s ease,
        backdrop-filter 0.3s ease;
}

/* Dark mode base */
html[data-scheme="dark"] .site-footer {
    background-color: rgba(20, 20, 20, 0.85);
    color: #eee;
    border-top: 1px solid rgba(255,255,255,0.15);
}

/* Scroll effect (optional: slightly stronger opacity on scroll) */
.site-footer.is-scrolled {
    background-color: rgba(255, 255, 255, 0.85);
}

html[data-scheme="dark"] .site-footer.is-scrolled {
    background-color: rgba(20, 20, 20, 0.9);
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .site-footer {
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }
}

/* Fixed only on large screens */
@media (min-width: 1024px) {
    .site-footer {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
    }
}

/* Normal flow on smaller screens */
@media (max-width: 1023px) {
    .site-footer {
        position: relative;
    }
}

.site-footer p {
  height: auto;        /* remove fixed height */
  margin: 0;           /* already set, just in case */
  padding: 0 0 1.5em 0;
}

/* Style the metadata <ul> on the case study pages */
.wp-block-group ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.wp-block-group ul li {
    margin: 0;
}

/* Style the pagination links on the Portfolio page*/
/* Make the whole pagination nav a flex container centred horizontally */

.case-filters,
.wp-block-query-pagination-numbers {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2rem;
}

.case-filters .filter-btn,
.wp-block-query-pagination-numbers .page-numbers {
  background-color: transparent;
  color: inherit;
  transition: background 0.2s, color 0.2s;
  border-radius: 9999px;
  border-color: var(--wp--preset--color--primary);
  border: 1px solid;
}

.case-filters .filter-btn.is-active,
.wp-block-query-pagination-numbers .page-numbers.is-active {
  background-color: color-mix(in srgb, var(--wp--preset--color--contrast) 5%, transparent);
}

/* Pagination styling */
.wp-block-query-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  font-size: 1rem;
  margin: 2rem 0;
}

.wp-block-query-pagination-numbers,
.wp-block-query-pagination-next {
  display: flex;
  gap: 0.5rem;
}

.wp-block-query-pagination-numbers .page-numbers {
  padding: 0.5rem 0.75rem;
  border: 1px solid;
  border-color: var(--wp--preset--color--primary);
  border-radius: 4px;
  text-decoration: none;
  color: var(--wp--preset--color--primary);
  transition: background-color 0.3s, color 0.3s;
}

.wp-block-query-pagination-numbers .current {
  background-color: color-mix(in srgb, var(--wp--preset--color--contrast) 5%, transparent);
  color: var(--wp--preset--color--primary);
  border-color: var(--wp--preset--color--primary);
}

.wp-block-query-pagination-numbers .page-numbers:hover {
  background-color: color-mix(in srgb, var(--wp--preset--color--contrast) 5%, transparent);
  border-color: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--primary);
}

/* Style the AJAX query loop */
/* ================================
   FORCE GRID ITEMS TO FLOW
   ================================ */

.case-results-wrapper {
    transition: opacity 120ms ease, transform 120ms ease;
    will-change: opacity, transform;
}

.case-results-wrapper.is-transitioning {
    opacity: 0;
    transform: translateY(8px);
}

.case-results-wrapper.is-loading {
    pointer-events: none;
}

/* Optional: stagger each <li> for grid items */
.case-results-wrapper .new-content li {
    opacity: 0;
    transform: translateY(3px);
    transition: opacity 120ms cubic-bezier(.4,0,.2,1),
                transform 120ms cubic-bezier(.4,0,.2,1);
}

.case-results-wrapper .new-content li.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.case-filters-wrapper {
    scroll-margin-top: calc(var(--site-header-height, 80px) + 1.5em);
}

/* Mobile */
@media (max-width: 600px) {
  .case-filters-wrapper {
    scroll-margin-top: calc(var(--site-header-height, 30px));
  }
}

.case-studies-wrapper
ul.wp-block-post-template {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    /*gap: 2.5rem; Removed so that the grid has the spacing on all pages */
}

/* CRITICAL: undo width rules on items */
.case-studies-wrapper
ul.wp-block-post-template > li {
    width: auto !important;
    max-width: none !important;
}

/* Large screens */
/* Large desktop (wide screens, e.g. 27") */
@media (min-width: 1600px) {
    .case-studies-wrapper
    ul.wp-block-post-template {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* Tablet */
@media (max-width: 1024px) {
    .case-studies-wrapper
    ul.wp-block-post-template {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Mobile */
@media (max-width: 640px) {
    .case-studies-wrapper
    ul.wp-block-post-template {
        grid-template-columns: 1fr;
    }
}

/* Style the service categories buttons for the Portfolio page */
/* Container styling can be shared */
.case-filters, .wp-block-query-pagination-numbers {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2rem;
}

.case-filters .filter-btn, .wp-block-query-pagination-numbers .page-numbers {
    background-color: transparent;
    color: inherit;
    transition: background 0.2s, color 0.2s;
	border-radius: 9999px;
	border-color: var(--wp--preset--color--primary);
	border: 1px solid;
}

.case-filters .filter-btn.is-active, .wp-block-query-pagination-numbers .page-numbers.is-active {
    background-color: color-mix(in srgb, var(--wp--preset--color--contrast) 5%, transparent);
}

/* Style the portfolio cover images */
/* Portfolio cover image hover effect */
/* Container clips the image */
.wp-block-post-featured-image {
  overflow: hidden;
}

/* Image zooms smoothly */
.wp-block-post-featured-image img {
  transition: transform 0.35s ease;
  will-change: transform;
}

/* Hover state */
.wp-block-post-featured-image:hover img {
  transform: scale(1.25);
  transition: transform 0.5s cubic-bezier(0.2, 0.6, 0.2, 1);

}

/* ---------- Services sublist bullets ---------- */
.services-sublist {
  list-style: none;
  padding-left: 0 !important;
  margin-left: 0 !important;
}

/* ---------- CTA pill arrow ---------- */
.cta-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.25em 0.5em;
  border-radius: 999px;
  color: inherit;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

/* arrow */
.cta-pill::before {
  content: '';
  width: 0.9em;
  height: 0.9em;
  background-color: currentColor;
  mask: url('https://ceciliabiasutti.com/wp-content/uploads/2026/01/arrow.svg') no-repeat center;
  -webkit-mask: url('https://ceciliabiasutti.com/wp-content/uploads/2026/01/arrow.svg') no-repeat center;
  mask-size: contain;
  -webkit-mask-size: contain;
}

.cta-pill:hover {
  background-color: color-mix(
    in srgb,
    currentColor 5%,
    transparent
  );
}

/* ---------- Tools logos ---------- */
.logo {
  max-height: 80px; /* larger size as requested */
  width: auto;      /* keep aspect ratio */
  display: block;   /* remove inline baseline quirks */
}

/* ---------- Portfolio cover images compatibility with dark mode ---------- */
/*html[data-scheme="dark"] .wp-post-image {
    filter: invert(1);
}

.wp-post-image {
    transition: filter 0.5s ease;
}
html[data-scheme="dark"] .invert-on-dark {
    filter: invert(1);
}

/* ---------- StylizeX switcher button adjustments ---------- */

/* Base switcher button */
.js-stylizedx-switcher {
  border-radius: 999px;
  width: 2.3rem;               /* slightly bigger than icon for breathing room */
  height: 2.3rem;              /* matches width for a square button */
  padding: 0.23rem;            /* space between icon and button edge */
  display: inline-flex;
  align-items: center;         /* vertically center icon */
  justify-content: center;     /* horizontally center icon */
  vertical-align: middle;      /* aligns button with menu text if inline-block */
  box-sizing: border-box;      /* ensures padding is included in width/height */
  color: var(--wp--preset--color--primary); /* default light mode color */
}

/* SVG sizing */
.js-stylizedx-switcher svg {
  width: 24px !important;
  height: 24px !important;
  fill: currentColor !important; /* ensures icon matches button color */
}

/* -------- Light mode -------- */
html[data-scheme="light"] .js-stylizedx-switcher {
  border-color: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--primary);
}

html[data-scheme="light"] .js-stylizedx-switcher:hover {
  /* optional hover style for light mode */
  /* e.g., slight background change if desired */
}

/* -------- Dark mode -------- */
html[data-scheme="dark"] .js-stylizedx-switcher {
  border-color: #fff !important;
  color: #fff;                /* icon and text color */
}

html[data-scheme="dark"] .js-stylizedx-switcher:hover {
  background-color: #fff !important;
  border-color: var(--wp--preset--color--primary) !important;
  color: #000 !important;     /* icon/text color on hover */
}

/* Hover effect for SVG (applies automatically because fill = currentColor) */
html[data-scheme="dark"] .js-stylizedx-switcher:hover svg {
  fill: currentColor !important; /* ensures icon color matches hover text */
}

/* -------- Optional: force default icon color on load -------- */
html[data-scheme="dark"] .js-stylizedx-switcher svg,
html[data-scheme="light"] .js-stylizedx-switcher svg {
  fill: currentColor !important; /* ensures correct color immediately */
}

/* Optional: menu alignment tweak if your nav uses flex */
.main-navigation, .menu-item {
    display: flex;
    align-items: center;       /* vertically align items with the toggle */
}
.hidden-stylizedx-group {
    display: none !important;
}

/* Styling for the case studies on the Services/Expertise pages */
.case-study-columns {
    gap: 1.5rem !important; /* adjust as needed */
}

/* Ensure no extra padding inside each column */
.case-study-columns > .wp-block-column {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Corrects anchor links behaviour */
#project-data,
#project-description {
    scroll-margin-top: calc(var(--site-header-height, 80px) + 1.25em);
}

/* Style the term description block for the Tag archive pages */
.wp-block-term-description {
    font-family: var(--wp--preset--font-family--manrope);
    font-size: var(--wp--preset--font-size--xx-large);
    font-style: normal;
    font-weight: 500;
    line-height: 1.2;
}

/* Correct responsive width for home page */
@media (max-width: 600px) {
  .intro-paragraph > * {
    max-width: 100% !important;
  }
}

/* Correct contact card spacing */
.contact-button-row {
  row-gap: 0 !important; /* spacing between links inside */
  margin: 0 !important;
  padding: 0 !important;
}

.contact-email-address p {
  padding-bottom: 0.5em;
}

/* Back to top link */
/* Base style: hidden by default */
.back-to-top {
  display: none;          /* hide on desktop/tablet */
}

/* Show only on mobile */
@media (max-width: 768px) {
  .back-to-top {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

html {
  scroll-behavior: smooth;
}

/* Mobile-only footer styling */
@media (max-width: 600px) {

  footer {
    text-align: center;
  }

  footer .wp-block-columns {
    text-align: center;
  }

  footer .wp-block-column {
    text-align: center;
  }

  footer .wp-block-column .wp-block-group,
  footer .wp-block-column .wp-block-row {
    justify-content: center;
  }

 .site-footer .wp-block-columns .wp-block-column:nth-child(2) {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

/* Tablet-only footer styling */
@media (min-width: 601px) and (max-width: 1024px) {
  footer {
    padding-bottom: 40px;
  }
}}

/* Correct vertical alignment for Courses Archive page */