/*
Theme Name: ITSready
Description: Child theme d'ITSready.cat basat en Twenty Twenty-Five
Template: twentytwentyfive
Author: ITSready
Version: 1.0.5
Text Domain: itsready
*/

/* ============================================
   ITSready — Custom Styles
   ============================================ */

/* 1. HERO overlay moradú al 70% */
.wp-block-cover .wp-block-cover__background.has-background-dim.has-background-dim-70,
.wp-block-cover .wp-block-cover__background.has-background-dim.has-background-dim-20 {
  opacity: 0.7 !important;
}

/* 2. Reset padding global */
.wp-site-blocks {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* 3. Cover: full width */
.wp-block-cover.alignfull {
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: 100vw !important;
}

/* 4. Service section: personatges */
.wp-block-column.has-background .wp-block-image img {
  max-width: 220px !important;
  max-height: none !important;
  width: 100% !important;
  height: auto !important;
  object-fit: contain;
}

/* 5. Service cards hover */
.wp-block-column.has-background {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
.wp-block-column.has-background:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.16);
}

/* 6. Logos institucionals (about i footer) */
.wp-block-group .wp-block-group .wp-block-image img {
  max-height: 40px !important;
  max-width: 115px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain;
}

/* 7. Button transitions */
.wp-block-button__link {
  transition: all 0.2s ease;
  text-decoration: none !important;
}
.wp-block-button__link:hover {
  opacity: 0.88;
  transform: translateY(-1px);
}

/* 8. FAQ — details/summary */
details.wp-block-details {
  border-radius: 12px !important;
  transition: box-shadow 0.25s ease;
}
details.wp-block-details[open] {
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.18);
}
details.wp-block-details > summary {
  list-style: none !important;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--wp--preset--font-family--poppins), sans-serif;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.4;
  user-select: none;
}
details.wp-block-details > summary::-webkit-details-marker,
details.wp-block-details > summary::marker {
  display: none !important;
  content: '' !important;
}
details.wp-block-details > summary::after {
  content: '+';
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 1;
  min-width: 1.5rem;
  text-align: right;
  flex-shrink: 0;
  margin-left: 1rem;
}
details.wp-block-details[open] > summary::after {
  content: '\2212';
}
details.wp-block-details > *:not(summary) {
  margin-top: 0.75rem;
  font-family: var(--wp--preset--font-family--poppins), sans-serif;
  font-size: 0.95rem;
  line-height: 1.65;
}

/* 9. Separadors footer */
.wp-block-separator.has-background {
  border: none !important;
  height: 1px !important;
}

