/*
Theme Name: Twenty Twenty-Four Child
Description: Child theme of Twenty Twenty-Four
Author: CJ Montage
Author URI: https://cj-montage.dk
Template: twentytwentyfour
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twenty-twenty-four-child
*/

.image-caption-margin-bottom-0 figcaption {
  margin-bottom: 0;
}

/* Header contact links - custom underline styling */
header .contact a {
  text-decoration: none !important;
  position: relative;
  display: inline-block;
}

header .contact a::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -4px;
  width: 0;
  height: 2px;
  background-color: currentColor;
  transition: width 0.15s ease, left 0.15s ease;
}

/* Adjust underline position for smaller email text */
header .contact.has-medium-font-size a::after {
  bottom: -8px;
}

header .contact a:hover::after {
  width: 100%;
  left: 0;
}

header .contact a:hover {
  text-decoration: none !important;
}

.product-specifications a {
  text-decoration: none;
}

.product-specifications a:hover {
  text-decoration: underline;
}

.line-height-24 * {
  line-height: 24px;
}

.vertical-align-center.is-layout-flex,
.vertical-align-center {
  display: flex !important;
  align-items: center !important;
}

.vertical-align-center>*,
.vertical-align-center>figure,
.vertical-align-center>p {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  align-self: center !important;
}

.vertical-align-center img {
  display: block !important;
}

/* Product Image Position Adjustments for Trimmed Images */
.np40-position-trim {
  position: relative;
  left: 2px;
}

.np4w-position-trim {
  position: relative;
  left: 6px;
}

.np10-position-trim {
  position: relative;
  left: 12px;
}

@media (max-width: 768px) {
  .np40-position-trim {
    left: 1px;
  }

  .np4w-position-trim {
    left: 8px;
  }

  .np10-position-trim {
    left: 16px;
  }
}

@media (max-width: 480px) {
  .np40-position-trim {
    left: 1px;
  }

  .np4w-position-trim {
    left: 6px;
  }

  .np10-position-trim {
    left: 12px;
  }
}

.social-icons {
  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: center;
}

.social-icons .icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  /* shows pointer on hover */
  transition: transform 0.2s ease;
}

.social-icons .icon svg {
  width: 18px;
  height: 18px;
}

.social-icons .icon.facebook {
  background-color: #1877F2;
}

.social-icons .icon.linkedin {
  background-color: #0866FF;
}

/* Hover: scale by 5% */
.social-icons .icon:hover {
  transform: scale(1.05);
  cursor: pointer;
  /* ensures mouse icon is shown */
}

.social-inline {
  display: flex;
  flex-direction: column;
  /* stack children vertically */
  gap: 1em;
  align-items: flex-start;
  /* aligns items to the left */
}

.social-inline .social-link {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  font-weight: 500;
  font-size: 14px;
}

.social-inline .social-link svg {
  width: 18px;
  height: 18px;
}

.social-inline .social-link:hover {
  text-decoration: underline;
  cursor: pointer;
}

.social-inline .social-link.facebook span {
  color: #1877F2;
}

.social-inline .social-link.linkedin span {
  color: #0866FF;
}

/* Additional CSS moved from WordPress Customizer */

:where(.wp-site-blocks *:focus) {
  outline-width: 2px;
  outline-style: solid;
}

/* Remove outline on clickable images */
a:focus,
a:focus img,
footer .icon img:focus {
  outline: none;
}

/*.page-template-page-with-sidebar {
  background-image: url('https://cj-montage.dk/wp-content/uploads/2024/10/background.jpg');
  background-position: 50% 0;
}*/

/* Header Solid Bar */
header .solid-bar {
  height: 2.5rem;
  background-color: var(--wp--preset--color--custom-company-blue);
  display: block;
}

/* Responsive breakpoints for solid-bar */
@media (max-width: 1280px) {
  header .solid-bar {
    height: 2rem;
  }
}

@media (max-width: 1024px) {
  header .solid-bar {
    height: 1.5rem;
  }
}

@media (max-width: 768px) {
  header .solid-bar {
    height: 1.25rem;
  }
}

