/* ==========================================================================
   Library Page Overrides
   Target: Library page sections and product cards only
   ========================================================================== */

/* ==========================================================================
   Link List Navigation Styling (Above Hero Section)
   Target: section-1598294888647 link list only
   ========================================================================== */

/* Force center alignment for the link list container */
#section-1598294888647 .link-list {
  text-align: center !important;
}

/* Ensure the links container is also centered */
#section-1598294888647 .link-list__links {
  display: inline-block;
  text-align: center;
}

/* Base link styling with increased font weight and spacing */
#section-1598294888647 .link-list__link {
  font-weight: 600;
  text-decoration: none;
  position: relative;
  transition: color 0.3s ease;
  display: inline-block;
  /* Add margin-right to all links except the last one for spacing */
  margin-right: 20px;
}

/* Remove margin from the last link */
#section-1598294888647 .link-list__link:last-child {
  margin-right: 0;
}

/* Hover state - brand orange color with smooth underline */
#section-1598294888647 .link-list__link:hover {
  color: #FF7518 !important;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 2px;
  transition: all 0.3s ease;
}

/* Visited/Active state - underline with default color */
#section-1598294888647 .link-list__link:visited,
#section-1598294888647 .link-list__link.active,
#section-1598294888647 .link-list__link[aria-current="page"] {
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 2px;
}

/* Additional fallback for smooth underline animation if text-underline-offset isn't supported */
@supports not (text-underline-offset: 4px) {
  #section-1598294888647 .link-list__link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    background-color: currentColor;
    transition: width 0.3s ease;
  }
  
  #section-1598294888647 .link-list__link:hover::after,
  #section-1598294888647 .link-list__link:visited::after,
  #section-1598294888647 .link-list__link.active::after {
    width: 100%;
  }
  
  #section-1598294888647 .link-list__link:hover,
  #section-1598294888647 .link-list__link:visited,
  #section-1598294888647 .link-list__link.active {
    text-decoration: none;
  }
}

/* ==========================================================================
   Product Cards Styling
   Target: section-1596053467662 product cards only
   ========================================================================== */

/* Reduce top padding between hero section and product grid */
#section-1596053467662 .sizer {
  padding-top: 20px !important;
}

@media (min-width: 768px) {
  #section-1596053467662 .sizer {
    padding-top: 50px !important;
  }
}

/* 1. Add padding below product titles (20px) */
#section-1596053467662 .product .product__title {
  padding-bottom: 20px;
}

/* 2. Add margin above buttons (25px) - space above the button padding */
#section-1596053467662 .product .product__button {
  margin-top: 25px;
}

/* 3. Product grid fade-in animation */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Apply fade-in animation to the products list */
#section-1596053467662 .products__list {
  animation: fadeInUp 0.8s ease-out;
}

/* Staggered animation for individual product cards */
#section-1596053467662 .products__col {
  opacity: 0;
  animation: fadeInUp 0.6s ease-out forwards;
}

/* Create staggered timing for each product card */
#section-1596053467662 .products__col:nth-child(1) { animation-delay: 0.1s; }
#section-1596053467662 .products__col:nth-child(2) { animation-delay: 0.2s; }
#section-1596053467662 .products__col:nth-child(3) { animation-delay: 0.3s; }
#section-1596053467662 .products__col:nth-child(4) { animation-delay: 0.4s; }
#section-1596053467662 .products__col:nth-child(5) { animation-delay: 0.5s; }
#section-1596053467662 .products__col:nth-child(6) { animation-delay: 0.6s; }
#section-1596053467662 .products__col:nth-child(7) { animation-delay: 0.7s; }
#section-1596053467662 .products__col:nth-child(8) { animation-delay: 0.8s; }

/* 4. Enhanced button hover effect with elevation */
#section-1596053467662 .product .product__button .btn {
  transition: all 0.3s ease;
  /* Maintain existing box-shadow as base */
}

