/*
Theme Name: Ferdip Pink
Theme URI: https://ferdip.org/
Author: Aldian Fauzanihirman
Author URI: https://ferdip.org/
Description: Tema blog pribadi Ferdip.org: pink modern, clean, cepat, responsif. Homepage dengan slider, featured posts, latest, sidebar kategori & popular.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ferdip-pink
Tags: blog, news, food-and-drink, one-column, two-columns, right-sidebar, custom-menu, featured-images, sticky-post
*/

:root{
  --ferdip-bg: #fff7fb;
  --ferdip-card: #ffffff;
  --ferdip-text: #241524;
  --ferdip-muted: #6b5a67;
  --ferdip-border: rgba(255,105,180,.22);
  --ferdip-pink: #ff69b4;
  --ferdip-pink-2: #ffc0cb;
  --ferdip-shadow: 0 18px 38px rgba(36,21,36,.08), 0 3px 10px rgba(36,21,36,.06);
  --ferdip-radius-xl: 28px;
  --ferdip-radius-lg: 22px;
  --ferdip-radius-md: 16px;
  --ferdip-max: 1180px;
  --ferdip-font-body: system-ui,-apple-system,"Segoe UI",Roboto,Arial,"Noto Sans","Liberation Sans",sans-serif;
  --ferdip-font-head: Georgia,"Times New Roman",Times,serif;
}

/* Fonts via functions.php (Google Fonts) */

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--ferdip-text);
  background: radial-gradient(circle at 0% 0%, rgba(255,105,180,.10), transparent 40%),
              radial-gradient(circle at 100% 0%, rgba(255,192,203,.18), transparent 40%),
              linear-gradient(180deg, #fff7fb, #ffffff);
  font-family: var(--ferdip-font-body);
  line-height: 1.6;
}
img{max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline;text-decoration-color: rgba(255,105,180,.55);text-underline-offset: 4px}

.ferdip-container{max-width:var(--ferdip-max);margin:0 auto;padding:0 16px}

