/* ==========================================================================
   Caniche Pudel Philippines - modern layer
   Loads AFTER css/style.css and only adds to it.

   Palette and typography are deliberately unchanged:
     primary #ED6436 | secondary #65C178 | light #F2F2F4 | dark #181818
     body text #777777 | Nunito Sans (body) | Nunito (headings)

   Everything here is motion, depth, spacing and responsive behaviour.
   ========================================================================== */

:root {
    --cp-primary: #ED6436;
    --cp-primary-dark: #c53f12;
    --cp-primary-soft: rgba(237, 100, 54, .10);
    --cp-secondary: #65C178;
    --cp-secondary-soft: rgba(101, 193, 120, .12);
    --cp-light: #F2F2F4;
    --cp-dark: #181818;
    --cp-body: #777777;

    --cp-radius: 18px;
    --cp-radius-sm: 10px;

    --cp-shadow-xs: 0 1px 3px rgba(24, 24, 24, .06);
    --cp-shadow-sm: 0 4px 14px rgba(24, 24, 24, .07);
    --cp-shadow: 0 12px 34px rgba(24, 24, 24, .11);
    --cp-shadow-primary: 0 14px 30px rgba(237, 100, 54, .28);

    --cp-ease: cubic-bezier(.22, .61, .36, 1);
    --cp-ease-out: cubic-bezier(.16, 1, .3, 1);
    --cp-nav-h: 62px;
}

/* --------------------------------------------------------------------------
   1. Base
   -------------------------------------------------------------------------- */

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--cp-nav-h) + 16px);
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* clip, not hidden: overflow-x:hidden on body computes overflow-y:auto, which
   turns body into a second scroll container - that breaks position:sticky and
   window.scrollY. clip contains the same overflow without scrolling. */
html,
body {
    overflow-x: clip;
}

/* Nothing on the page should be able to push a horizontal scrollbar on phones */
img,
iframe,
video,
table {
    max-width: 100%;
}

::selection {
    background: var(--cp-primary);
    color: #fff;
}

/* Visible, on-brand focus ring for keyboard users (never for mouse clicks) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.btn:focus-visible {
    outline: 3px solid var(--cp-primary);
    outline-offset: 2px;
    box-shadow: none;
}

/* --------------------------------------------------------------------------
   2. Topbar
   -------------------------------------------------------------------------- */

.bg-secondary a {
    position: relative;
    display: inline-block;
    transition: opacity .25s var(--cp-ease), transform .25s var(--cp-ease);
}

.bg-secondary a:hover {
    opacity: .85;
    transform: translateY(-1px);
}

/* Social icons in the topbar become soft chips */
.bg-secondary a > .fab {
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .14);
    transition: background .25s var(--cp-ease), transform .25s var(--cp-ease);
}

.bg-secondary a:hover > .fab {
    background: rgba(255, 255, 255, .3);
    transform: translateY(-2px) rotate(-6deg);
}

/* Brand wordmark */
.navbar-brand h1 {
    letter-spacing: -.5px;
    transition: transform .3s var(--cp-ease);
}

.navbar-brand:hover h1 {
    transform: translateY(-2px);
}

/* Email / phone blocks in the header */
.d-inline-flex.flex-column.text-center h6 {
    color: var(--cp-primary);
    letter-spacing: .04em;
    text-transform: uppercase;
    font-size: .72rem;
    margin-bottom: .15rem;
}

/* --------------------------------------------------------------------------
   3. Sticky header
   The wrapper around <nav> is what sticks - a sticky <nav> would be trapped
   inside a parent exactly its own height and never actually stick.
   :has() handles it up front; modern.js adds .cp-nav-wrap as a fallback.
   -------------------------------------------------------------------------- */

.container-fluid.p-0:has(> nav.navbar),
.cp-nav-wrap {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1030;
}

.container-fluid.p-0:has(> nav.navbar) > nav.navbar,
.cp-nav-wrap > nav.navbar {
    transition: box-shadow .3s var(--cp-ease), background-color .3s var(--cp-ease);
}

/* modern.js sets .cp-stuck once the header leaves the top of the page */
/* No backdrop-filter here, deliberately: it would make the navbar the
   containing block for its position:fixed descendants, which sends the mobile
   drawer off-screen the moment the header is stuck. The bar is 97% opaque
   anyway, so the blur bought nothing. */
.cp-nav-wrap.cp-stuck > nav.navbar,
.container-fluid.p-0.cp-stuck:has(> nav.navbar) > nav.navbar {
    box-shadow: 0 6px 24px rgba(24, 24, 24, .28);
    background-color: rgba(24, 24, 24, .97) !important;
}