@media (max-width: 480px) {
  header .solid-bar {
    height: 1rem;
  }
}

/* Header Parent Row Responsive Alignment */
@media (max-width: 1024px) {
  header .parent-row {
    justify-content: center !important;
  }
}

/* Header Logo Responsive Sizing */
@media (max-width: 1024px) {
  header .header-logo {
    width: 280px;
  }
}

@media (max-width: 768px) {
  header .header-logo {
    width: 270px;
  }
}

@media (max-width: 480px) {
  header .header-logo {
    width: 260px;
  }
}

header .header-logo img {
  width: 100%;
  height: auto;
}

header .contact {
  line-height: 1;
}

header .contact a {
  text-decoration: none;
}

header .contact a:hover {
  text-decoration: underline;
}

.footer-navigation-seperator {
  width: 3px;
  height: 3px;
  background-color: black;
  border-radius: 50%;
  vertical-align: center;
}

.opacity-01 {
  opacity: 0.1;
}

.opacity-015 {
  opacity: 0.15;
}

.opacity-02 {
  opacity: 0.2;
}

.opacity-025 {
  opacity: 0.25;
}

.opacity-03 {
  opacity: 0.3;
}

.opacity-035 {
  opacity: 0.35;
}

.opacity-04 {
  opacity: 0.4;
}

.opacity-045 {
  opacity: 0.45;
}

.opacity-05 {
  opacity: 0.5;
}

.opacity-055 {
  opacity: 0.55;
}

.opacity-06 {
  opacity: 0.6;
}

.opacity-065 {
  opacity: 0.65;
}

.opacity-07 {
  opacity: 0.7;
}

.opacity-075 {
  opacity: 0.75;
}

.opacity-08 {
  opacity: 0.8;
}

.opacity-085 {
  opacity: 0.85;
}

.opacity-09 {
  opacity: 0.9;
}

.opacity-095 {
  opacity: 0.95;
}

.opacity-10 {
  opacity: 1.0;
}

.opacity-hovered:hover {
  opacity: 1.0;
  cursor: pointer;
}

.transition-03 {
  transition: all 0.3s ease;
}

.img-hover-scale {
  transform: scale(0.95);
  transition: transform 0.3s ease;
  display: inline-block;
}

.img-hover-scale:hover {
  transform: scale(1);
}

/* Responsive images in grid layouts */
.is-layout-grid .wp-block-image img {
  max-width: 100% !important;
  height: auto !important;
  width: auto !important;
  max-height: 300px !important;
}

@media (max-width: 768px) {
  .is-layout-grid .wp-block-image img {
    max-height: 200px !important;
  }
}

