/*
 Theme Name:   Wisata - GeneratePress Child
 Theme URI:    https://generatepress.com
 Description:  Tema blog wisata modern untuk GeneratePress. Tampilan photo-first dengan palet biru laut & sunset, kartu destinasi, hero pencarian, popular & related post, badge kategori berwarna, reading time, dan carousel.
 Author:       Wisata Theme
 Template:     generatepress
 Version:      1.0
 Text Domain:  wisata
*/

/* =========================================================
   1. DESIGN TOKENS (Palet Biru Laut + Sunset)
   ========================================================= */
:root {
    --ocean:        #0C7C92;  /* biru laut utama */
    --ocean-dark:   #075E70;
    --ocean-light:  #E6F4F6;
    --sunset:       #FF7A45;  /* aksen oranye sunset */
    --sunset-dark:  #F2622B;
    --sunset-light: #FFE7DC;
    --sand:         #FFFBF7;  /* latar hangat lembut */
    --ink:          #15303A;  /* teks utama */
    --muted:        #5C7682;  /* teks sekunder */
    --line:         #E8EDEF;  /* garis/border */
    --white:        #FFFFFF;

    --radius:       16px;
    --radius-sm:    10px;
    --radius-pill:  999px;
    --shadow-sm:    0 2px 8px rgba(21,48,58,.06);
    --shadow:       0 10px 30px rgba(21,48,58,.10);
    --shadow-lg:    0 20px 50px rgba(21,48,58,.16);
    --ease:         cubic-bezier(.22,.61,.36,1);

    --font-head:    'Plus Jakarta Sans', 'Poppins', system-ui, sans-serif;
    --font-body:    'Inter', system-ui, -apple-system, sans-serif;
}

/* =========================================================
   2. BASE
   ========================================================= */
body {
    font-family: var(--font-body);
    color: var(--ink);
    background: var(--sand);
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6,
.entry-title, .widget-title {
    font-family: var(--font-head);
    color: var(--ink);
    letter-spacing: -.01em;
    line-height: 1.25;
}
a { color: var(--ocean); transition: color .2s var(--ease); }
a:hover { color: var(--sunset); }
img { border-radius: var(--radius-sm); }
.entry-content img { border-radius: var(--radius); }

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

/* =========================================================
   3. HEADER (sticky transparan -> solid saat scroll)
   ========================================================= */
.site-header {
    border-bottom: 1px solid var(--line);
    transition: background .3s var(--ease), box-shadow .3s var(--ease);
}
.site-header.is-stuck {
    box-shadow: var(--shadow-sm);
    background: rgba(255,255,255,.92);
    backdrop-filter: saturate(180%) blur(10px);
}
.inside-header { position: relative; flex-direction: row !important; }

.main-navigation .main-nav ul li a {
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 15px;
}
.main-navigation a:hover,
.main-navigation .current-menu-item > a {
    color: var(--ocean);
}

/* Tombol di header (mis. tombol "Eksplor") */
.wisata-header-cta a {
    background: var(--sunset);
    color: #fff !important;
    padding: 10px 20px;
    border-radius: var(--radius-pill);
    font-weight: 700;
    box-shadow: var(--shadow-sm);
    transition: transform .2s var(--ease), background .2s var(--ease);
}
.wisata-header-cta a:hover { background: var(--sunset-dark); transform: translateY(-2px); }

/* =========================================================
   4. HERO + SEARCH
   ========================================================= */
.wisata-hero {
    position: relative;
    min-height: 480px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 50px;
    background: linear-gradient(120deg, var(--ocean-dark), var(--ocean));
}
.wisata-hero__bg {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    transform: scale(1.05);
}
.wisata-hero::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(7,94,112,.25), rgba(7,94,112,.72));
}
.wisata-hero__inner { position: relative; z-index: 2; max-width: 760px; padding: 40px 24px; }
.wisata-hero__eyebrow {
    display: inline-block;
    background: rgba(255,255,255,.16);
    border: 1px solid rgba(255,255,255,.3);
    padding: 6px 16px; border-radius: var(--radius-pill);
    font-size: 13px; font-weight: 600; letter-spacing: .04em;
    text-transform: uppercase; margin-bottom: 18px;
}
.wisata-hero h1 {
    color: #fff; font-size: clamp(2rem, 5vw, 3.4rem);
    font-weight: 800; margin: 0 0 14px;
}
.wisata-hero p { font-size: 1.1rem; opacity: .92; margin-bottom: 28px; }