/* --------------------------------------------------------------------------
   4. Navigation - desktop
   -------------------------------------------------------------------------- */

/* The base theme fills hover and active links solid orange, which would sit
   under - and hide - the underline below. Same colour, lighter treatment. */
.navbar-dark .navbar-nav .nav-link {
    position: relative;
    color: rgba(255, 255, 255, .78);
    font-weight: 600;
    background: transparent;
    transition: color .25s var(--cp-ease);
}

.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus,
.navbar-dark .navbar-nav .nav-link.active {
    color: #fff;
    background: transparent;
}

/* Underline that grows out from the centre */
@media (min-width: 992px) {
    .navbar-expand-lg .navbar-nav .nav-link {
        padding: 1.25rem 1rem;
    }

    .navbar-dark .navbar-nav .nav-link::after {
        content: "";
        position: absolute;
        left: 50%;
        right: 50%;
        bottom: 14px;
        height: 3px;
        border-radius: 3px;
        background: var(--cp-primary);
        transition: left .3s var(--cp-ease), right .3s var(--cp-ease);
    }

    .navbar-dark .navbar-nav .nav-link:hover::after,
    .navbar-dark .navbar-nav .nav-link.active::after {
        left: 1rem;
        right: 1rem;
    }
}

/* Hamburger: three bars that fold into an X */
.navbar-toggler {
    border: 0;
    padding: .5rem;
    width: 44px;
    height: 44px;
    position: relative;
    outline: none;
}

.navbar-toggler .navbar-toggler-icon {
    background-image: none !important;
    width: 24px;
    height: 2px;
    background-color: #fff;
    border-radius: 2px;
    display: block;
    position: relative;
    transition: background-color .2s var(--cp-ease);
}

.navbar-toggler .navbar-toggler-icon::before,
.navbar-toggler .navbar-toggler-icon::after {
    content: "";
    position: absolute;
    left: 0;
    width: 24px;
    height: 2px;
    background-color: #fff;
    border-radius: 2px;
    transition: transform .3s var(--cp-ease), top .3s var(--cp-ease);
}

.navbar-toggler .navbar-toggler-icon::before {
    top: -7px;
}

.navbar-toggler .navbar-toggler-icon::after {
    top: 7px;
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
    background-color: transparent;
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before {
    top: 0;
    transform: rotate(45deg);
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after {
    top: 0;
    transform: rotate(-45deg);
}

/* Compact brand shown in the bar itself on phones (injected by modern.js) */
.cp-mobile-brand {
    color: #fff;
    font-weight: 800;
    font-family: "Nunito", sans-serif;
    font-size: 1.15rem;
    letter-spacing: -.4px;
    text-decoration: none;
    margin-right: auto;
}

.cp-mobile-brand:hover,
.cp-mobile-brand:focus {
    color: #fff;
    text-decoration: none;
}

.cp-mobile-brand span {
    color: var(--cp-primary);
}

@media (min-width: 992px) {
    .cp-mobile-brand {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   5. Navigation - mobile slide-in drawer
   Bootstrap still owns the .show class; we only animate transform, so the
   collapse height animation is neutralised with a forced height.
   -------------------------------------------------------------------------- */

@media (max-width: 991.98px) {
    .navbar {
        min-height: var(--cp-nav-h);
    }

    #navbarCollapse.navbar-collapse {
        display: block !important;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        height: 100% !important;
        width: 84vw;
        max-width: 320px;
        padding: calc(var(--cp-nav-h) + 1.25rem) 1.5rem 2rem !important;
        background: #101010;
        box-shadow: -18px 0 45px rgba(0, 0, 0, .45);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        transform: translateX(102%);
        visibility: hidden;
        transition: transform .38s var(--cp-ease-out), visibility 0s linear .38s;
        z-index: 1045;
    }

    #navbarCollapse.navbar-collapse.show,
    #navbarCollapse.navbar-collapse.collapsing {
        transform: translateX(0);
        visibility: visible;
        transition: transform .38s var(--cp-ease-out), visibility 0s;
    }

    #navbarCollapse.navbar-collapse.collapsing:not(.show) {
        transform: translateX(102%);
    }

    #navbarCollapse .navbar-nav {
        width: 100%;
    }

    /* Links slide in one after another once the drawer is open */
    #navbarCollapse .nav-link {
        padding: .95rem .25rem;
        font-size: 1.05rem;
        border-bottom: 1px solid rgba(255, 255, 255, .08);
        opacity: 0;
        transform: translateX(18px);
    }

    #navbarCollapse .nav-link.active,
    #navbarCollapse .nav-link:hover {
        color: var(--cp-primary);
        background: transparent;
    }

    #navbarCollapse.show .nav-link {
        opacity: 1;
        transform: none;
        transition: opacity .35s var(--cp-ease) var(--cp-d, 0s),
                    transform .35s var(--cp-ease) var(--cp-d, 0s);
    }

    /* The Chat call-to-action is desktop-only in the markup - bring it back
       inside the drawer, where there is room for it. */
    #navbarCollapse .btn.d-none {
        display: block !important;
        width: 100%;
        margin-top: 1.5rem;
        text-align: center;
    }

    .cp-nav-backdrop {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: rgba(10, 10, 10, .55);
        -webkit-backdrop-filter: blur(2px);
        backdrop-filter: blur(2px);
        opacity: 0;
        visibility: hidden;
        transition: opacity .35s var(--cp-ease), visibility 0s linear .35s;
        z-index: 1040;
        border: 0;
        padding: 0;
        margin: 0;
    }

    .cp-nav-backdrop.is-open {
        opacity: 1;
        visibility: visible;
        transition: opacity .35s var(--cp-ease), visibility 0s;
    }

    /* The sticky wrapper has its own z-index, so it forms a stacking context:
       the drawer inside it cannot out-stack the backdrop no matter what its
       own z-index says. Raise the whole wrapper while the drawer is open. */
    body.cp-nav-open .cp-nav-wrap,
    body.cp-nav-open .container-fluid.p-0:has(> nav.navbar) {
        z-index: 1050;
    }

    /* Stop the page behind the drawer from scrolling. html is the scroll
       container, so locking body alone does nothing. */
    html.cp-nav-open,
    body.cp-nav-open {
        overflow: hidden;
    }
}