#section-1596053467662 .product .product__button .btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
  /* Override existing hover brightness with custom styling */
  filter: brightness(110%);
}

/* Additional enhancement: Subtle card hover effect */
#section-1596053467662 .product {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#section-1596053467662 .product:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

/* Ensure animation works on reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  #section-1596053467662 .products__list,
  #section-1596053467662 .products__col {
    animation: none;
    opacity: 1;
    transform: none;
  }
  
  #section-1596053467662 .product,
  #section-1596053467662 .product .product__button .btn {
    transition: none;
  }
  
  #section-1596053467662 .product:hover,
  #section-1596053467662 .product .product__button .btn:hover {
    transform: none;
  }
}

#offer-title {
    color: #01376B !important;
}

.t-sage-heading-4 {
    color: #01376B !important;
}

.sage-modal__container .h4 {
    color: #01376B !important;
}


/* ============================================
   AIJRP NAVIGATION - RESPONSIVE LINKS
   ============================================ */

/* ────────────────────────────────────────────
   1. REDUCE SIZE & SPACING (1400px → 768px)
   ──────────────────────────────────────────── */
@media (max-width: 1399px) and (min-width: 768px) {
  /* Target the navigation container */
  #block-1555988491313 .link-list {
    gap: 16px !important; /* Reduced gap between links */
  }
  
  /* Target individual navigation links */
  #block-1555988491313 .link-list__link {
    font-size: calc(1em - 2px) !important; /* 2px smaller */
    padding-left: 8px !important;
    padding-right: 8px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* ────────────────────────────────────────────
   2. WRAP TO TWO ROWS + LEFT ALIGN
      (1100px → 768px)
   ──────────────────────────────────────────── */
@media (max-width: 1099px) and (min-width: 768px) {
  /* Enable wrapping */
  #block-1555988491313 .link-list {
    flex-wrap: wrap !important;
    justify-content: flex-start !important; /* Left align */
    align-items: center !important; /* Vertically center links */
    row-gap: 12px !important;
    column-gap: 16px !important;
    max-height: none !important;
  }
  
  /* Allow links to wrap naturally */
  #block-1555988491313 .link-list__link {
    flex: 0 0 auto;
    white-space: nowrap;
    align-self: center; /* Ensure each link is vertically centered */
  }
  
  /* Ensure header accommodates two rows and centers content */
  #block-1555988491313 {
    min-height: 80px;
    display: flex;
    align-items: center; /* Vertically center the entire navigation block */
  }
  
  /* Override center alignment from inline styles */
  #block-1555988491313 {
    text-align: left !important;
  }
}

/* ────────────────────────────────────────────
   3. SMOOTH TRANSITIONS (Optional Enhancement)
   ──────────────────────────────────────────── */
@media (min-width: 768px) {
  #block-1555988491313 .link-list__link {
    transition: font-size 0.2s ease, padding 0.2s ease;
  }
}


/* ============================================
   FEATURE BLOCK - COL-6 → COL-8 CONVERSION
   (1220px → 768px)
   ONLY when col-6 is the sole block in section
   ============================================ */

@media (max-width: 1220px) and (min-width: 768px) {
  /* Target col-6 blocks that are the ONLY child in their row */
  .row > .col-6.block-type--feature:only-child {
    flex: 0 0 66.6667% !important; /* 8/12 columns = 66.67% */
    max-width: 66.6667% !important;
  }
  
  /* Alternate selector if above doesn't work */
  .section .row .col-6.block-type--feature:only-of-type {
    flex: 0 0 66.6667% !important;
    max-width: 66.6667% !important;
  }
  
  /* Ensure row still centers the solo block */
  .row:has(> .col-6.block-type--feature:only-child) {
    justify-content: center !important;
  }
}


/* ============================================
   3-COLUMN LAYOUT → 2-COLUMN WITH WRAP
   (1440px → 978px)
   ONLY applies to sections with exactly 3 col-4 cards
   ============================================ */