/* Header */
.site-header{position:sticky;top:0;z-index:50;border-bottom:1px solid var(--ferdip-border);background:rgba(255,255,255,.86);backdrop-filter: blur(10px)}
.header-inner{display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:14px;padding:12px 0}
.brand{display:flex;align-items:center;gap:10px}
.brand-mark{width:40px;height:40px;border-radius:18px;background:linear-gradient(135deg,var(--ferdip-pink),#ff7cc0 55%, #ffd1dc);box-shadow: 0 10px 22px rgba(36,21,36,.10);display:grid;place-items:center;color:white;font-weight:900}
.brand-title{font-weight:900;letter-spacing:-.02em}
.brand-sub{font-size:12px;color:var(--ferdip-muted);margin-top:-2px}

.primary-nav{display:none;align-items:center;min-width:0}

/* Hard reset menu markup from WP */
.ferdip-menu{display:flex;gap:6px;align-items:center;margin:0;padding:0;list-style:none;flex-wrap:nowrap;min-width:0}
.ferdip-menu li{margin:0;padding:0;list-style:none}
.ferdip-menu a{display:inline-flex;align-items:center;white-space:nowrap}

/* Desktop nav: keep in one line; scroll if too long */
.primary-nav ul{overflow:auto;scrollbar-width:none}
.primary-nav ul::-webkit-scrollbar{display:none}
.primary-nav a{display:inline-flex;align-items:center;padding:8px 12px;border-radius:999px;font-weight:700;font-size:14px;color: rgba(36,21,36,.84);white-space:nowrap}
.primary-nav a:hover{background: rgba(255,192,203,.22);text-decoration:none}
.primary-nav .current-menu-item > a,
.primary-nav .current_page_item > a{background: var(--ferdip-pink);color:white}

.header-cta{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.search-form{display:none;position:relative}
.search-form input[type="search"]{height:40px;border-radius:999px;border:1px solid var(--ferdip-border);padding:0 14px 0 14px;background:#fff;min-width:260px}

.btn-pill{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;padding:10px 14px;border:1px solid var(--ferdip-border);background: rgba(255,192,203,.20);font-weight:800;font-size:13px}
.btn-pill:hover{text-decoration:none;border-color: rgba(255,105,180,.55)}

.mobile-nav{display:block;padding:0 0 12px 0}

/* Collapsible panel (shown via JS toggle) */
.mobile-nav[hidden]{display:none !important}
.mobile-nav{
  border-top:1px solid var(--ferdip-border);
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  padding-top: 2px;
}

/* Mobile menu: wrap nicely, no overflow offscreen */
.mobile-nav ul{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:10px 0 0 0;padding:0 0 6px 0;list-style:none}
.mobile-nav li{margin:0;padding:0}
.mobile-nav a{display:inline-flex;border:1px solid var(--ferdip-border);background:#fff;border-radius:999px;padding:10px 12px;font-weight:900;font-size:13px;white-space:nowrap}
.mobile-nav .current-menu-item > a,
.mobile-nav .current_page_item > a{border-color: rgba(255,105,180,.8);color: var(--ferdip-pink)}

/* Hero */
.hero{border-bottom:1px solid var(--ferdip-border);padding:26px 0 22px 0}
.hero-grid{display:grid;gap:18px}
.sticker{display:inline-flex;align-items:center;gap:8px;border-radius:999px;border:1px solid var(--ferdip-border);background:#fff;padding:6px 10px;font-weight:900;font-size:12px;box-shadow: 0 10px 22px rgba(36,21,36,.06)}
.hero h1{font-family: var(--ferdip-font-head);font-weight:900;letter-spacing:-.03em;line-height:1.06;margin:12px 0 0 0;font-size:clamp(30px, 6vw, 56px)}
.hero h1 .pink{color: var(--ferdip-pink)}
.hero p{margin:10px 0 0 0;color: var(--ferdip-muted);max-width: 56ch}

.category-box{border:1px solid var(--ferdip-border);background:var(--ferdip-card);border-radius: var(--ferdip-radius-xl);box-shadow: var(--ferdip-shadow);padding:16px}
.category-box h3{margin:0 0 10px 0;font-size:14px;font-weight:900}
.cat-item{display:block;border:1px solid var(--ferdip-border);background:#fff;border-radius: var(--ferdip-radius-lg);padding:12px;margin-top:10px}
.cat-item .t{font-weight:900;line-height:1.2}
.cat-item .d{font-size:13px;color: var(--ferdip-muted);margin-top:4px;line-height:1.35}

/* Slider */
.slider{margin-top:18px;border:1px solid var(--ferdip-border);border-radius: 32px;background: #fff;box-shadow: var(--ferdip-shadow);overflow:hidden;position:relative}
.slide{display:none}
.slide.is-active{display:block}
.slide-inner{display:grid}
.slide-media{position:relative;aspect-ratio: 16/10;overflow:hidden}
.slide-media img{width:100%;height:100%;object-fit:cover}
.slide-media:after{content:"";position:absolute;inset:0;background: linear-gradient(45deg, rgba(0,0,0,.24), transparent 55%)}
.slide-content{padding:16px}
.badge{display:inline-block;background:#c2185b;color:#fff;border:1px solid rgba(0,0,0,.08);border-radius:999px;font-weight:900;font-size:12px;padding:6px 10px}
.slide-content h2{font-family: var(--ferdip-font-head);font-weight:900;letter-spacing:-.02em;margin:10px 0 0 0;font-size:22px;line-height:1.15}
.slide-content p{margin:8px 0 0 0;color: var(--ferdip-muted)}
.slide-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.btn-primary{background: var(--ferdip-pink);color:white;border:0;border-radius:999px;font-weight:900;padding:11px 14px;display:inline-flex;align-items:center}
.btn-secondary{background: rgba(255,192,203,.22);border:1px solid var(--ferdip-border);border-radius:999px;font-weight:900;padding:11px 14px;display:inline-flex;align-items:center}

.slider-nav{position:absolute;top:12px;right:12px;bottom:auto;left:auto;display:flex;gap:8px;z-index:3}
.slider-nav button{width:40px;height:40px;border-radius:999px;border:1px solid var(--ferdip-border);background: rgba(255,255,255,.90);font-weight:900;cursor:pointer}

/* Mobile: nav controls should NOT overlay content/buttons */
@media(max-width: 899px){
  .slider-nav{position:static;justify-content:flex-end;padding:10px 12px;border-top:1px solid var(--ferdip-border);background:rgba(255,255,255,.92)}
}

/* Main sections */
.section{padding:26px 0}
.section-head{display:flex;flex-wrap:wrap;gap:12px;align-items:end;justify-content:space-between}
.section-head h2{margin:0;font-family: var(--ferdip-font-head);font-weight:900;letter-spacing:-.02em}
.section-head p{margin:6px 0 0 0;color: var(--ferdip-muted);font-size:14px}

.grid{display:grid;gap:18px}
.grid-2{grid-template-columns:1fr}
.grid-3{grid-template-columns:1fr}

.card{border:1px solid var(--ferdip-border);background:#fff;border-radius: var(--ferdip-radius-xl);box-shadow: var(--ferdip-shadow);overflow:hidden}
.card-body{padding:16px}
.card-title{font-family: var(--ferdip-font-head);font-weight:900;letter-spacing:-.01em;margin:0;font-size:18px;line-height:1.2}
.card-excerpt{margin:8px 0 0 0;color: var(--ferdip-muted);font-size:14px}
.card-meta{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;align-items:center;margin-top:14px;font-size:12px;color: var(--ferdip-muted)}
.tag{background: rgba(255,192,203,.22);border:1px solid var(--ferdip-border);border-radius:999px;padding:5px 9px;font-weight:900;color: rgba(36,21,36,.85)}

/* Sidebar */
.sidebar .box{padding:16px}
.box-title{font-weight:900;margin:0 0 12px 0;font-size:14px}
.pill{display:inline-block;border:1px solid var(--ferdip-border);background:#fff;border-radius:999px;padding:8px 10px;font-weight:900;font-size:12px;margin:4px 6px 0 0}
.pill:hover{text-decoration:none;border-color: rgba(255,105,180,.55)}
.side-link{display:block;border:1px solid var(--ferdip-border);background:#fff;border-radius: var(--ferdip-radius-lg);padding:10px 12px;margin-top:10px}
.side-link .t{font-weight:900;font-size:13px;line-height:1.25}
.side-link .s{font-size:12px;color: var(--ferdip-muted);margin-top:4px}

/* Single */
.single-hero{margin-top:18px}
.post-title{font-family: var(--ferdip-font-head);font-weight:900;letter-spacing:-.03em;line-height:1.08;margin:16px 0 0 0;font-size:clamp(28px, 5.6vw, 48px)}
.post-meta{margin-top:10px;color: var(--ferdip-muted);font-size:14px;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.post-cover{margin-top:16px;border:1px solid var(--ferdip-border);border-radius: 32px;overflow:hidden;box-shadow: var(--ferdip-shadow)}
.post-cover img{width:100%;height:auto;display:block}
.entry{margin-top:16px}
.entry .content{padding:18px}
.entry .content h2,.entry .content h3{font-family: var(--ferdip-font-head);letter-spacing:-.01em}
.entry .content a{color: var(--ferdip-pink);font-weight:800}

.related{margin-top:22px}

/* Footer */
.site-footer{margin-top:34px;border-top:1px solid var(--ferdip-border);background:#fff}
.footer-inner{padding:26px 0}
.footer-grid{display:grid;gap:18px}
.footer-grid > div{min-width:0}
.footer-grid h4{margin:0 0 10px 0;font-size:14px;font-weight:900}
.footer-grid p{margin:0;color: var(--ferdip-muted);font-size:14px}
.footer-bottom{margin-top:18px;padding-top:18px;border-top:1px solid var(--ferdip-border);display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;color: var(--ferdip-muted);font-size:12px}

/* Footer menu ul/li */
.footer-menu{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.footer-menu li{margin:0;padding:0}
.footer-menu a{display:inline-block}

/* WP blocks */
.wp-block-image img{border-radius: 18px}
.wp-block-quote{border-left:4px solid var(--ferdip-pink);padding-left:14px;color: var(--ferdip-muted)}

/* Responsive */
@media(min-width: 900px){
  .primary-nav{display:flex}
  .mobile-nav{display:none}
  .hero-grid{grid-template-columns: 1.2fr .8fr;align-items:end}
  .slide-inner{grid-template-columns: 1.05fr .95fr}
  .slide-media{aspect-ratio:auto;min-height:360px}
  .slide-content{padding:22px}
  .grid-2{grid-template-columns: 1fr 360px}
  .grid-3{grid-template-columns: repeat(3,1fr)}
  .grid.cards-2{grid-template-columns: repeat(2,1fr)}
  .footer-grid{grid-template-columns: 1.2fr 1fr}
  .hero h1{font-size:56px}
  .post-title{font-size:48px}
}

@media(min-width: 1024px){
  .search-form{display:block}
}

/* Toggle button: visible on mobile/tablet, hidden on desktop */
.menu-toggle{
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:40px;
}
@media(min-width: 900px){
  .menu-toggle{display:none}
}

/* Make sure header doesn't overflow on small screens */
.brand{min-width:0}
.brand-title{white-space:nowrap}
.brand-sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:42vw}
@media(min-width: 560px){
  .brand-sub{max-width:none}
}

/* Tablet improvements (cards + grids) */
@media(min-width: 640px){
  .grid.cards-2{grid-template-columns: repeat(2,1fr)}
  .grid-3{grid-template-columns: repeat(2,1fr)}
}
@media(min-width: 1024px){
  .grid-3{grid-template-columns: repeat(3,1fr)}
}






/* Item kategori di dalamnya biar tetap enak dibaca */
/* Category box: transparan + stroke pink */
.category-box{
  background: transparent !important;
  border: 2px solid var(--ferdip-pink) !important;
  border-radius: 16px;
}

/* Sidebar box (Kategori populer / Popular / Terbaru): transparan + stroke pink */
.sidebar .card.sidebar{
  background: transparent !important;
  border: 2px solid var(--ferdip-pink) !important;
  border-radius: 16px;
  box-shadow: none !important;
}

/* Biar isi box nggak punya background lain */
.sidebar .card.sidebar .box{
  background: transparent !important;
}

/* Tombol kategori populer (#kategori) ikut transparan + stroke pink */
.sidebar .card.sidebar a.pill{
  background: transparent !important;
  border: 1px solid var(--ferdip-pink) !important;
}

/* Kasih jarak antar box sidebar */
.sidebar .card.sidebar{
  margin-bottom: 16px;
}

/* Hilangkan margin di box terakhir biar rapi */
.sidebar .card.sidebar:last-child{
  margin-bottom: 0;
}

/* Hover efek untuk box sidebar */
.sidebar .card.sidebar{
  transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.sidebar .card.sidebar:hover{
  background: rgba(255,105,180,.06) !important; /* pink tipis */
  border-color: var(--ferdip-pink) !important;
  box-shadow: 0 10px 22px rgba(255,105,180,.18) !important;
  transform: translateY(-2px);
}




.site-footer .footer-brandbox{
  background: transparent !important;
  border: 2px solid var(--ferdip-pink) !important;
  border-radius: 16px;
  padding: 16px;
}







/* Panel menu mobile: transparan */
.mobile-nav{
  background: transparent !important;
  backdrop-filter: none !important;
  border-top: 1px solid rgba(255,105,180,.25) !important;
}

/* Semua link menu mobile: transparan + teks jelas */
.mobile-nav a{
  background: transparent !important;
  border: 1px solid rgba(255,105,180,.45) !important;
  color: rgba(36,21,36,.92) !important;  /* teks tetap kelihatan */
  text-decoration: none !important;
}

/* Biar item aktif juga tetap rata (tidak beda warna) */
.mobile-nav .current-menu-item > a,
.mobile-nav .current_page_item > a{
  background: transparent !important;
  border-color: rgba(255,105,180,.9) !important;
  color: rgba(36,21,36,.95) !important;
}

/* Optional: hover tipis (desktop aja) */
.mobile-nav a:hover{
  background: rgba(255,105,180,.06) !important;
}


/* Brand logo responsive */
.brand{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.custom-logo-link{
  display: inline-flex;
  align-items: center;
  line-height: 0;
  flex-shrink: 0;
}

.custom-logo{
  height: clamp(34px, 4.5vw, 52px);
  width: auto;
  display: block;
}

/* Sembunyikan teks tapi tetap terbaca SEO + screen reader */
.brand-seo{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.custom-logo{
  height: clamp(44px, 6vw, 80px);
  width: auto;
  display: block;
}



.brand{
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  min-width: 0;
  max-width: 42%;            /* supaya aman gak nabrak tombol kanan */
}

.brand-stack{
  display: flex;
  flex-direction: column;
  align-items: flex-start;   /* kiri */
  gap: 4px;
  min-width: 0;
}

.custom-logo-link{
  display: inline-flex;
  align-items: center;
  line-height: 0;
}

.custom-logo{
  height: clamp(46px, 6vw, 80px);
  width: auto;
  display: block;
}

.brand-slogan{
  font-size: clamp(10.5px, 1.2vw, 12px);
  font-weight: 700;
  line-height: 1.1;
  color: var(--ferdip-pink);

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}





/* ===== FIX HEADER LOGO + SLOGAN (NO DUPLICATE) ===== */

/* Bikin logo + slogan bertumpuk (atas-bawah) */
.site-header .brand{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
  max-width: 35%; /* kalau masih nabrak tombol kanan, kecilkan: 32% / 30% */
}

.site-header .brand-stack{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
}

/* Ukuran logo responsif */
.site-header .custom-logo-link{
  display: block;
  line-height: 0;
}

.site-header .custom-logo{
  display: block;
  height: clamp(46px, 6vw, 80px);
  width: auto;
}

/* Slogan kecil tapi kebaca (1 baris) */
.site-header .brand-slogan{
  display: block;
  font-size: clamp(10.5px, 1.2vw, 12px);
  font-weight: 800;
  line-height: 1.1;
  color: var(--ferdip-pink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Nama situs tetap ada di HTML, tapi tidak tampil */
.site-header .brand-seo{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}