@media (min-width: 992px) {
    .cp-nav-backdrop {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */

.btn {
    border-radius: var(--cp-radius-sm);
    font-weight: 700;
    letter-spacing: .01em;
    transition: transform .25s var(--cp-ease),
                box-shadow .25s var(--cp-ease),
                background-color .25s var(--cp-ease),
                border-color .25s var(--cp-ease);
}

.btn:hover {
    transform: translateY(-2px);
}

.btn:active {
    transform: translateY(0);
}

.btn-primary:hover {
    box-shadow: var(--cp-shadow-primary);
}

.btn-secondary:hover {
    box-shadow: 0 14px 30px rgba(101, 193, 120, .28);
}

/* Card footer buttons keep a square top edge so they seat into the card */
.card-footer .btn-block {
    border-radius: 0 0 var(--cp-radius) var(--cp-radius);
}

/* Navbar Chat button reads as a pill */
.navbar .btn-primary {
    border-radius: 999px;
}

/* --------------------------------------------------------------------------
   7. Cards
   -------------------------------------------------------------------------- */

.card {
    border-radius: var(--cp-radius);
    overflow: hidden;
    background: #fff;
    box-shadow: var(--cp-shadow-sm);
    transition: transform .4s var(--cp-ease), box-shadow .4s var(--cp-ease);
    height: 100%;
}

.card:hover {
    transform: translateY(-8px);
    box-shadow: var(--cp-shadow);
}

.card-header {
    overflow: hidden;
    background: var(--cp-light);
}

.card-header img,
.card-img-top {
    display: block;
    width: 100%;
    transition: transform .7s var(--cp-ease);
}

.card:hover .card-header img,
.card:hover .card-img-top {
    transform: scale(1.06);
}

/* Detail rows inside a puppy card */
.card .list-group-item {
    border-color: rgba(24, 24, 24, .06);
    transition: background-color .25s var(--cp-ease);
}

.card .list-group-item:hover {
    background-color: var(--cp-light);
}

.card .list-group-item .fa-check {
    color: var(--cp-secondary) !important;
}

.card .list-group-item .fa-times {
    color: var(--cp-primary) !important;
}

/* Keep every card in a row the same height */
.row > [class*="col-"] > .card {
    height: 100%;
}

/* Two puppies per row on tablets instead of one full-width column */
@media (min-width: 768px) and (max-width: 991.98px) {
    .col-lg-4:has(> .card) {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

/* --------------------------------------------------------------------------
   8. Section headings and editorial blocks
   -------------------------------------------------------------------------- */

.display-4,
.display-5 {
    letter-spacing: -1px;
    line-height: 1.15;
}

/* Centred section headers get a short accent rule underneath */
.d-flex.flex-column.text-center > .display-4::after {
    content: "";
    display: block;
    width: 72px;
    height: 4px;
    margin: 1.1rem auto 0;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--cp-primary), var(--cp-secondary));
}

h4.text-secondary {
    position: relative;
    padding-left: .9rem;
}

h4.text-secondary::before {
    content: "";
    position: absolute;
    left: 0;
    top: .15em;
    bottom: .15em;
    width: 4px;
    border-radius: 4px;
    background: var(--cp-secondary);
}

/* Comfortable measure for long paragraphs on wide screens */
@media (min-width: 992px) {
    .container-fluid > .row > [class*="col-"] > p,
    .container > .row > [class*="col-"] > p {
        max-width: 72ch;
    }
}

/* Editorial images pick up the same rounding as the cards */
img.img-fluid {
    border-radius: var(--cp-radius);
}

.card img.img-fluid,
.card-img-top {
    border-radius: 0;
}

/* --------------------------------------------------------------------------
   9. Contact form
   The stock markup wrapped the form in a hard-coded 500px box, which is what
   broke it below 500px. Everything here is fluid instead.
   -------------------------------------------------------------------------- */

#fcf-form,
.fcf-form-class {
    width: 100%;
    max-width: 100%;
}

.fcf-form-class .field {
    margin-bottom: 1.15rem;
}

.fcf-form-class .label {
    display: block;
    color: #fff;
    font-family: "Nunito", sans-serif;
    font-weight: 600;
    font-size: .95rem;
    margin-bottom: .4rem;
}

.fcf-form-class .input,
.fcf-form-class .textarea {
    display: block;
    width: 100%;
    max-width: 100%;
    padding: .85rem 1rem;
    font-family: "Nunito Sans", sans-serif;
    font-size: 1rem;
    color: var(--cp-dark);
    background: #fff;
    border: 2px solid transparent;
    border-radius: var(--cp-radius-sm);
    box-shadow: var(--cp-shadow-xs);
    transition: border-color .25s var(--cp-ease), box-shadow .25s var(--cp-ease);
    -webkit-appearance: none;
    appearance: none;
}

.fcf-form-class .textarea {
    min-height: 140px;
    resize: vertical;
}

.fcf-form-class .input:focus,
.fcf-form-class .textarea:focus {
    outline: none;
    border-color: var(--cp-dark);
    box-shadow: 0 0 0 4px rgba(24, 24, 24, .12);
}

.fcf-form-class .buttons {
    margin-top: 1.35rem;
}

.fcf-form-class .button,
#fcf-button {
    display: block;
    width: 100%;
    padding: .9rem 1.5rem;
    font-family: "Nunito", sans-serif;
    font-weight: 700;
    font-size: 1rem;
    color: var(--cp-primary);
    background: #fff;
    border: 0;
    border-radius: var(--cp-radius-sm);
    cursor: pointer;
    transition: transform .25s var(--cp-ease), box-shadow .25s var(--cp-ease);
}

.fcf-form-class .button:hover,
#fcf-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(0, 0, 0, .22);
}

