/*
 * Barton Pacific — Modern Joomla / Template Creator override
 * Replace the current contents of custom.css with this file.
 * The template already imports custom.css from template.css.
 *
 * SlideShow CK module class:
 *   barton-hero
 */

:root {
    --bp-ink: #26343a;
    --bp-body: #465157;
    --bp-muted: #6f797d;
    --bp-blue: #164f73;
    --bp-blue-dark: #103b57;
    --bp-gold: #b79a63;
    --bp-warm-white: #f7f5f0;
    --bp-white: #ffffff;
    --bp-line: #e1e2df;
    --bp-shadow: 0 14px 40px rgba(25, 38, 44, 0.10);
    --bp-content-width: 1290px;
    --bp-reading-width: 1120px;
}

/* =========================================================
   GLOBAL
   ========================================================= */

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--bp-warm-white);
    color: var(--bp-body);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, Helvetica, Arial, sans-serif;
    font-size: 17px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

#wrapper {
    min-height: 100vh;
    background: var(--bp-warm-white) !important;
    background-image: none !important;
}

a {
    color: var(--bp-blue);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
}

a:hover,
a:focus {
    color: var(--bp-blue-dark);
}

p {
    margin: 0 0 1.15rem !important;
    padding: 0;
}

ul,
ol {
    margin: 0 0 1.25rem 1.25rem;
    padding: 0;
}

h1,
h2,
h3,
h4,
div.componentheading,
div.contentheading {
    margin: 0 0 0.7em;
    color: var(--bp-ink);
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 400;
    letter-spacing: -0.025em;
}

h1,
div.componentheading {
    font-size: clamp(2.2rem, 4vw, 3.5rem);
    line-height: 1.05;
}

h2,
div.contentheading {
    margin-top: 1.2em;
    font-size: clamp(1.75rem, 3vw, 2.6rem);
    line-height: 1.1;
}

h3 {
    margin-top: 1.1em;
    font-size: clamp(1.2rem, 1.7vw, 1.5rem);
    line-height: 1.25;
}

h4 {
    margin-top: 1em;
    font-size: clamp(1.05rem, 1.3vw, 1.2rem);
    line-height: 1.3;
}

strong {
    color: var(--bp-ink);
}

/* =========================================================
   HEADER
   Modernized header, logo spacing, and navigation.
   ========================================================= */

#bannerrow {
    position: relative;
    z-index: 100;
    border-bottom: 1px solid rgba(38, 52, 58, 0.10);
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 1px 12px rgba(20, 35, 42, 0.04);
}

#bannerrow > .inner {
    display: flex !important;
    align-items: center;
    width: min(100% - 40px, var(--bp-content-width));
    min-height: 92px;
    margin: 0 auto !important;
    padding: 0;
    gap: 28px;
}

#bannerrowcolumn1,
#bannercolumn1 {
    width: auto !important;
}

#bannerrowcolumn1 {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    min-width: 0;
}

#bannercolumn1 {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    margin-left: auto;
}

#logo1 {
    display: flex;
    align-items: center;
}

#logo1 > .inner {
    display: flex;
    align-items: center;
    padding: 12px 16px;
}

#logo1 > .inner > img,
#logo1 img,
#logo1 .tck-logo-img {
    display: block;
    width: 88px !important;
    max-height: 86px;
    object-fit: contain;
}

/* Navigation — works with Joomla menu and Maximenu CK */
#bannermenu ul.menu,
#bannermenu ul.nav,
#bannermenu ul.maximenuck {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0;
    padding: 0;
}

#bannermenu ul.menu > li,
#bannermenu ul.nav > li,
#bannermenu ul.maximenuck > li {
    margin: 0 !important;
}

#bannermenu ul.menu > li > a,
#bannermenu ul.menu > li > span.separator,
#bannermenu ul.nav > li > a,
#bannermenu ul.nav > li > span.separator,
#bannermenu ul.maximenuck > li > a,
#bannermenu ul.maximenuck > li > span.separator {
    position: relative;
    display: block;
    margin: 0 !important;
    padding: 0.75rem 0.9rem !important;
    color: var(--bp-ink);
    font-size: 0.98rem;
    font-style: normal;
    font-weight: 550;
    letter-spacing: 0.005em;
    line-height: 1.2;
    text-decoration: none;
    transition: color 160ms ease;
}