/* Push buttons to bottom-left of grid cards automatically */
.is-layout-grid>.wp-block-group.has-border-color {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

.is-layout-grid>.wp-block-group.has-border-color>.wp-block-buttons:last-child,
.is-layout-grid>.wp-block-group.has-border-color>.wp-block-group:last-child {
  margin-top: auto !important;
}

.is-layout-grid>.wp-block-group.has-border-color .wp-block-buttons {
  justify-content: flex-start !important;
  margin-left: 0 !important;
}

.is-layout-grid>.wp-block-group.has-border-color .wp-block-button {
  margin-left: 0 !important;
}

/* Ensure separators show in grid cards */
.is-layout-grid>.wp-block-group.has-border-color .wp-block-separator {
  flex-shrink: 0 !important;
  min-height: 1px !important;
  width: 100% !important;
}

.cursor-pointer-hover:hover {
  cursor: pointer;
}

.fa--file-pdf-o {
  display: inline-block;
  width: 1.16em;
  height: 1.35em;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1536 1792'%3E%3Cpath fill='%23b50300' d='M1468 380q28 28 48 76t20 88v1152q0 40-28 68t-68 28H96q-40 0-68-28t-28-68V96q0-40 28-68T96 0h896q40 0 88 20t76 48zm-444-244v376h376q-10-29-22-41l-313-313q-12-12-41-22m384 1528V640H992q-40 0-68-28t-28-68V128H128v1536zm-514-593q33 26 84 56q59-7 117-7q147 0 177 49q16 22 2 52q0 1-1 2l-2 2v1q-6 38-71 38q-48 0-115-20t-130-53q-221 24-392 83q-153 262-242 262q-15 0-28-7l-24-12q-1-1-6-5q-10-10-6-36q9-40 56-91.5t132-96.5q14-9 23 6q2 2 2 4q52-85 107-197q68-136 104-262q-24-82-30.5-159.5T657 552q11-40 42-40h22q23 0 35 15q18 21 9 68q-2 6-4 8q1 3 1 8v30q-2 123-14 192q55 164 146 238m-576 411q52-24 137-158q-51 40-87.5 84t-49.5 74m398-920q-15 42-2 132q1-7 7-44q0-3 7-43q1-4 4-8q-1-1-1-2q-1-2-1-3q-1-22-13-36q0 1-1 2zm-124 661q135-54 284-81q-2-1-13-9.5t-16-13.5q-76-67-127-176q-27 86-83 197q-30 56-45 83m646-16q-24-24-140-24q76 28 124 28q14 0 18-1q0-1-2-3'/%3E%3C/svg%3E");
}

.pdf-link {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

.pdf-link:hover {
  text-decoration: underline;
}

/* Fancybox Carousel Styles */
img {
  max-width: 100%;
  height: auto;
}

#myCarousel {
  max-width: 640px;
  margin: 0 auto;
}

#myCarousel .f-carousel__slide {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Prevent any image from being taller than 400px */
#myCarousel img {
  max-height: 400px;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Fixed Contact Button */
.fixed-contact-button {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 9999;
  width: 60px;
  height: 60px;
  background-color: white;
  border: 2px solid #d1d1d1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.15);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-decoration: none;
  cursor: pointer;
}

/* Hide contact button on the contact page */
body.page-id-17 .fixed-contact-button,
body.postid-17 .fixed-contact-button,
body[class*="kontakt"] .fixed-contact-button {
  display: none !important;
}

.fixed-contact-button:hover {
  box-shadow: 0 0 16px rgba(0, 0, 0, 0.25);
}

.fixed-contact-button:hover svg {
  animation: ring-shake 0.8s ease-in-out;
}

@keyframes ring-shake {

  0%,
  100% {
    transform: rotate(0deg);
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    transform: rotate(-8deg);
  }

  20%,
  40%,
  60%,
  80% {
    transform: rotate(8deg);
  }
}

.fixed-contact-button svg {
  width: 28px;
  height: 28px;
  fill: #333;
}

/* Hide button on mobile */
@media (max-width: 768px) {
  .fixed-contact-button {
    display: none !important;
  }
}

/* Gallery Images - 1:1 Aspect Ratio with Cropped Overflow */
.wp-block-gallery .wp-block-image {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  position: relative;
}

.wp-block-gallery .wp-block-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  position: absolute;
  top: 0;
  left: 0;
}

/* Lightbox - Show full uncropped images */
.wp-lightbox-overlay .wp-block-image {
  aspect-ratio: unset !important;
  overflow: visible !important;
  position: relative !important;
}

.wp-lightbox-overlay .wp-block-image img {
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  position: static !important;
}

/* Icon List - Simple icon + text list */
.icon-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.icon-list-item {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
}

.icon-list-item:hover {
  text-decoration: underline;
}

.icon-list-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.icon-list-text {
  line-height: 1.4;
  font-size: 14px;
}

/* Email Submission Form */
.email-form-group {
  margin-bottom: 15px;
}

.email-form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: 600;
  color: #333;
  font-size: 0.9em;
}

.email-form-group input[type="email"] {
  width: 100%;
  padding: 12px 15px;
  border: 2px solid #ddd;
  border-radius: 4px;
  font-size: 1em;
  transition: border-color 0.3s ease;
  box-sizing: border-box;
}

.email-form-group input[type="text"] {
  width: 100%;
  padding: 12px 15px;
  border: 2px solid #ddd;
  border-radius: 4px;
  font-size: 1em;
  transition: border-color 0.3s ease;
  box-sizing: border-box;
}