#fcf-button[disabled] {
    opacity: .6;
    cursor: progress;
    transform: none;
}

.fcf-status:not(:empty) {
    display: block;
    margin-bottom: 1rem;
    padding: .75rem 1rem;
    border-radius: var(--cp-radius-sm);
    background: rgba(255, 255, 255, .18);
    color: #fff;
    font-size: .95rem;
}

#fcf-thank-you {
    color: #fff;
}

#fcf-thank-you strong {
    display: block;
    font-family: "Nunito", sans-serif;
    font-size: 1.4rem;
    margin-bottom: .5rem;
}

/* Inline validation messages from just-validate */
.js-validate-error-label {
    display: block;
    margin-top: .35rem;
    color: #fff;
    font-size: .85rem;
    font-weight: 600;
}

.js-validate-error-field {
    border-color: #fff !important;
}

/* Contact details column */
.cp-contact-list li {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    padding: .7rem 0;
    border-bottom: 1px solid rgba(24, 24, 24, .08);
    font-size: 1.05rem;
}

.cp-contact-list li:last-child {
    border-bottom: 0;
}

.cp-contact-list i {
    flex: 0 0 38px;
    height: 38px;
    line-height: 38px;
    text-align: center;
    border-radius: 12px;
    color: var(--cp-primary);
    background: var(--cp-primary-soft);
}

.cp-contact-list a {
    color: var(--cp-dark);
    font-weight: 600;
    align-self: center;
    transition: color .25s var(--cp-ease);
}

.cp-contact-list a:hover {
    color: var(--cp-primary);
    text-decoration: none;
}

.cp-contact-list span {
    align-self: center;
}

/* Social buttons: the stock markup used btn-outline-light on a light
   background, which made them invisible. */