#bannermenu ul.menu > li > a::after,
#bannermenu ul.nav > li > a::after,
#bannermenu ul.maximenuck > li > a::after {
    position: absolute;
    right: 0.9rem;
    bottom: 0.42rem;
    left: 0.9rem;
    height: 2px;
    background: var(--bp-gold);
    content: "";
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left center;
    transition: opacity 160ms ease, transform 160ms ease;
}

#bannermenu ul.menu > li:hover > a,
#bannermenu ul.menu > li:focus-within > a,
#bannermenu ul.nav > li:hover > a,
#bannermenu ul.nav > li:focus-within > a,
#bannermenu ul.maximenuck > li:hover > a,
#bannermenu ul.maximenuck > li:focus-within > a {
    color: var(--bp-blue);
}

#bannermenu ul.menu > li:hover > a::after,
#bannermenu ul.menu > li:focus-within > a::after,
#bannermenu ul.nav > li:hover > a::after,
#bannermenu ul.nav > li:focus-within > a::after,
#bannermenu ul.maximenuck > li:hover > a::after,
#bannermenu ul.maximenuck > li:focus-within > a::after,
#bannermenu ul.menu > li.active > a::after,
#bannermenu ul.nav > li.active > a::after,
#bannermenu ul.maximenuck > li.active > a::after {
    opacity: 1;
    transform: scaleX(1);
}

#bannermenu ul.menu > li.active > a,
#bannermenu ul.nav > li.active > a,
#bannermenu ul.maximenuck > li.active > a,
#bannermenu ul.maximenuck > li.active > span.separator {
    color: var(--bp-blue);
    font-style: normal !important;
    font-weight: 650 !important;
}

/* Dropdowns */
#bannermenu li div.floatCK,
#bannermenu li div.floatck,
#bannermenu ul.menu li ul,
#bannermenu ul.nav li ul {
    border: 1px solid var(--bp-line);
    border-radius: 6px;
    background: var(--bp-white);
    box-shadow: var(--bp-shadow);
}

/* =========================================================
   SLIDESHOW CK
   The module MUST contain the class: barton-hero
   ========================================================= */

.barton-hero {
    position: relative;
    width: min(100% - 40px, var(--bp-content-width));
    margin: 0 auto;
    overflow: hidden;
    background: var(--bp-ink);
    box-shadow: var(--bp-shadow);
}

.barton-hero,
.barton-hero .slideshowck,
.barton-hero .camera_wrap {
    padding: 0;
}

.barton-hero .camera_wrap,
.barton-hero .slideshowck {
    position: relative;
    margin: 0 !important;
    background: var(--bp-ink);
}

/* Left-to-right readability gradient */
.barton-hero .camera_overlayer {
    background:
        linear-gradient(
            90deg,
            rgba(19, 28, 33, 0.78) 0%,
            rgba(19, 28, 33, 0.55) 38%,
            rgba(19, 28, 33, 0.18) 70%,
            rgba(19, 28, 33, 0.02) 100%
        ) !important;
}

/* Native CK caption container */
.barton-hero .camera_caption {
    position: absolute !important;
    top: 50% !important;
    right: auto !important;
    bottom: auto !important;
    left: clamp(28px, 5vw, 72px) !important;
    display: block !important;
    width: min(610px, 54vw) !important;
    margin: 0 !important;
    padding: 22px 26px !important;
    box-sizing: border-box;
    background: rgba(183, 154, 99, 0.75) !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(-50%);
    z-index: 20 !important;
}

.barton-hero .camera_caption > div,
.barton-hero .camera_caption > div > div {
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--bp-white) !important;
    text-align: left;
}

.barton-hero .camera_caption_title,
.barton-hero .camera_caption h2 {
    display: block;
    margin: 0 0 0.7rem !important;
    max-width: 610px;
    color: var(--bp-white) !important;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2.15rem, 4.2vw, 4.45rem) !important;
    font-weight: 400 !important;
    letter-spacing: -0.035em;
    line-height: 1.02 !important;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.30);
}

.barton-hero .camera_caption_desc,
.barton-hero .camera_caption p {
    display: block;
    margin: 0 !important;
    max-width: 570px;
    color: rgba(255, 255, 255, 0.94) !important;
    font-family: inherit;
    font-size: clamp(1rem, 1.3vw, 1.28rem) !important;
    line-height: 1.48 !important;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.38);
}