.wisata-search {
    display: flex; gap: 8px;
    background: #fff; padding: 8px;
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-lg);
    max-width: 540px; margin: 0 auto;
}
.wisata-search input[type="search"],
.wisata-search input[type="text"] {
    flex: 1; border: 0; background: transparent;
    padding: 12px 20px; font-size: 16px; color: var(--ink);
    outline: none;
}
.wisata-search button {
    background: var(--sunset); color: #fff; border: 0;
    padding: 12px 28px; border-radius: var(--radius-pill);
    font-weight: 700; font-family: var(--font-head); cursor: pointer;
    transition: background .2s var(--ease), transform .2s var(--ease);
}
.wisata-search button:hover { background: var(--sunset-dark); transform: translateY(-1px); }

/* =========================================================
   5. KARTU DESTINASI / POST
   ========================================================= */
.wisata-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 28px;
}
.wisata-card {
    background: #fff;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform .3s var(--ease), box-shadow .3s var(--ease);
    display: flex; flex-direction: column;
}
.wisata-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.wisata-card__media {
    position: relative; aspect-ratio: 16/10; overflow: hidden;
}
.wisata-card__media img {
    width: 100%; height: 100%; object-fit: cover;
    border-radius: 0;
    transition: transform .6s var(--ease);
}
.wisata-card:hover .wisata-card__media img { transform: scale(1.08); }
.wisata-card__body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.wisata-card__title { font-size: 1.2rem; font-weight: 700; margin: 0; line-height: 1.35; }
.wisata-card__title a { color: var(--ink); }
.wisata-card__title a:hover { color: var(--ocean); }
.wisata-card__excerpt { color: var(--muted); font-size: .94rem; margin: 0; }
.wisata-card__meta {
    display: flex; align-items: center; gap: 14px;
    margin-top: auto; padding-top: 12px;
    font-size: .82rem; color: var(--muted);
    border-top: 1px solid var(--line);
}
.wisata-card__meta svg { width: 15px; height: 15px; vertical-align: -2px; opacity: .7; }

