/* ==========================================================================
   sdn-portfolio.css
   Styling for the dynamic portfolio hub, category grids, and single
   picture pages - matched to the look and feel of San's existing fine
   art site (sandnathart.com): same palette, same dark full-bleed
   gallery banner, and the same "item / thumb / top-content /
   hover-effect" gallery card mechanic (title badge up top that fades
   on hover, a details panel that slides up from the bottom on hover).
   ========================================================================== */

@import url("https://fonts.googleapis.com/css?family=Open+Sans:100,200,300,400,500,600,700,800,900");

:root {
    /* Palette lifted straight from sandnathart.com */
    --art-brand: #6f5d44;   /* taupe/brown - links, prices, accents */
    --art-accent: #e5bb89;  /* warm gold - highlighted word in headings */
    --art-dark: #2a2a2a;    /* near-black - banners, dark backgrounds */
    --art-grey: #afafaf;    /* muted grey - secondary text */
    --pf-gap: 10px;
}

/* ---- Dark full-bleed "gallery banner" (reuses the theme's existing
   .breadcrumb / .breadcrumb_iner_item markup, restyled) ---------------
   NOTE: selectors below intentionally repeat the full class chain
   (.breadcrumb .breadcrumb_iner .breadcrumb_iner_item h2, not just
   .breadcrumb .breadcrumb_iner_item h2) to match - and beat - the
   original theme rule's specificity in css/style.css. A shorter
   selector here was previously losing the cascade to the theme's own
   dark text color, which is why the heading looked unreadable on this
   dark background. */
.breadcrumb.breadcrumb_bg {
    background: var(--art-dark);
    background-image: none;
    padding: 0;
}

/* The theme sets this element's height to 200px (see .breadcrumb
   .breadcrumb_iner in style.css). 150px = about 1.5x the 100px this
   was previously set to. */
.breadcrumb .breadcrumb_iner {
    height: 150px;
}

.breadcrumb .breadcrumb_iner .breadcrumb_iner_item h2 {
    color: #fff;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.3;
    text-transform: capitalize;
    margin-bottom: 4px;
}

.breadcrumb .breadcrumb_iner .breadcrumb_iner_item h2 span {
    font-style: normal;
    color: var(--art-accent);
}

.breadcrumb_menu {
    margin-top: 18px;
    padding: 18px 0 0;
    border-top: 1px solid rgba(250, 250, 250, 0.2);
    list-style: none;
}

.breadcrumb_menu li {
    display: inline-block;
    margin: 0 8px;
    color: var(--art-grey);
    font-size: 14px;
}

/* "Home \ Portfolio \ Places" - a backslash between crumbs, not shown
   before the first one. */
.breadcrumb_menu li:not(:first-child)::before {
    content: "\\";
    display: inline-block;
    margin-right: 8px;
    color: var(--art-grey);
}

.breadcrumb_menu li a {
    color: #fff;
    text-decoration: none;
}

.breadcrumb_menu li a:hover {
    color: var(--art-accent);
}

.breadcrumb_menu li.active {
    color: var(--art-accent);
}

/* ---- Nav dropdown (portfolio -> places -> Yellowstone...), restyled
   to match the dark dropdown / gold-hover look of sandnathart.com ----
   This is a pure-CSS "checkbox hack" menu (adapted from
   https://codepen.io/signalkuppe/pen/YybXNJ) - NO JavaScript is
   involved in showing/hiding either level, and NO :hover rule exists
   anywhere in this block. Each dropdown is driven by a real, native
   <input type="checkbox"> immediately before it in the markup (see
   templates/_header_.php): the menu is visible only while its
   checkbox is actually checked - i.e. only after a real click/tap,
   identically on desktop and mobile, with nothing else (not Bootstrap's
   own dropdown JS, not a document click-listener) able to interfere,
   because nothing else is involved at all. */

/* the checkbox itself is never meant to be seen - hidden off-screen
   rather than display:none so it stays keyboard-focusable */