.barton-hero .camera_caption a {
    color: inherit !important;
    text-decoration: none !important;
}

/* Controls */
.barton-hero .camera_loader,
.barton-hero .camera_bar,
.barton-hero .camera_commands {
    display: none !important;
}

/* Carousel dots below the image */
.barton-hero .camera_pag {
    position: static !important;
    width: 100%;
    min-height: 48px;
    padding: 14px 20px 12px;
    background: var(--bp-warm-white);
    text-align: right;
    transform: none !important;
}

.barton-hero .camera_pag .camera_pag_ul {
    margin: 0 !important;
    padding: 0 !important;
    text-align: right !important;
}

.barton-hero .camera_pag .camera_pag_ul li {
    width: 10px !important;
    height: 10px !important;
    margin: 0 5px !important;
    background: #b9bcba !important;
    box-shadow: none !important;
}

.barton-hero .camera_pag .camera_pag_ul li.cameracurrent,
.barton-hero .camera_pag .camera_pag_ul li:hover {
    background: var(--bp-ink) !important;
}

.barton-hero .camera_prev,
.barton-hero .camera_next {
    width: 42px !important;
    height: 58px !important;
    margin-top: -29px !important;
    background: rgba(20, 29, 34, 0.50) !important;
    opacity: 0;
    transition: opacity 180ms ease, background-color 180ms ease;
}

.barton-hero:hover .camera_prev,
.barton-hero:hover .camera_next,
.barton-hero:focus-within .camera_prev,
.barton-hero:focus-within .camera_next {
    opacity: 1;
}

.barton-hero .camera_prev:hover,
.barton-hero .camera_next:hover {
    background: rgba(20, 29, 34, 0.82) !important;
}

.barton-hero img,
.barton-hero .cameraSlide img {
    border: 0 !important;
    box-shadow: none !important;
}

/* =========================================================
   MAIN CONTENT
   ========================================================= */

#maincontent {
    background: var(--bp-white);
}

#maincontent > .inner {
    width: min(100% - 40px, var(--bp-reading-width));
    margin: 0 auto;
    padding: clamp(1.25rem, 2vw, 2rem) 0 clamp(4rem, 7vw, 7rem);
    color: var(--bp-body) !important;
}

#maincontent .tck-article,
#maincontent .com-content-article {
    width: 100%;
}

#maincontent .tck-article-body,
#maincontent .com-content-article__body {
    max-width: 100%;
}

#maincontent .tck-article-body > :first-child,
#maincontent .com-content-article__body > :first-child {
    margin-top: 0;
}

#maincontent .tck-article-body > h2:first-of-type,
#maincontent .com-content-article__body > h2:first-of-type {
    max-width: 930px;
    margin-top: 0 !important;
    margin-bottom: 0.45em;
    font-size: clamp(1.75rem, 3vw, 2.6rem);
}

/* The first two paragraphs form the homepage introduction */
#maincontent .tck-article-body > h2:first-of-type + p,
#maincontent .com-content-article__body > h2:first-of-type + p {
    max-width: 970px;
    color: var(--bp-ink);
    font-size: clamp(1.08rem, 1.6vw, 1.3rem);
    line-height: 1.6;
}

#maincontent .tck-article-body > h2:first-of-type + p + p,
#maincontent .com-content-article__body > h2:first-of-type + p + p {
    max-width: 970px;
    color: var(--bp-muted);
    font-size: 1.05rem;
}

/* Existing bold stand-alone CTA text — visual treatment only.
   Convert these to real links in the article editor when ready. */
#maincontent .tck-article-body p > strong:only-child,
#maincontent .com-content-article__body p > strong:only-child {
    display: inline-block;
    margin-top: 0.35rem;
    padding: 0.72rem 1.05rem;
    border: 1px solid var(--bp-blue);
    border-radius: 3px;
    color: var(--bp-blue);
    font-size: 0.84rem;
    font-weight: 700;
    letter-spacing: 0.055em;
    line-height: 1.2;
    text-transform: uppercase;
}

/* =========================================================
   BUTTONS / FORMS
   ========================================================= */