/* Default GeneratePress article cards juga dapat sentuhan ini */
.generate-columns .inside-article,
article.post .inside-article {
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.generate-columns:hover .inside-article {
    transform: translateY(-6px); box-shadow: var(--shadow);
}

/* =========================================================
   6. BADGE KATEGORI BERWARNA
   ========================================================= */
.wisata-badge {
    position: absolute; top: 14px; left: 14px; z-index: 3;
    background: var(--ocean); color: #fff;
    padding: 5px 14px; border-radius: var(--radius-pill);
    font-family: var(--font-head); font-weight: 700;
    font-size: 12px; letter-spacing: .02em;
    box-shadow: var(--shadow-sm); text-transform: capitalize;
}
.wisata-badge:hover { color: #fff; opacity: .92; }
/* Warna per kategori (tambahkan slug Anda) */
.wisata-badge.cat-pantai   { background: #0EA5C4; }
.wisata-badge.cat-gunung   { background: #2F855A; }
.wisata-badge.cat-kuliner  { background: var(--sunset); }
.wisata-badge.cat-budaya   { background: #8B5CF6; }
.wisata-badge.cat-kota     { background: #475569; }
.wisata-badge.cat-tips     { background: #D97706; }

/* Inline badge (mis. di meta) */
.wisata-tag {
    display: inline-block; background: var(--ocean-light); color: var(--ocean-dark);
    padding: 4px 12px; border-radius: var(--radius-pill);
    font-size: 12px; font-weight: 600;
}

/* =========================================================
   7. META POST (reading time, lokasi, tanggal)
   ========================================================= */
.wisata-postmeta {
    display: flex; flex-wrap: wrap; align-items: center; gap: 16px;
    color: var(--muted); font-size: .9rem; margin: 8px 0 20px;
}
.wisata-postmeta .item { display: inline-flex; align-items: center; gap: 6px; }
.wisata-postmeta svg { width: 16px; height: 16px; opacity: .75; }
.wisata-reading-time { color: var(--sunset-dark); font-weight: 600; }

/* =========================================================
   8. SECTION HEADING
   ========================================================= */
.wisata-section { margin: 56px 0; }
.wisata-section__head {
    display: flex; align-items: flex-end; justify-content: space-between;
    margin-bottom: 26px; gap: 16px; flex-wrap: wrap;
}
.wisata-section__title { font-size: 1.7rem; font-weight: 800; margin: 0; }
.wisata-section__title small {
    display: block; color: var(--muted); font-weight: 500;
    font-size: .9rem; margin-top: 4px; font-family: var(--font-body);
}
.wisata-section__link {
    font-weight: 700; font-family: var(--font-head);
    display: inline-flex; align-items: center; gap: 6px;
}
.wisata-section__link:hover { gap: 10px; }

/* =========================================================
   9. CAROUSEL (Owl) — panah & dots
   ========================================================= */
.owl-carousel .owl-nav button.owl-prev,
.owl-carousel .owl-nav button.owl-next {
    width: 46px; height: 46px; border-radius: 50%;
    background: #fff !important; color: var(--ocean) !important;
    box-shadow: var(--shadow); font-size: 20px !important;
    position: absolute; top: 38%; display: grid; place-items: center;
    transition: background .2s var(--ease), color .2s var(--ease);
}
.owl-carousel .owl-nav button:hover { background: var(--sunset) !important; color: #fff !important; }
.owl-carousel .owl-nav .owl-prev { left: -14px; }
.owl-carousel .owl-nav .owl-next { right: -14px; }
.owl-carousel .owl-dots { margin-top: 22px; text-align: center; }
.owl-carousel .owl-dots .owl-dot span {
    width: 9px; height: 9px; background: var(--line); margin: 4px;
    transition: all .2s var(--ease);
}
.owl-carousel .owl-dots .owl-dot.active span { background: var(--sunset); width: 26px; border-radius: 6px; }

/* =========================================================
   10. CATEGORY FILTER PILLS
   ========================================================= */
.wisata-filter { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 30px; }
.wisata-filter a {
    background: #fff; border: 1px solid var(--line);
    color: var(--ink); padding: 9px 20px; border-radius: var(--radius-pill);
    font-family: var(--font-head); font-weight: 600; font-size: 14px;
    box-shadow: var(--shadow-sm);
    transition: all .2s var(--ease);
}
.wisata-filter a:hover, .wisata-filter a.active {
    background: var(--ocean); color: #fff; border-color: var(--ocean);
    transform: translateY(-2px);
}

/* =========================================================
   11. BREADCRUMB
   ========================================================= */
.wisata-breadcrumb {
    font-size: .85rem; color: var(--muted); margin-bottom: 16px;
    display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
}
.wisata-breadcrumb a { color: var(--muted); font-weight: 600; }
.wisata-breadcrumb a:hover { color: var(--ocean); }
.wisata-breadcrumb .sep { opacity: .5; }

/* =========================================================
   12. CTA / NEWSLETTER BOX
   ========================================================= */
.wisata-cta {
    background: linear-gradient(120deg, var(--ocean-dark), var(--ocean));
    color: #fff; border-radius: var(--radius);
    padding: 44px 40px; text-align: center;
    box-shadow: var(--shadow); position: relative; overflow: hidden;
    margin: 50px 0;
}
.wisata-cta::before {
    content: ""; position: absolute; right: -60px; top: -60px;
    width: 200px; height: 200px; border-radius: 50%;
    background: rgba(255,122,69,.25);
}
.wisata-cta h3 { color: #fff; font-size: 1.6rem; margin: 0 0 8px; position: relative; }
.wisata-cta p { opacity: .9; margin: 0 0 22px; position: relative; }
.wisata-cta form { display: flex; gap: 10px; max-width: 460px; margin: 0 auto; position: relative; }
.wisata-cta input {
    flex: 1; border: 0; border-radius: var(--radius-pill);
    padding: 14px 22px; font-size: 15px;
}
.wisata-cta button {
    background: var(--sunset); color: #fff; border: 0;
    padding: 14px 30px; border-radius: var(--radius-pill);
    font-weight: 700; font-family: var(--font-head); cursor: pointer;
    transition: background .2s var(--ease);
}
.wisata-cta button:hover { background: var(--sunset-dark); }

/* =========================================================
   13. SHARE BUTTONS (sticky)
   ========================================================= */
.wisata-share {
    display: flex; gap: 10px; align-items: center;
    margin: 28px 0; flex-wrap: wrap;
}
.wisata-share .label { font-weight: 700; font-family: var(--font-head); margin-right: 4px; }
.wisata-share a {
    width: 42px; height: 42px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--ocean-light); color: var(--ocean-dark);
    transition: all .2s var(--ease);
}
.wisata-share a:hover { background: var(--sunset); color: #fff; transform: translateY(-3px); }
.wisata-share a svg { width: 18px; height: 18px; }

/* =========================================================
   14. SINGLE POST POLISH
   ========================================================= */
.single .entry-title { font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 800; }
.entry-content { font-size: 1.05rem; line-height: 1.8; }
.entry-content h2 { margin-top: 1.8em; }
.entry-content blockquote {
    border-left: 4px solid var(--sunset);
    background: var(--sunset-light);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    padding: 18px 24px; color: var(--ink); font-style: italic;
}
.entry-content a { text-decoration: underline; text-underline-offset: 3px; }

/* Author box */
.wisata-author {
    display: flex; gap: 18px; align-items: center;
    background: #fff; border-radius: var(--radius);
    padding: 24px; box-shadow: var(--shadow-sm); margin: 36px 0;
}
.wisata-author img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; }
.wisata-author h4 { margin: 0 0 4px; }
.wisata-author p { margin: 0; color: var(--muted); font-size: .92rem; }

/* =========================================================
   15. BUTTONS
   ========================================================= */
.wisata-btn, .entry-content .wp-block-button__link {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--ocean); color: #fff !important;
    padding: 13px 28px; border-radius: var(--radius-pill);
    font-family: var(--font-head); font-weight: 700;
    box-shadow: var(--shadow-sm); text-decoration: none !important;
    transition: transform .2s var(--ease), background .2s var(--ease);
}
.wisata-btn:hover, .entry-content .wp-block-button__link:hover {
    background: var(--ocean-dark); transform: translateY(-2px); color: #fff !important;
}
.wisata-btn--sunset { background: var(--sunset); }
.wisata-btn--sunset:hover { background: var(--sunset-dark); }

/* =========================================================
   16. SIDEBAR / WIDGET
   ========================================================= */
.widget {
    background: #fff; border-radius: var(--radius);
    padding: 24px; box-shadow: var(--shadow-sm); margin-bottom: 26px;
}
.widget .widget-title {
    font-size: 1.1rem; font-weight: 800; margin-bottom: 16px;
    padding-bottom: 12px; border-bottom: 2px solid var(--ocean-light);
}
/* Popular list di widget */
.wisata-popular-list { list-style: none; margin: 0; padding: 0; }
.wisata-popular-list li { display: flex; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.wisata-popular-list li:last-child { border-bottom: 0; }
.wisata-popular-list img { width: 76px; height: 60px; object-fit: cover; border-radius: var(--radius-sm); flex-shrink: 0; }
.wisata-popular-list .title { font-family: var(--font-head); font-weight: 700; font-size: .95rem; line-height: 1.35; }
.wisata-popular-list .views { font-size: .8rem; color: var(--muted); margin-top: 4px; }

/* =========================================================
   17. FOOTER
   ========================================================= */
.site-footer, .site-info {
    background: var(--ink); color: rgba(255,255,255,.75);
}
.site-footer a, .site-info a { color: #fff; }
.site-footer a:hover { color: var(--sunset); }

/* =========================================================
   18. PAGINATION
   ========================================================= */
.generate-columns + .paging-navigation a,
.nav-links a, .page-numbers {
    border-radius: var(--radius-pill) !important;
}
.page-numbers.current {
    background: var(--ocean) !important; color: #fff !important;
}

/* =========================================================
   19. SEARCH-ONLY-POST (warisan gpblogpro)
   ========================================================= */
a.search-icon { color: var(--ocean); }

/* =========================================================
   20. UTIL & ANIMATION
   ========================================================= */
.wisata-fade-up { opacity: 0; transform: translateY(20px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.wisata-fade-up.is-visible { opacity: 1; transform: none; }

/* =========================================================
   21. RESPONSIVE
   ========================================================= */
@media (max-width: 768px) {
    .wisata-hero { min-height: 400px; margin-bottom: 36px; }
    .wisata-search { flex-direction: column; border-radius: var(--radius); }
    .wisata-search button { border-radius: var(--radius); }
    .wisata-grid { grid-template-columns: 1fr; gap: 20px; }
    .wisata-cta { padding: 32px 22px; }
    .wisata-cta form { flex-direction: column; }
    .owl-carousel .owl-nav .owl-prev { left: 4px; }
    .owl-carousel .owl-nav .owl-next { right: 4px; }
}