@media (max-width: 1440px) and (min-width: 978px) {
  /* Target col-4 blocks */
  .row > .col-4 {
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }
  
  /* Ensure row allows wrapping */
  .row {
    flex-wrap: wrap !important;
  }
  
  /* Add spacing between wrapped rows */
  .row > .col-4 {
    margin-bottom: 30px;
  }
  
  /* Center the third card */
  .row > .col-4:nth-child(3):nth-last-child(1) {
    margin-left: auto;
    margin-right: auto;
  }
  
  /* ────────────────────────────────────────────
     EXCEPTION: Restore original layout for 
     sections with 5+ cards (mixed col-4 and col-6)
     ──────────────────────────────────────────── */
  
  /* When there are col-6 siblings, restore col-4 to original size */
  .row:has(> .col-6) > .col-4 {
    flex: 0 0 33.333% !important;
    max-width: 33.333% !important;
  }
  
  /* Alternative: If :has() doesn't work, use specific section ID */
  #section-1575400143733 .row > .col-4 {
    flex: 0 0 33.333% !important;
    max-width: 33.333% !important;
  }
  
  #section-1575400143733 .row > .col-6 {
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }
}



/* ============================================
   FULL HEIGHT COVER IMAGES
   (1480px → 768px)
   .image container = 660px, img inside = 100% cover
   ONLY targets img.image__image
   EXCLUDES img.feature__image AND any img inside .feature
   ============================================ */

@media (max-width: 1480px) and (min-width: 768px) {
  /* ────────────────────────────────────────────
     IMAGE BLOCKS: Fixed 660px height
     ──────────────────────────────────────────── */
  
  /* Set .image container to 660px (only for .block-type--image) */
  /* Exclude .feature containers */
  .block-type--image .image:not(.feature):not(:has(.feature)) {
    height: 660px !important;
    overflow: hidden;
  }
  
  /* Image inside fills 100% with cover */
  /* ONLY target img.image__image, NOT img.feature__image */
  /* EXCLUDE any image that is a descendant of .feature */
  .block-type--image .image__image:not(.feature__image):not(.feature *),
  .block-type--image .image img.image__image:not(.feature__image):not(.feature *) {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
  }
  
  /* Alternative approach using :not() with descendant selector */
  .block-type--image:not(:has(.feature)) .image__image:not(.feature__image) {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
  }
  
  /* ────────────────────────────────────────────
     SPECIFIC IMAGE: Top-aligned focal point
     ──────────────────────────────────────────── */
  
  /* Target the specific block image (only if NOT in .feature) */
  #block-1757578912879 .image__image:not(.feature__image):not(.feature *),
  #block-1757578912879 .image img.image__image:not(.feature__image):not(.feature *) {
    object-position: center top !important;
  }
  
  /* ────────────────────────────────────────────
     FEATURE CARDS: Keep original size
     ──────────────────────────────────────────── */
  
  /* Exclude feature card containers */
  .block-type--feature .image,
  .feature .image,
  .feature {
    height: auto !important;
  }
  
  /* Exclude ALL images inside .feature (regardless of class) */
  .feature img,
  .feature *img,
  .feature__image,
  img.feature__image,
  .block-type--feature .feature__image,
  .block-type--feature img.feature__image,
  .block-type--feature .feature img,
  .feature .feature__image,
  .feature img.feature__image {
    width: auto !important;
    height: auto !important;
    object-fit: initial !important;
    object-position: initial !important;
    max-width: none !important;
  }
}


/* ============================================
   TEXT ALIGNMENT - Center text on tablet
   (768px → 976px)
   ONLY for section #section-1575400116835
   ============================================ */

@media (min-width: 768px) and (max-width: 976px) {
  #section-1575400116835 .text-right,
  #section-1575400116835 .text-left {
    text-align: center !important;
  }
}