/*
Theme Name: Golo Child
Theme URI: https://wp.getgolo.com/
Author: Uxper
Author URI: http://uxper.co/
Version: 1.0.1
Template: golo
Text Domain: golo
Tags: editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, threaded-comments, translation-ready
*/
/* ===== Museum catalog (v1 structural styles) ===== */
.museum-breadcrumb { padding: 16px 0; font-size: 14px; color: #666; }
.museum-breadcrumb a { color: #666; text-decoration: none; }
.museum-breadcrumb a:hover { text-decoration: underline; }

.museum-header h1 { margin-bottom: 8px; }
.museum-types, .museum-topics { margin: 10px 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.museum-type-badge, .museum-topic-badge {
    display: inline-block; padding: 4px 12px; border-radius: 999px;
    background: #f0f0f0; color: #333; text-decoration: none; font-size: 13px;
}
.museum-type-badge:hover, .museum-topic-badge:hover { background: #e0e0e0; }

.museum-layout { display: flex; gap: 40px; margin-top: 20px; flex-wrap: wrap; }
.museum-main { flex: 1 1 620px; min-width: 0; }
.museum-sidebar { flex: 0 1 320px; min-width: 280px; }

.museum-featured-image img { width: 100%; height: auto; border-radius: 8px; margin-bottom: 4px; }
.museum-photo-credit { font-size: 11px; color: #9a9a9a; margin: 0 0 20px; text-align: right; }
.museum-photo-credit a { color: #9a9a9a; text-decoration: underline; }
.museum-wikipedia-credit { font-size: 12px; color: #9a9a9a; margin-top: -10px; }
.museum-wikipedia-credit a { color: #9a9a9a; text-decoration: underline; }
.museum-description { line-height: 1.7; margin-bottom: 20px; }

.museum-gyg-widget-placeholder { margin: 24px 0; padding: 20px; background: #f5f9ff; border-radius: 8px; text-align: center; }
.museum-gyg-widget { margin: 24px 0; }
.museum-gyg-widget gyg-widget { display: block; }
.museum-gyg-activities { margin-top: 28px; }
.museum-gyg-activities-heading { font-size: 18px; font-weight: 600; color: #2d2d2d; margin: 0 0 12px; }
.museum-gyg-activities gyg-widget { display: block; }
.museum-archive-gyg { margin: 40px auto; padding-top: 32px; border-top: 1px solid #eee; }
.museum-archive-gyg gyg-widget { display: block; }

.museum-info-box {
    background: #fafafa; border: 1px solid #eee; border-radius: 8px; padding: 20px; margin-bottom: 20px;
}
.museum-info-box h3 { margin-top: 0; }
.museum-info-row { margin: 10px 0; font-size: 14px; }
.museum-hours-list { list-style: none; padding: 0; margin: 4px 0 0; }
.museum-hours-list li { padding: 2px 0; }
.museum-free-badge { display: inline-block; background: #e6f7ea; color: #1a7a3a; padding: 3px 10px; border-radius: 4px; font-weight: 600; }
.museum-social-links a { margin-right: 12px; }
.museum-map { width: 100%; height: 260px; background: #eee; border-radius: 8px; }

.museum-related { margin-top: 50px; }
.museum-related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; margin-top: 16px; }
.museum-related-card { text-decoration: none; color: inherit; display: block; }
.museum-related-card img { width: 100%; height: 110px; object-fit: cover; border-radius: 6px; }
.museum-related-card span { display: block; font-size: 13px; margin-top: 6px; color: #333; }

.museum-archive-title { padding: 30px 0 10px; }
.museum-archive-count { color: #888; font-size: 14px; }
.museum-archive-intro { color: #5d5d5d; font-size: 15px; max-width: 700px; margin-top: 8px; }
.museum-combo-links { margin-top: 18px; }
.museum-combo-links strong { display: block; font-size: 13px; color: #888; margin-bottom: 6px; font-weight: 600; }
.museum-combo-see-more { display: inline-block; margin-top: 4px; font-size: 13px; color: #23d3d3; text-decoration: none; }
.museum-combo-see-more:hover { text-decoration: underline; }
.museum-archive-map { width: 100%; height: 360px; background: #eee; border-radius: 8px; margin-top: 20px; }

.museum-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 24px; margin: 24px 0; }
@media (min-width: 900px) {
    .museum-grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
    .museum-grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
    .museum-grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
}
.museum-card { text-decoration: none; color: inherit; border: 1px solid #eee; border-radius: 8px; overflow: hidden; transition: box-shadow .15s;
    display: flex; flex-direction: column; height: 100%; background: #fff; }
.museum-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.08); }

/* Fixed 4:3 frame rather than a fixed img height. Two things fought this:
   the ratio box takes the height decision away from the image, and the
   selector is deliberately `.museum-card .museum-card-image img` (0,2,1)
   because Elementor's frontend.min.css carries `.elementor img { height: auto }`
   at the same specificity as a single-class selector and loads later, so it
   won the tie and every card sized itself to its own photo. */
.museum-card .museum-card-image { position: relative; width: 100%; aspect-ratio: 4 / 3; background: #f2f4f4; overflow: hidden; }
.museum-card .museum-card-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; max-width: none; }

.museum-card-body { padding: 14px; display: flex; flex-direction: column; flex: 1 1 auto; }
.museum-card-body h3 { margin: 0 0 4px; font-size: 16px; line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.museum-card-city { font-size: 12px; color: #888; }
.museum-card-body p { font-size: 13px; color: #555; margin: 8px 0 0;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

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

.museum-archive-subhead { font-size: 20px; margin: 26px 0 4px; }

/* Browse tiles on the homepage. Replaces the hand-written inline-styled
   markup that hardcoded four types, six cities and absolute localhost URLs. */
.museum-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; margin: 22px 0; }
.museum-tile { display: flex; flex-direction: column; justify-content: flex-end; min-height: 104px;
    padding: 16px 18px; border-radius: 8px; color: #fff; text-decoration: none;
    transition: transform .12s ease, box-shadow .12s ease; }
.museum-tile:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 6px 18px rgba(11,61,46,.18); }
.museum-tile-label { font-size: 17px; font-weight: 600; line-height: 1.25; }
.museum-tile-count { font-size: 12px; opacity: .82; margin-top: 4px; }
.museum-tile-a { background: #0b3d2e; }
.museum-tile-b { background: #23d3d3; }
.museum-tile-c { background: #0e5c47; }
.museum-tile-d { background: #1a8f77; }

.museum-native-name { margin: -4px 0 10px; font-size: 15px; color: #888; }

/* Section headings promoted from h3 to h2 (they are page sections, not
   subsections of "Planning your visit"); keep the visual weight they had. */
.museum-section-heading, .museum-gyg-activities-heading { font-size: 18px; margin: 0 0 12px; }

.museum-see-also { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 6px; }

/* ---- Footer -------------------------------------------------------------
   The inherited Elementor footer zeroes column padding, so the brand column's
   text ran flush into the "Explore" heading with no gutter at all. Spacing is
   added here rather than in the Elementor data so the template stays editable
   in the builder. Gutters only above the stacking breakpoint - once the
   columns stack on mobile a right padding just shifts everything left. */
@media (min-width: 768px) {
    .site-footer .elementor-column { padding-right: 40px; }
    .site-footer .elementor-column:last-child { padding-right: 0; }
}
/* The tagline reads better short than filling a 527px column. Targeted as the
   text widget that follows the logo image, not as the column's first
   text-editor: the copyright sits in its own section whose only column is also
   :first-child, and a max-width there squashed the centered line. */
.site-footer .elementor-widget-image + .elementor-widget-text-editor { max-width: 380px; }
.site-footer .elementor-widget-heading { margin-bottom: 4px; }

/* Booking FAQ. <details> rather than JS accordions: it is open to find-in-page
   and to crawlers with no script, which is the point of having it. */
.museum-faq { margin: 28px 0 8px; }
.museum-faq-item { border-bottom: 1px solid #eee; padding: 12px 0; }
.museum-faq-item summary { cursor: pointer; font-size: 15px; font-weight: 500; list-style: none; }
.museum-faq-item summary::-webkit-details-marker { display: none; }
.museum-faq-item summary::after { content: '+'; float: right; color: #23d3d3; font-size: 18px; line-height: 1; }
.museum-faq-item[open] summary::after { content: '\2212'; }
.museum-faq-item p { margin: 10px 0 2px; font-size: 14px; color: #555; line-height: 1.6; }
.museum-gyg-heading { font-size: 18px; margin: 0 0 12px; }

/* Pagination. The markup WordPress emits already flags the current page
   (`<span class="page-numbers current" aria-current="page">`), but nothing
   styled it, so every number looked identical and there was no way to tell
   where you were. Links and the current marker are different elements, so
   both get the same box and only the state differs. */
.museum-pagination { display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
    justify-content: center; margin: 32px 0 8px; }
.museum-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center;
    min-width: 40px; height: 40px; padding: 0 12px; border: 1px solid #e6e6e6; border-radius: 8px;
    background: #fff; color: #2b2b2b; text-decoration: none; font-size: 15px; line-height: 1;
    transition: border-color .15s, background .15s, color .15s; }
.museum-pagination a.page-numbers:hover { border-color: #23d3d3; color: #0f8c8c; }
.museum-pagination .page-numbers.current { background: #23d3d3; border-color: #23d3d3; color: #fff;
    font-weight: 600; cursor: default; }
.museum-pagination .page-numbers.dots { border-color: transparent; background: transparent; color: #9a9a9a;
    min-width: 24px; padding: 0 4px; }
.museum-pagination .page-numbers.prev,
.museum-pagination .page-numbers.next { font-weight: 500; }

@media (max-width: 600px) {
    .museum-pagination .page-numbers { min-width: 34px; height: 34px; padding: 0 8px; font-size: 14px; }
}