.menu-checkbox {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

/* labels stand in for the old <a class="dropdown-toggle"> triggers -
   same look, just clickable via native label-for-checkbox behavior */
.main_menu label.dropdown-toggle,
.main_menu label.dropdown-item {
    margin-bottom: 0; /* override Bootstrap's default label margin */
    cursor: pointer;
}

/* ---- Click-anywhere-else-to-close ---------------------------------------
   Everything above already worked exactly as before (open/close by
   click, both levels, both desktop and mobile) - this only ADDS an
   invisible overlay covering the rest of the page while the portfolio
   dropdown is open, so clicking anywhere outside it closes it. Still
   no JavaScript: :has() (supported in every current browser) shows the
   overlay whenever any dropdown checkbox inside the header is checked,
   and clicking the overlay - itself just a <label for="menu-portfolio-toggle">
   - unchecks it the same native way clicking "portfolio" again would.

   The overlay is placed as a sibling of .container in the markup,
   deliberately NOT nested inside the dropdown's own markup - paired
   with .container getting a higher z-index below, that guarantees the
   overlay can never end up sitting on top of (and blocking clicks on)
   "about", "services", or any other nav link, regardless of where the
   dropdown itself happens to be positioned. */
/* Gives the WHOLE header a dominant stacking priority over the rest of
   the page, unconditionally - not just something the nav's own inner
   .container has relative to its own overlay (below). Without this,
   the header only reliably painted above other page content once the
   theme's own scroll-triggered "sticky header" class
   (.background-header, position:fixed) kicked in - which is exactly
   why scrolling down "fixed" the dropdown on About/Comments: that
   class happened to grant the stacking priority the header needed all
   along, but only after scrolling past the trigger point. This makes
   it unconditional, on every page, scrolled or not. */
.main_menu {
    position: relative;
    z-index: 1030;
}

.main_menu .container {
    position: relative;
    z-index: 2;
}

.menu-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1;
    background: transparent;
    cursor: default;
    /* purely a click target, never announced/focusable */
    -webkit-tap-highlight-color: transparent;
}

.main_menu:has(.menu-checkbox:checked) .menu-overlay {
    display: block;
}

.main_menu .dropdown-menu {
    display: none !important;
    background-color: #343a40;
    border: none;
    border-radius: 6px;
    padding: 6px 0;
}

/* Anchors the dropdown panel under the "portfolio" word itself. Without
   this, the absolutely-positioned .dropdown-menu (see below) has no
   positioned ancestor to anchor to and falls back to the page/container
   edge instead - which is why it was appearing at the far left under
   the logo instead of under "portfolio". */
.main_menu .menu-hasdropdown {
    position: relative;
}

/* Shown ONLY while the checkbox immediately before it (see markup) is
   checked - a real click, never hover. One rule handles both the
   top-level menu and the nested "Places" submenu, since both follow
   the exact same input -> label -> .dropdown-menu structure. */
.menu-checkbox:checked + label + .dropdown-menu {
    display: block !important;
}

.main_menu .dropdown-item {
    color: #fff;
    font-size: 13px;
    text-transform: capitalize;
    padding: 8px 20px;
}

.main_menu .dropdown-item:hover,
.main_menu .dropdown-item.active {
    background-color: #495057;
    color: var(--art-accent);
}

/* ---- Portfolio hub (the 4 category tiles) ------------------------------ */
.pf-hub {
    row-gap: 24px;
}

.pf-hub-tile {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: 15px;
    text-decoration: none;
    background: var(--art-dark);
}

.pf-hub-tile-img {
    width: 100%;
    padding-top: 125%; /* 4:5 portrait tile */
    position: relative;
    overflow: hidden;
}

.pf-hub-tile-img img,
.pf-hub-tile-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #2c343a;
    transition: transform 0.6s ease;
}

.pf-hub-tile:hover .pf-hub-tile-img img {
    transform: scale(1.06);
}

.pf-hub-tile-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 22px 18px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0) 100%);
    text-align: center;
}