.button,
button,
button.btn,
input.btn,
.btn,
.readmore a,
.readmore .btn {
    border: 1px solid var(--bp-blue);
    border-radius: 3px;
    background: var(--bp-blue);
    color: var(--bp-white);
    font-size: 0.9rem;
    font-weight: 650;
    letter-spacing: 0.025em;
    padding: 0.7rem 1.05rem;
    transition: background-color 160ms ease, border-color 160ms ease,
        color 160ms ease, transform 160ms ease;
}

.button:hover,
button:hover,
button.btn:hover,
input.btn:hover,
.btn:hover,
.readmore a:hover,
.readmore .btn:hover,
.button:focus,
button:focus,
button.btn:focus,
input.btn:focus,
.btn:focus {
    border-color: var(--bp-blue-dark);
    background: var(--bp-blue-dark);
    color: var(--bp-white);
    transform: translateY(-1px);
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="url"],
textarea,
select {
    min-height: 44px;
    border: 1px solid #cbd0d2;
    border-radius: 3px;
    background: var(--bp-white);
    color: var(--bp-ink);
    font: inherit;
}

/* =========================================================
   FOOTER
   ========================================================= */

#footer-row,
#footer-content {
    background: var(--bp-ink);
}

#footer-row > .inner,
#footer-content > .inner {
    width: min(100% - 40px, var(--bp-content-width));
    margin: 0 auto;
    padding: 2rem 0;
    color: rgba(255, 255, 255, 0.76) !important;
    text-align: center;
}

#footer-content .tck-module-text,
#footer-content a {
    color: rgba(255, 255, 255, 0.82) !important;
}

#footer-content a:hover,
#footer-content a:focus {
    color: var(--bp-white) !important;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {
    #bannerrow > .inner {
        min-height: 80px;
        gap: 16px;
    }

    #logo1 > .inner > img,
    #logo1 img,
    #logo1 .tck-logo-img {
        width: 78px !important;
        max-height: 72px;
    }

    #bannermenu ul.menu > li > a,
    #bannermenu ul.nav > li > a,
    #bannermenu ul.maximenuck > li > a {
        padding-right: 0.65rem !important;
        padding-left: 0.65rem !important;
        font-size: 0.93rem;
    }

    .barton-hero .camera_overlayer {
        background: rgba(19, 28, 33, 0.53) !important;
    }

    .barton-hero .camera_caption {
        left: 6vw !important;
        width: 76vw !important;
    }
}

@media (max-width: 757px) {
    body {
        font-size: 16px;
    }

    #bannerrow > .inner {
        flex-wrap: wrap;
        width: min(100% - 28px, var(--bp-content-width));
        padding: 10px 0;
    }

    #bannerrowcolumn1,
    #bannercolumn1 {
        width: 100% !important;
    }

    #bannercolumn1 {
        order: -1;
        justify-content: center;
        margin-left: 0;
    }

    #bannerrowcolumn1 {
        justify-content: center;
    }

    #logo1 > .inner {
        padding: 8px 12px;
    }

    #logo1 > .inner > img,
    #logo1 img,
    #logo1 .tck-logo-img {
        width: 70px !important;
    }

    #bannermenu ul.menu,
    #bannermenu ul.nav,
    #bannermenu ul.maximenuck {
        justify-content: center;
    }

    .barton-hero {
        width: 100%;
        box-shadow: none;
    }

    .barton-hero .camera_caption {
        top: auto !important;
        right: 22px !important;
        bottom: 28px !important;
        left: 22px !important;
        width: auto !important;
        padding: 18px 20px !important;
        transform: none;
    }

    .barton-hero .camera_caption_title,
    .barton-hero .camera_caption h2 {
        font-size: clamp(1.7rem, 8vw, 2.5rem) !important;
    }

    .barton-hero .camera_caption_desc,
    .barton-hero .camera_caption p {
        font-size: 0.96rem !important;
        line-height: 1.42 !important;
    }

    .barton-hero .camera_prev,
    .barton-hero .camera_next {
        display: none !important;
    }

    .barton-hero .camera_pag {
        position: static !important;
        width: 100%;
        min-height: auto;
        padding: 12px 0;
        background: var(--bp-warm-white);
        text-align: center;
        transform: none !important;
    }

    .barton-hero .camera_pag .camera_pag_ul {
        text-align: center !important;
    }

    #maincontent > .inner {
        width: min(100% - 32px, var(--bp-reading-width));
        padding-top: 1.4rem;
    }
}

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

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}