/* 10. HERO — patró d'icones de fons + stamps Modak */
.hero-section {
  background-image: url('https://itsready.cat/wp-content/uploads/2026/04/oZNWryFB.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #ffffff;
  position: relative;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  padding-top: 18vh !important;
  padding-bottom: 4vh !important;
}
.hero-section > .hero-logo {
  position: absolute;
  top: 2rem;
  left: 3rem;
  margin: 0 !important;
}
.hero-section .hero-title {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.hero-section .hero-stamps { margin-top: 1.5rem !important; }
.hero-section .wp-block-buttons { margin-top: 2.5rem !important; margin-bottom: 0 !important; }

.hero-stamps {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: clamp(1rem, 3vw, 2.5rem);
  flex-wrap: wrap;
  text-align: center;
}
.hero-stamps .stamp {
  font-family: 'Modak', cursive;
  font-weight: 400;
  font-size: clamp(2.6rem, 6vw, 4.2rem);
  line-height: 1;
  letter-spacing: 1px;
  display: inline-block;
  text-shadow:
     5px 0 0 #6d4bf5, -5px 0 0 #6d4bf5, 0 5px 0 #6d4bf5, 0 -5px 0 #6d4bf5,
     4px 3px 0 #6d4bf5, -4px 3px 0 #6d4bf5, 4px -3px 0 #6d4bf5, -4px -3px 0 #6d4bf5,
     3px 4px 0 #6d4bf5, -3px 4px 0 #6d4bf5, 3px -4px 0 #6d4bf5, -3px -4px 0 #6d4bf5,
     5px 2px 0 #6d4bf5, -5px 2px 0 #6d4bf5, 5px -2px 0 #6d4bf5, -5px -2px 0 #6d4bf5,
     2px 5px 0 #6d4bf5, -2px 5px 0 #6d4bf5, 2px -5px 0 #6d4bf5, -2px -5px 0 #6d4bf5;
}
.hero-stamps .stamp-yellow { color: #ffb200; }
.hero-stamps .stamp-pink { color: #ff66c4; }
.hero-stamps .stamp-cyan { color: #00d3e0; }

/* 10a. ABOUT arrow — recreate SVG icon stripped by sanitizer */
.about-header {
  padding-top: 4.5rem !important;
  padding-bottom: 4.5rem !important;
}
.about-header .wp-block-columns {
  align-items: stretch !important;
}
.about-header .wp-block-column:has(.about-arrow) {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: flex-end !important;
  align-self: stretch !important;
}
.about-header .about-arrow {
  display: block;
  width: 90px;
  height: 90px;
  margin: 0 !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'><circle cx='40' cy='40' r='36' fill='none' stroke='%23ffffff' stroke-width='5'/><path d='M40 22 L40 58 M26 44 L40 58 L54 44' stroke='%23ffffff' stroke-width='5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  text-decoration: none !important;
  transition: transform 0.2s ease;
}
.about-header .about-arrow:hover {
  transform: translateY(3px);
}
@media (max-width: 782px) {
  .about-header {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
  .about-header .about-arrow {
    width: 60px !important;
    height: 60px !important;
  }
}

/* 10b. CONTACT social icons — recreate SVG icons stripped by sanitizer */
.contact-social-icon::before {
  content: '';
  display: block;
  width: 60%;
  height: 60%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
.contact-social-icon[aria-label="WhatsApp"]::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'><path d='M.057 24l1.687-6.163c-1.041-1.804-1.588-3.849-1.587-5.946.003-6.556 5.338-11.891 11.893-11.891 3.181.001 6.167 1.24 8.413 3.488 2.245 2.248 3.481 5.236 3.48 8.414-.003 6.557-5.338 11.892-11.893 11.892-1.99-.001-3.951-.5-5.688-1.448l-6.305 1.654zm6.597-3.807c1.676.995 3.276 1.591 5.392 1.592 5.448 0 9.886-4.434 9.889-9.885.002-5.462-4.415-9.89-9.881-9.892-5.452 0-9.887 4.434-9.889 9.884-.001 2.225.651 3.891 1.746 5.634l-.999 3.648 3.742-.981zm11.387-5.464c-.074-.124-.272-.198-.57-.347-.297-.149-1.758-.868-2.031-.967-.272-.099-.47-.149-.669.149-.198.297-.768.967-.941 1.165-.173.198-.347.223-.644.074-.297-.149-1.255-.462-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.297-.347.446-.521.151-.172.2-.296.3-.495.099-.198.05-.372-.025-.521-.075-.148-.669-1.611-.916-2.206-.242-.579-.487-.501-.669-.51l-.57-.01c-.198 0-.52.074-.792.372s-1.04 1.016-1.04 2.479 1.065 2.876 1.213 3.074c.149.198 2.095 3.2 5.076 4.487.709.306 1.263.489 1.694.626.712.226 1.36.194 1.872.118.571-.085 1.758-.719 2.006-1.413.248-.695.248-1.29.173-1.414z'/></svg>");
}
.contact-social-icon[aria-label="Email"]::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.8'><rect x='2' y='4' width='20' height='16' rx='2'/><path d='M2 6l10 7 10-7'/></svg>");
}

/* 10c. NON-HOME pages — simplified layout (logo only, no menu, mini footer) */
body:not(.home) > .wp-site-blocks > header.wp-block-template-part,
body:not(.home) > .wp-site-blocks > footer.wp-block-template-part {
  display: none !important;
}
.itsready-page-header {
  display: none;
}
body:not(.home) .itsready-page-header {
  display: block;
  background: #ffffff;
  padding: 1.5rem 3rem;
}
body:not(.home) .itsready-page-header img {
  max-width: 130px;
  height: auto;
  display: block;
}
body:not(.home) .wp-block-post-content,
body:not(.home) .entry-content {
  max-width: 900px;
  margin: 2rem auto 4rem;
  padding: 0 2rem;
}
body:not(.home) .wp-block-post-title {
  max-width: 900px;
  margin: 1.5rem auto 0.5rem;
  padding: 0 2rem;
}
body:not(.home) h1,
body:not(.home) h2,
body:not(.home) h3,
body:not(.home) h4,
body:not(.home) h5,
body:not(.home) h6 {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 700 !important;
  color: #6d4bf5 !important;
  letter-spacing: -0.02em;
}
body:not(.home) h1 { font-size: 2.5rem !important; line-height: 1.15 !important; }
body:not(.home) h2 { font-size: 1.8rem !important; line-height: 1.2 !important; margin-top: 2rem !important; }
body:not(.home) h3 { font-size: 1.3rem !important; line-height: 1.3 !important; margin-top: 1.5rem !important; }
body:not(.home) h4 { font-size: 1.1rem !important; line-height: 1.3 !important; }
body:not(.home) .wp-block-post-content p,
body:not(.home) .wp-block-post-content li,
body:not(.home) .wp-block-post-content a {
  font-family: 'Poppins', sans-serif;
  color: #1a1a1a;
  line-height: 1.6;
}
body:not(.home) .wp-block-post-content a {
  color: #6d4bf5;
  text-decoration: underline;
}
.itsready-mini-footer {
  display: none;
}
body:not(.home) .itsready-mini-footer {
  display: block;
  background-color: #e8e8e8;
  padding: 1rem 3rem;
  text-align: center;
  font-family: 'Poppins', sans-serif;
  font-size: 0.85rem;
  color: #666;
}
.itsready-mini-footer a {
  color: #666;
  text-decoration: underline;
}
@media (max-width: 782px) {
  body:not(.home) main {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  body:not(.home) .itsready-page-header { padding: 1rem 1rem; }
  body:not(.home) .itsready-page-header img { max-width: 110px; }
  body:not(.home) .wp-block-post-content,
  body:not(.home) .wp-block-post-title { padding: 0 !important; }
  body:not(.home) h1 { font-size: 1.8rem !important; }
  body:not(.home) h2 { font-size: 1.4rem !important; }
  body:not(.home) h3 { font-size: 1.15rem !important; }
  body:not(.home) .itsready-mini-footer { padding: 1rem 1rem; }
}

/* 10d. Cookie banner — ITSready purple */
:root {
  --cmplz-primary-color: #6d4bf5;
  --cmplz-color-primary: #6d4bf5;
  --cmplz-button-primary-background: #6d4bf5;
  --cmplz-button-primary-border: #6d4bf5;
  --cmplz-button-accept-background-color: #6d4bf5;
  --cmplz-button-accept-border-color: #6d4bf5;
  --cmplz-link-color: #6d4bf5;
}
#cmplz-cookiebanner-container .cmplz-btn,
#cmplz-cookiebanner-container button[class*="accept"],
.cmplz-cookiebanner .cmplz-accept,
.cmplz-cookiebanner button.cmplz-btn.cmplz-accept-all,
.cmplz-cookiebanner .cmplz-btn.cmplz-accept {
  background-color: #6d4bf5 !important;
  border-color: #6d4bf5 !important;
  color: #ffffff !important;
}
.cmplz-cookiebanner a,
#cmplz-cookiebanner-container a {
  color: #6d4bf5 !important;
}
.cmplz-cookiebanner .cmplz-btn.cmplz-accept:hover,
.cmplz-cookiebanner .cmplz-btn.cmplz-accept-all:hover {
  background-color: #4a30c8 !important;
  border-color: #4a30c8 !important;
}

/* 10f. Logos institucionals — flexbox to center incomplete rows */
.logos-section .logos-grid {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 3rem 2rem;
}
.logos-section .logos-grid > a {
  flex: 0 1 200px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 10e. FAQ — ensure <strong> renders bold over inherited weight 300 */
.faq-content strong,
.faq-content strong a {
  font-weight: 700 !important;
}

/* 11. Responsive mòbil */
@media (max-width: 782px) {
  .wp-block-columns.alignwide {
    flex-wrap: wrap !important;
  }
  .wp-block-column {
    flex-basis: 100% !important;
    min-width: 100% !important;
    margin-bottom: 1.5rem;
  }
  .wp-block-cover .wp-block-cover__inner-container {
    padding: 2rem 1rem !important;
  }
  .wp-block-group .wp-block-group .wp-block-image img {
    max-height: 32px !important;
    max-width: 90px !important;
  }

  /* HERO mobile — cluster centered with tight gaps, logo absolute top-left */
  .hero-section {
    min-height: 100vh !important;
    padding: 3vh 1.5rem !important;
    justify-content: center !important;
    align-items: center;
    position: relative;
    background-size: auto 115% !important;
    background-position: center bottom !important;
  }
  .hero-section > .hero-logo {
    position: absolute !important;
    top: 1.5rem !important;
    left: 1.5rem !important;
    margin: 0 !important;
    align-self: auto !important;
  }
  .hero-section > .hero-logo img {
    max-width: 110px !important;
    height: auto !important;
  }
  .hero-section .hero-title {
    font-size: clamp(1.6rem, 7vw, 2.4rem) !important;
    line-height: 1.15 !important;
    margin: 0 !important;
    text-align: center;
  }
  .hero-stamps {
    flex-direction: column !important;
    align-items: center !important;
    gap: 0.3rem !important;
    margin-top: 1.5rem !important;
    margin-bottom: 0 !important;
    width: 100%;
  }
  .hero-stamps .stamp {
    font-size: clamp(2rem, 11vw, 3rem) !important;
    text-shadow:
     4px 0 0 #6d4bf5, -4px 0 0 #6d4bf5, 0 4px 0 #6d4bf5, 0 -4px 0 #6d4bf5,
     3px 3px 0 #6d4bf5, -3px 3px 0 #6d4bf5, 3px -3px 0 #6d4bf5, -3px -3px 0 #6d4bf5,
     4px 2px 0 #6d4bf5, -4px 2px 0 #6d4bf5, 4px -2px 0 #6d4bf5, -4px -2px 0 #6d4bf5,
     2px 4px 0 #6d4bf5, -2px 4px 0 #6d4bf5, 2px -4px 0 #6d4bf5, -2px -4px 0 #6d4bf5 !important;
  }
  .hero-cta .wp-block-button__link {
    font-size: 1rem !important;
    padding: 0.9rem 2.2rem !important;
  }
  .hero-section .wp-block-buttons {
    margin-top: 1.5rem !important;
    margin-bottom: 0 !important;
  }
  /* Higher specificity than global styles for mobile button sizing */
  .hero-section .hero-cta a.wp-block-button__link {
    font-size: 0.95rem !important;
    padding: 0.85rem 2rem !important;
    white-space: nowrap !important;
  }
  /* Equalize lateral padding across all sections to match purple block */
  .services-section,
  .about-header,
  .about-body,
  .faq-section,
  .logos-section,
  .site-footer {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }
  /* Smaller social icon circles on mobile */
  .contact-social-icon {
    width: 44px !important;
    height: 44px !important;
  }
}