.pf-hub-tile-caption h3 {
    color: #fff;
    margin: 0 0 4px;
    font-size: 20px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.pf-hub-tile-caption span {
    color: var(--art-accent);
    font-size: 13px;
    letter-spacing: 0.5px;
}

/* ---- Sub-category filter pills (e.g. under "places") -------------------- */
.pf-filter {
    margin-bottom: 40px;
}

.pf-filter-item {
    display: inline-block;
    margin: 0 6px 10px;
    padding: 9px 22px;
    border: 1px solid var(--art-brand);
    border-radius: 10px;
    color: var(--art-brand);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: capitalize;
    text-decoration: none;
    transition: all 0.25s ease;
}

.pf-filter-item:hover,
.pf-filter-item.active {
    background: var(--art-brand);
    border-color: var(--art-brand);
    color: #fff;
}

/* ---- Gallery grid - mirrors sandnathart.com's .photos-videos item ------- */
.pf-grid {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -15px;
}

.pf-item-col {
    width: 33.3333%;
    padding: 0 15px;
    margin-bottom: 30px;
}

@media (max-width: 991px) {
    .pf-item-col { width: 50%; }
}

@media (max-width: 575px) {
    .pf-item-col { width: 100%; }
}

.pf-item {
    display: block;
    text-decoration: none;
}

.pf-item .thumb {
    position: relative;
    overflow: hidden;
    border-radius: 15px;
    background: #101314;
}

.pf-item .thumb::before {
    content: "";
    display: block;
    padding-top: 100%;
}

.pf-item .thumb img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 15px;
    transition: transform 0.5s ease;
}

.pf-item:hover .thumb img {
    transform: scale(1.05);
}

/* title badge, top of card - fades out on hover just like the reference */
.pf-item .thumb .top-content {
    position: absolute;
    display: inline-block;
    top: 0;
    left: 10px;
    right: 10px;
    background-color: #fff;
    border-radius: 10px;
    padding: 8px 14px;
    transition: opacity 0.2s;
}

.pf-item:hover .thumb .top-content {
    opacity: 0;
}

.pf-item .thumb .top-content h4 {
    display: inline;
    font-size: 15px;
    font-weight: 700;
    color: var(--art-dark);
}

/* details panel that slides up from the bottom on hover */
.pf-item .thumb .hover-effect {
    position: absolute;
    right: 10px;
    left: 10px;
    bottom: -100%;
    transition: all 0.4s ease;
}

.pf-item:hover .thumb .hover-effect {
    bottom: 10px;
}

.pf-item .thumb .hover-effect .content {
    background-color: #fff;
    border-radius: 10px;
    padding: 10px 15px;
}

.pf-item .thumb .hover-effect .content .info {
    display: flex;
    width: 100%;
    align-items: center;
}

.pf-item .thumb .hover-effect .content span.participants {
    font-size: 13px;
    font-weight: 500;
    color: var(--art-grey);
    flex-basis: 100%;
}

.pf-item .thumb .hover-effect .content span.price {
    font-size: 16px;
    font-weight: 700;
    color: var(--art-brand);
    white-space: nowrap;
}

.pf-empty {
    color: #888;
    padding: 40px 0;
}

/* ---- "Buy" button under each thumbnail ----------------------------------- */
.pf-item {
    position: relative;
}

.pf-buy-form {
    margin: 10px 0 0;
    text-align: center;
}

/* ---- "Like" button - base style shared everywhere it appears
   (portfolio grid thumbnails, the pPic page; the picture-show
   carousel's equivalent styling is .pic-show-like-btn in
   css/pic-show.css). The actual click behavior is entirely in
   js/likes.js - this file only needs to look right in both the
   not-liked (outline heart, far fa-heart) and liked (filled heart,
   fas fa-heart, toggled via the .is-liked class) states. ------------- */
.like-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 10px;
    border: 1px solid #ddd;
    background: #fff;
    color: #888;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.like-btn:hover {
    border-color: #e08585;
    color: #e08585;
}

.like-btn.is-liked {
    border-color: #e0575c;
    background: #fdecec;
    color: #e0575c;
}

.like-btn i {
    font-size: 14px;
}

/* Grid thumbnails: like + buy button sit side by side under each
   picture, instead of the buy button alone. */
.pf-item-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 10px;
}

.pf-item-actions .pf-buy-form {
    margin: 0;
}

/* pPic page: sits left-aligned right under the title, matching the
   rest of the meta panel's alignment. */
.pic-detail-meta .like-btn {
    margin-bottom: 16px;
}

/* ---- Full "Behind the Shot" description block (pPic page only) -------- */
.pic-detail-description {
    margin-top: 50px;
    padding-top: 40px;
    border-top: 1px solid #ececec;
}

.pic-detail-description h3 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 18px;
    text-align: center;
}

.pic-detail-description-text {
    color: #555;
    line-height: 1.9;
    font-size: 16px;
}