.email-form-group input[type="text"].error {
  border-color: #d63638;
  background-color: #fde8e8;
}

.email-form-group input[type="text"].success {
  border-color: #00a32a;
  background-color: #e8f5e8;
}

.email-form-group input[type="email"]:focus,
.email-form-group input[type="text"]:focus {
  outline: none;
  border-color: var(--wp--preset--color--custom-company-blue, #007cba);
}

.email-form-group input[type="email"].error {
  border-color: #d63638;
  background-color: #fde8e8;
}

.email-form-group input[type="email"].success {
  border-color: #00a32a;
  background-color: #e8f5e8;
}

.email-error-message {
  display: none;
  color: #d63638;
  font-size: 0.85em;
  margin-top: 5px;
}

.email-error-message.show {
  display: block;
}

.email-submit-btn {
  width: 100%;
  padding: 12px 20px;
  background: var(--wp--preset--color--custom-company-blue, #007cba);
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 1em;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.email-submit-btn:hover {
  background: #32373c;
}

.email-submit-btn:disabled {
  background: #ccc;
  cursor: not-allowed;
  opacity: 0.6;
}

.email-form-message {
  padding: 10px 15px;
  border-radius: 4px;
  font-size: 0.9em;
  display: none;
}

.email-form-message.show {
  display: block;
}

.email-form-message.error {
  margin-top: 15px;
  background: #f8d7da;
  color: #d63638;
  border: 1px solid #d63638;
}

.email-form-message.success {
  background: #d5f4e6;
  color: #00a32a;
  border: 1px solid #00a32a;
}

/* Search Form - Match Email Form Styling */
.wp-block-search__input {
  padding: 6px 12px !important;
  border: 2px solid #ddd !important;
  border-radius: 4px !important;
  font-size: var(--wp--preset--font-size--medium) !important;
  transition: border-color 0.3s ease !important;
  box-sizing: border-box !important;
}

.wp-block-search__input:focus {
  outline: none !important;
  border-color: var(--wp--preset--color--custom-company-blue, #007cba) !important;
}

.wp-block-search__button {
  padding: 8px 16px !important;
  background: var(--wp--preset--color--custom-company-blue, #007cba) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 4px !important;
  font-size: var(--wp--preset--font-size--medium) !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: background-color 0.3s ease !important;
  margin-left: 8px !important;
}

.wp-block-search__button:hover {
  background: #32373c !important;
}

/* Search button icon styling */
.wp-block-search__button svg {
  fill: #fff !important;
  width: 18px !important;
  height: 18px !important;
}

/* Fancybox Gallery - WordPress Gallery Style */
.fancybox-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin: 20px 0;
}

@media (min-width: 600px) {
  .fancybox-gallery {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 782px) {
  .fancybox-gallery {
    grid-template-columns: repeat(4, 1fr);
  }
}

.fancybox-gallery a {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  position: relative;
  display: block;
  border-radius: 4px;
}

.fancybox-gallery a img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.fancybox-gallery a:hover img {
  transform: scale(1.1);
}

/* Fancybox Gallery - Column Variations */
/* 2-column gallery */
.fancybox-gallery-2col {
  grid-template-columns: repeat(2, 1fr) !important;
}

/* 3-column gallery */
.fancybox-gallery-3col {
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 600px) {
  .fancybox-gallery-3col {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* 5-column gallery */
.fancybox-gallery-5col {
  grid-template-columns: repeat(3, 1fr);
}

@media (min-width: 600px) {
  .fancybox-gallery-5col {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 782px) {
  .fancybox-gallery-5col {
    grid-template-columns: repeat(5, 1fr);
  }
}

/* Image Block with Centered Caption */
/* Apply class "centered-caption" to image block to center caption regardless of image alignment */
.wp-block-image.centered-caption {
  display: table;
}

.wp-block-image.centered-caption img {
  display: block;
}

.wp-block-image.centered-caption figcaption {
  display: table-caption;
  caption-side: bottom;
  text-align: center;
}