.cp-social {
    width: 44px;
    height: 44px;
    line-height: 44px;
    margin: 0 .6rem .6rem 0;
    text-align: center;
    border-radius: 50%;
    color: #fff;
    background: var(--cp-dark);
    transition: background .25s var(--cp-ease), transform .25s var(--cp-ease);
}

.cp-social:hover,
.cp-social:focus {
    color: #fff;
    background: var(--cp-primary);
    transform: translateY(-3px);
    text-decoration: none;
}

/* Map */
.cp-map {
    display: block;
    width: 100%;
    height: 320px;
    border: 0;
}

@media (min-width: 768px) {
    .cp-map {
        height: 440px;
    }
}

/* 16px stops iOS Safari from zooming the page in on field focus */
@media (max-width: 767.98px) {
    .fcf-form-class .input,
    .fcf-form-class .textarea,
    #fcf-button {
        font-size: 16px;
    }
}

/* --------------------------------------------------------------------------
   10. Videos page - fixed-size iframes made fluid
   -------------------------------------------------------------------------- */

iframe[src*="youtube"] {
    width: 100%;
    max-width: 560px;
    aspect-ratio: 16 / 9;
    height: auto;
    border: 0;
    border-radius: var(--cp-radius);
    box-shadow: var(--cp-shadow-sm);
    margin: 0 auto 1rem;
    display: block;
}

/* Two-up on wide screens, stacked on phones */
.cp-video-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    justify-content: center;
    margin-bottom: 1.25rem;
}

.cp-video-row iframe[src*="youtube"] {
    flex: 1 1 320px;
    margin: 0;
}

/* --------------------------------------------------------------------------
   11. Footer
   -------------------------------------------------------------------------- */

.bg-dark .nav-link {
    transition: color .25s var(--cp-ease);
}

.bg-dark .nav-link:hover {
    color: var(--cp-primary) !important;
}

/* --------------------------------------------------------------------------
   12. Back to top
   -------------------------------------------------------------------------- */

.back-to-top {
    width: 48px;
    height: 48px;
    padding: 0;
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    box-shadow: var(--cp-shadow-primary);
    animation: none !important;
    right: 20px;
    bottom: 20px;
}

.back-to-top.cp-show {
    display: flex;
    animation: cp-pop .35s var(--cp-ease-out) both !important;
}

.back-to-top:hover {
    transform: translateY(-4px);
}

@keyframes cp-pop {
    from { opacity: 0; transform: translateY(14px) scale(.8); }
    to   { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   13. Scroll-reveal
   The hiding rules only apply once the inline head script has set .cp-js, and
   that same script strips .cp-js again if modern.js has not booted within 3s -
   so a JS failure can never leave the page blank.
   -------------------------------------------------------------------------- */

.cp-js .card,
.cp-js h1.display-4,
.cp-js img.img-fluid,
.cp-js iframe[src*="youtube"],
.cp-js [data-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .7s var(--cp-ease-out), transform .7s var(--cp-ease-out);
    transition-delay: var(--cp-d, 0s);
}

.cp-js [data-reveal="left"] {
    transform: translateX(-32px);
}

.cp-js [data-reveal="right"] {
    transform: translateX(32px);
}

.cp-js [data-reveal="zoom"] {
    transform: scale(.94);
}

/* Each revealed state has to out-specify its own hidden state above -
   .cp-js .cp-in alone (0,2,0) loses to .cp-js h1.display-4 (0,2,1). */
.cp-js .card.cp-in,
.cp-js h1.display-4.cp-in,
.cp-js img.img-fluid.cp-in,
.cp-js iframe[src*="youtube"].cp-in,
.cp-js [data-reveal].cp-in,
.cp-js .cp-in {
    opacity: 1;
    transform: none;
}

/* Hero copy eases in on load rather than waiting for a scroll */
.cp-js .cp-hero-in {
    animation: cp-fade-up .9s var(--cp-ease-out) both;
}

@keyframes cp-fade-up {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   14. Reduced motion - honour the OS setting and turn all of it off
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }

    .cp-js .card,
    .cp-js h1.display-4,
    .cp-js img.img-fluid,
    .cp-js iframe[src*="youtube"],
    .cp-js [data-reveal],
    .cp-js .cp-hero-in {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }

    .card:hover,
    .btn:hover,
    .back-to-top:hover {
        transform: none;
    }
}

/* --------------------------------------------------------------------------
   15. Print
   -------------------------------------------------------------------------- */

@media print {
    .cp-nav-backdrop,
    .back-to-top,
    .navbar {
        display: none !important;
    }

    .cp-js * {
        opacity: 1 !important;
        transform: none !important;
    }
}