.pf-buy-btn {
    display: inline-block;
    padding: 8px 24px;
    border-radius: 10px;
    border: 1px solid var(--art-brand);
    background: var(--art-brand);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.3px;
    cursor: pointer;
    transition: all 0.25s ease;
}

.pf-buy-btn:hover {
    background: transparent;
    color: var(--art-brand);
}

/* "Not Available for Sale" - shown in place of the Buy button/form
   for a picture explicitly priced "$0" (portfolio grid thumbnails and
   the pPic page; the picture-show carousel's equivalent is
   .pic-show-not-for-sale in css/pic-show.css). */
.pf-not-for-sale {
    margin: 10px 0 0;
    text-align: center;
    font-size: 13px;
    font-style: italic;
    color: #999;
}

.pic-detail-meta .pf-not-for-sale {
    text-align: left;
    margin: 4px 0 14px;
}

/* pPic single-picture page: left-aligned (matches the rest of the
   meta panel) with a little breathing room above the "Inquire" link. */
.pic-detail-meta .pf-buy-form {
    text-align: left;
    margin: 4px 0 14px;
}

.pic-detail-meta .pf-buy-btn {
    padding: 10px 30px;
    font-size: 14px;
}

/* ---- Single picture detail page (pPic) ----------------------------------- */
.pic-detail-image {
    display: block;
    background: #101314;
    border-radius: 15px;
    overflow: hidden;
}

.pic-detail-image img {
    width: 100%;
    height: auto;
    display: block;
}

.pic-detail-nav {
    display: flex;
    justify-content: space-between;
    margin-top: 14px;
    font-size: 13px;
}

.pic-detail-nav a {
    color: var(--art-dark);
    text-decoration: none;
    letter-spacing: 0.3px;
}

.pic-detail-nav a:hover {
    color: var(--art-brand);
}

.pic-detail-meta {
    padding: 10px 0 0 0;
}

.pic-detail-meta h2 {
    margin-top: 0;
    font-size: 28px;
    font-weight: 700;
}

.pic-detail-facts {
    list-style: none;
    margin: 18px 0;
    padding: 0;
    border-top: 1px solid #ececec;
}

.pic-detail-facts li {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid #ececec;
    font-size: 14px;
    color: #555;
}

.pic-detail-facts li strong {
    color: var(--art-dark);
    font-weight: 600;
}

.pic-detail-details {
    color: #666;
    line-height: 1.8;
    margin-bottom: 24px;
}

/* Buttons on the picture page and elsewhere - reuse the reference's
   "big border button" look for a consistent call to action style. */
.pic-detail-meta .btn_2,
.big-border-button a {
    font-size: 15px;
    color: var(--art-brand);
    background-color: transparent;
    border: 1px solid var(--art-brand);
    padding: 10px 26px;
    display: inline-block;
    border-radius: 10px;
    font-weight: 500;
    text-transform: capitalize;
    letter-spacing: 0.5px;
    transition: all 0.3s;
}

.pic-detail-meta .btn_2:hover,
.big-border-button a:hover {
    background-color: var(--art-brand);
    color: #fff;
}

/* ---- dropdown sub-menu (places -> Yellowstone, Bryce...) -----------------
   Show/hide is handled by the single generic rule above
   (.menu-checkbox:checked + label + .dropdown-menu) - the nested
   submenu carries the .dropdown-menu class too, so no separate rule
   is needed for it. This block is layout-only: static, indented
   inline under "Places" rather than a popped-out flyout, at every
   screen size (a flyout positioned via left:100% was previously
   rendering outside/clipped by the parent panel on desktop). */
.dropdown-submenu-wrap {
    position: relative;
}

/* .main_menu prefix matches (rather than beats) the specificity of
   .main_menu .dropdown-menu above - a bare ".dropdown-submenu" rule
   here would lose that fight and the background/border-radius overrides
   below would silently not apply. */
.main_menu .dropdown-submenu {
    /* Bootstrap's own .navbar-expand-lg .navbar-nav .dropdown-menu rule
       sets position:absolute on ANY .dropdown-menu inside the navbar at
       desktop width - including this nested one, since it also carries
       that class. Left unset, that made it float as an overlapping
       flyout instead of flowing inline under "Places" (the transparent
       background then let the parent items show through underneath it).
       !important guarantees this wins regardless of how that compound
       Bootstrap selector's specificity compares to this one. */
    position: static !important;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    padding: 2px 0 2px 22px;
    margin-left: 8px;
    border-left: 1px solid rgba(255, 255, 255, 0.15);
    min-width: 190px;
}

