/* =====================================================
   NAV SCROLL ANIMATION
   Replicates the Webflow IX1 interaction:
   "slide-in-scroll-navigation-on-scroll"
   ===================================================== */

/* Initial state: nav is transparent, red border intact (from mccalmontbloodstock.css) */
.nav-bar {
    transition: background-color 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}

/* Logo wrapper needs position:relative so absolute dark-logo sits on top */
.logo.w-nav-brand {
    position: relative;
}

/* Hidden H1 for SEO on front page */
.hidden-h1 {
  text-indent: -9999px;
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* The dark logo sits absolutely on top of the white one.
   By default (transparent nav), only the white logo is fully visible. */
.dark-logo {
    opacity: 0;
    transition: opacity 0.4s ease;
}

/* White logo (light version) – visible by default */
.white-logo {
    opacity: 1;
    transition: opacity 0.4s ease;
}

/* Nav links – white by default */
.intri-link.w-nav-link,
.nav-link.w-dropdown-toggle {
    color: #fff;
    transition: color 0.4s ease;
}

/* Dropdown arrow – white by default */
.arrow.w-icon-dropdown-toggle {
    color: #fff;
    transition: color 0.4s ease;
}

/* Hamburger icon – white by default */
.menu-button.white .w-icon-nav-menu {
    color: #fff;
    transition: color 0.4s ease;
}

/* =====================================================
   SCROLLED STATE — added by custom.js on scroll
   ===================================================== */

.nav-bar.nav-scrolled {
    background-color: #fff !important;
    border-bottom: 1px solid #00aeef !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.nav-bar.nav-scrolled .dark-logo {
    opacity: 1;
}

.nav-bar.nav-scrolled .white-logo {
    opacity: 0;
}

.nav-bar.nav-scrolled .intri-link.w-nav-link,
.nav-bar.nav-scrolled .nav-link.w-dropdown-toggle {
    color: #343e52;
}

.nav-bar.nav-scrolled .intri-link.w-nav-link:hover,
.nav-bar.nav-scrolled .nav-link.w-dropdown-toggle:hover {
    color: #00aeef;
}

/* Dropdown arrow turns black on scroll */
.nav-bar.nav-scrolled .arrow.w-icon-dropdown-toggle {
    color: #343e52;
}

/* Hamburger icon turns black on scroll */
.nav-bar.nav-scrolled .menu-button.white .w-icon-nav-menu {
    color: #343e52;
}

/* =====================================================
   PAGES WITHOUT A HERO (non-frontpage)
   Always show the dark nav style on non-hero pages
   ===================================================== */

body.no-hero-nav .nav-bar {
    background-color: #fff !important;
    border-bottom-color: #e9ecef !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

body.no-hero-nav .nav-bar .dark-logo {
    opacity: 1;
}

body.no-hero-nav .nav-bar .white-logo {
    opacity: 0;
}

body.no-hero-nav .nav-bar .intri-link.w-nav-link,
body.no-hero-nav .nav-bar .nav-link.w-dropdown-toggle {
    color: #343e52;
}

body.no-hero-nav .nav-bar .arrow.w-icon-dropdown-toggle {
    color: #343e52;
}

body.no-hero-nav .nav-bar .menu-button.white .w-icon-nav-menu {
    color: #343e52;
}

/* =====================================================
   GLOBAL IMAGE FOCUS UTILITY CLASSES
   ===================================================== */

/* Standard Images (object-position) */
img.focus-top-left {
    object-position: top left !important;
}

img.focus-top-center {
    object-position: top center !important;
}

img.focus-top-right {
    object-position: top right !important;
}

img.focus-center-left {
    object-position: center left !important;
}

img.focus-center-center {
    object-position: center center !important;
}

img.focus-center-right {
    object-position: center right !important;
}

img.focus-bottom-left {
    object-position: bottom left !important;
}

img.focus-bottom-center {
    object-position: bottom center !important;
}

img.focus-bottom-right {
    object-position: bottom right !important;
}

/* Background Images (background-position) */
.bg-focus-top-left {
    background-position: top left !important;
}

.bg-focus-top-center {
    background-position: top center !important;
}

.bg-focus-top-right {
    background-position: top right !important;
}

.bg-focus-center-left {
    background-position: center left !important;
}

.bg-focus-center-center {
    background-position: center center !important;
}

.bg-focus-center-right {
    background-position: center right !important;
}

.bg-focus-bottom-left {
    background-position: bottom left !important;
}

.bg-focus-bottom-center {
    background-position: bottom center !important;
}

.bg-focus-bottom-right {
    background-position: bottom right !important;
}

/* =====================================================
   RATHMOY FACILITIES — IMAGE SIZE FIX
   WP injects explicit width/height attrs on images;
   constraining them to 100% of their flex container.
   ===================================================== */
.side-image-media img {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.side-image-media .w-inline-block,
.side-image-media .w-lightbox {
    display: block;
    width: 100%;
}

.horse-photo.no-image {
  background-color: #1c1f25 !important;
}

/* Ensure consistent height to prevent grid gaps */
.horse--wrapper {
  display: block;
  min-height: 252px;
}

/* =====================================================
   HORSE SLIDER (SLICK)
   ===================================================== */
.horse-slider {
    margin: 0 -15px; /* Better spacing for grid items */
}

.horse-slide {
    padding: 0 15px;
    outline: none;
}

.horse-slide img {
    border-radius: 4px; /* Matches screenshot rounding */
    margin-bottom: 15px;
}

.horse-slide .tittle-work {
    font-size: 20px;
    margin-bottom: 15px;
    color: #343e52;
}

.horse-slide .line-box {
    background-color: #e4e8ee;
    height: 2px;
    margin-bottom: 0;
    position: relative;
    overflow: hidden;
}

/* Hover Effects Overlay */
.work-image-card .work-overlay {
    opacity: 0;
    transition: opacity 0.4s ease;
}

.work-card:hover .work-image-card .work-overlay {
    opacity: 1;
}

/* Hover Effects Line Animation */
.horse-slide .line-box.color {
    background-color: #00aeef;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}

.work-card:hover .line-box.color {
    transform: scaleX(1);
}

/* Custom Centered Buttons in footer */
.slider-controls {
    margin-top: 40px;
    display: flex;
    justify-content: center;
    gap: 0; /* Gap is managed by margins in original style */
}

.slick-arrow-custom {
    color: #333;
    background-color: #fafafa;
    border: 1px solid #ccc;
    border-radius: 2px;
    margin-left: 10px;
    margin-right: 10px;
    padding: 9px 20px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    font-weight: 400;
    font-family: Roboto, sans-serif;
}

.slick-arrow-custom:hover {
    background-color: #f0f0f0;
    border-color: #bbb;
}

.slick-arrow-custom .arrow-icon {
    font-size: 12px;
}

.slider-prev .arrow-icon {
    margin-right: 6px;
}

.slider-next .arrow-icon {
    margin-left: 6px;
}

/* Hide default slick arrows since we are using custom ones */
.horse-slider .slick-prev,
.horse-slider .slick-next {
    display: none !important;
}

@media (max-width: 991px) {
    .horse-slider {
        margin: 0;
    }

    /* Mobile Nav Overrides: Change white font to dark */
    .intri-link.w-nav-link,
    .nav-link.w-dropdown-toggle,
    .arrow.w-icon-dropdown-toggle {
        color: #343e52 !important;
    }

    /* Keep hamburger menu white on mobile */
    .menu-button.white .w-icon-nav-menu {
        color: #fff !important;
    }
}


/* =====================================================
   NEWS PAGINATION
   ===================================================== */
.slider-controls.news {
    display: flex;
    justify-content: center;
    gap: 0;
}

.slick-arrow-custom.news-prev,
.slick-arrow-custom.news-next {
    text-decoration: none;
    line-height: normal;
}

.slick-arrow-custom.news-prev:hover,
.slick-arrow-custom.news-next:hover {
    background-color: #f0f0f0;
    border-color: #bbb;
    color: #333;
}