/* ---- Contact form - visible field borders -----------------------------
   The theme's own .form-contact .form-control rule already sets a
   1px border, but at #f0e9ff (near-white) it's essentially invisible
   against the page background - hence the "naked" look. !important
   guarantees this wins outright rather than depending on cascade
   order/specificity matching the original rule exactly (the previous,
   non-!important version was inconsistent - visible in some places,
   not others). */
.form-contact .form-control {
    border: 1px solid #ccc !important;
}

.form-contact .form-control:focus {
    border-color: var(--art-brand) !important;
}

/* All "btn_2" buttons site-wide (Buy Now / More Pictures / Read More /
   Send Message / Post Comment / Back to portfolio / etc.) - same
   corner rounding as the "Buy" buttons (10px) instead of the theme's
   default full-pill 50px radius. This targets the base .btn_2 class
   itself (not just the compound .button-contactForm.btn_2 selector
   used by the two form submit buttons) so every button using it is
   consistent, not just some of them. !important for the same reason
   as the form borders above. */
.btn_2 {
    border-radius: 10px !important;
}

/* ---- Comments page: each testimonial as its own separated card -------- */
.comment-card {
    height: 100%;
    padding: 28px 30px;
    border: 1px solid #e6e6e6;
    border-radius: 15px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);
    background: #fff !important;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

/* Alternating card background - odd cards (1st, 3rd, 5th...) stay
   white (set above), even cards (2nd, 4th, 6th...) get light grey,
   so cards clearly read as separated even sitting next to each other. */
.comment-col:nth-child(even) .comment-card {
    background: #eeeeee !important;
}

.comment-card:hover {
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.09);
    transform: translateY(-2px);
}

.comment-card-title {
    font-size: 19px;
    font-weight: 700;
    color: var(--art-dark);
    margin-bottom: 12px;
}

.comment-card-subject {
    color: #7a7a7a;
    line-height: 1.7;
    margin-bottom: 18px;
}

.comment-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
    padding-top: 14px;
    border-top: 1px solid #eee;
}

.comment-card-name {
    font-weight: 600;
    color: var(--art-dark);
    font-size: 14px;
}

.comment-card-context {
    font-weight: 400;
    color: var(--art-brand);
}

.comment-card-date {
    font-size: 13px;
    color: #aaa;
    white-space: nowrap;
}

/* honeypot field on the comment form - invisible to real visitors,
   still present/fillable by simple bots that ignore CSS */
.pComments-hp {
    position: absolute;
    left: -5000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ---- "Starting from" label above each price on the pricing cards ------- */
.pricing_from {
    display: block;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #999;
    font-weight: 500;
}

/* ---- Star rating on each comment card ------------------------------ */
.star-rating {
    display: block;
    margin: 6px 0 12px;
    font-size: 15px;
}

.star-rating .star-filled {
    color: var(--art-accent, #e5bb89);
    margin-right: 2px;
}

.star-rating .star-empty {
    color: #ccc;
    margin-right: 2px;
}

/* ---- Service category icons (Services hub page) now link out --------- */
a.item {
    display: block;
    color: inherit;
    text-decoration: none;
    transition: transform 0.2s ease;
}

a.item:hover {
    color: inherit;
    text-decoration: none;
    transform: translateY(-4px);
}

/* ---- Footer newsletter signup: status message + honeypot -------------- */
.newsletter-msg {
    font-size: 13px;
    margin-bottom: 10px;
}

.newsletter-msg-ok {
    color: var(--art-accent, #e5bb89);
}

.newsletter-msg-error {
    color: #e08585;
}

.newsletter-hp {
    position: absolute;
    left: -5000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ---- Subcategory intro description (e.g. "Bryce Canyon" page) --------- */
.pf-subcategory-description {
    color: #666;
    line-height: 1.8;
    margin-bottom: 34px;
}

/* ---- "Other Services" list on the Services page ------------------------
   Same .item/.down-content card style as the 4 featured icon cards
   above it (same h3/h5 typography) - just without an icon image, since
   not every service has one. A little extra top padding fills the
   space where the icon would have sat, so the card doesn't feel
   cramped without it. */
.more-services-grid .down-content {
    padding-top: 24px;
}