/*
Theme Name: YBK Dossier
Theme URI: https://indonesiayachtbroker.com/
Author: Indonesia Yacht Broker Editorial Desk
Description: Bespoke brokerage-desk theme for indonesiayachtbroker.com. Dossier layout: file-reference masthead, sticky desk rail, journal entries and index-card archives. Self-hosted typography, no external assets, no tracking.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
Text Domain: ybk-dossier
Tags: custom-menu, featured-images, translation-ready
*/

/* ============================================================
   1. Self-hosted typography (no CDN, no Google Fonts)
   ============================================================ */
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;
  src:url('/wp-content/uploads/ybk-assets/instrument-serif-400.woff2') format('woff2');}
@font-face{font-family:'Schibsted Grotesk';font-style:normal;font-weight:300 800;font-display:swap;
  src:url('/wp-content/uploads/ybk-assets/schibsted-grotesk-var.woff2') format('woff2-variations'),
      url('/wp-content/uploads/ybk-assets/schibsted-grotesk-var.woff2') format('woff2');}
@font-face{font-family:'Spline Sans Mono';font-style:normal;font-weight:300 700;font-display:swap;
  src:url('/wp-content/uploads/ybk-assets/spline-sans-mono-var.woff2') format('woff2-variations'),
      url('/wp-content/uploads/ybk-assets/spline-sans-mono-var.woff2') format('woff2');}

/* ============================================================
   2. Palette — the Deal Dossier system already set on the front page:
      plum ink, vermillion seal, porcelain paper.
      Doubled :root:root so this wins over the mu-plugin content palette
      regardless of stylesheet order.
   ============================================================ */
:root:root{
  --ybk-ink:#2B2233;
  --ybk-ink-2:#5C5564;
  --ybk-deep:#3A2F47;
  --ybk-deeper:#221A2B;
  --ybk-accent:#C9402A;
  --ybk-accent-d:#A63421;
  --ybk-accent-l:#E5A093;
  --ybk-wash:#F7F6F2;
  --ybk-paper:#FFFFFF;
  --ybk-line:#DFDCE4;
  --ybk-line-2:#CFC9D6;

  /* Content layer inherited by the mu-plugin article styles: same system, so
     an article body and the desk chrome around it read as one brand. */
  --iyb-ink:#2B2233;
  --iyb-ink-2:#5C5564;
  --iyb-line:#DFDCE4;
  --iyb-accent:#A63421;
  --iyb-accent-2:#C9402A;
  --iyb-wash:#F7F6F2;
  --iyb-warn:#8A5A1F;

  --ybk-sans:'Schibsted Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ybk-serif:'Instrument Serif',Georgia,'Times New Roman',serif;
  --ybk-mono:'Spline Sans Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;
}

/* ============================================================
   3. Base
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:hidden}
body{
  margin:0;background:var(--ybk-paper);color:var(--ybk-ink);
  font-family:var(--ybk-sans);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg,video{max-width:100%;height:auto}
a{color:var(--ybk-accent-d)}
a:hover{color:var(--ybk-accent)}
h1,h2,h3,h4{font-weight:600;letter-spacing:-.012em}
:focus-visible{outline:2px solid var(--ybk-accent-d);outline-offset:2px}

.ybk-skip{position:absolute;left:-9999px;top:0;background:var(--ybk-deep);color:#fff;padding:.7rem 1rem;z-index:1000}
.ybk-skip:focus{left:0}

.ybk-wrap{width:min(100% - 2.4rem,74rem);margin-inline:auto}
.ybk-eyebrow{
  font-family:var(--ybk-mono);font-size:.7rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ybk-accent-d);
}

/* ============================================================
   4. Header — ledger strip + sticky nav (z-index >= 900)
   ============================================================ */
.ybk-strip{background:var(--ybk-deeper);color:#A9A2B3}
.ybk-strip-in{
  display:flex;gap:1rem;align-items:center;justify-content:space-between;
  padding:.42rem 0;font-family:var(--ybk-mono);font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;
}
.ybk-strip a{color:#E5A093;text-decoration:none}
.ybk-strip a:hover{color:#fff}
.ybk-strip-note{opacity:.72}

.ybk-head{
  position:sticky;top:0;z-index:960;
  background:rgba(255,255,255,.94);backdrop-filter:saturate(150%) blur(9px);
  border-bottom:1px solid var(--ybk-line);
}
.ybk-head-in{display:flex;align-items:center;gap:1rem;min-height:64px}

.ybk-brand{display:flex;flex-direction:column;text-decoration:none;color:var(--ybk-ink);line-height:1.06;flex:0 0 auto}
.ybk-brand b{font-family:var(--ybk-serif);font-size:1.42rem;font-weight:400;letter-spacing:-.005em}
.ybk-brand span{font-family:var(--ybk-mono);font-size:.6rem;letter-spacing:.17em;text-transform:uppercase;color:var(--ybk-ink-2);margin-top:.16rem}

.ybk-nav-check{position:absolute;opacity:0;pointer-events:none;width:0;height:0}
.ybk-burger{display:none;margin-left:auto;width:44px;height:44px;border:1px solid var(--ybk-line-2);border-radius:5px;cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:4px;background:#fff}
.ybk-burger i{display:block;width:19px;height:1.6px;background:var(--ybk-ink)}

.ybk-nav{margin-left:auto}
.ybk-nav ul{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:.15rem;margin:0;padding:0}
.ybk-nav a{
  display:block;padding:.5rem .58rem;border-radius:5px;text-decoration:none;
  color:var(--ybk-ink);font-size:.845rem;font-weight:500;white-space:nowrap;
}
/* Desktop: the curated menu and the WhatsApp item are two separate lists -
   lay them out on one row so the CTA never drops to a second line. */
@media(min-width:1101px){
  .ybk-nav{display:flex;align-items:center;gap:.3rem}
  .ybk-nav ul{flex-wrap:nowrap}
}
.ybk-nav a:hover{background:var(--ybk-wash);color:var(--ybk-accent-d)}
.ybk-nav .current-menu-item>a,.ybk-nav .ybk-on>a{box-shadow:inset 0 -2px 0 var(--ybk-accent)}
.ybk-nav .ybk-wa>a{background:var(--ybk-deep);color:#fff}
.ybk-nav .ybk-wa>a:hover{background:var(--ybk-accent-d);color:#fff}
.ybk-nav ul ul{display:none}

/* ============================================================
   5. Masthead — the dossier cover block
   ============================================================ */
.ybk-mast{
  background:var(--ybk-deep);color:#F1EEF5;position:relative;overflow:hidden;
  border-bottom:3px solid var(--ybk-accent);
}
.ybk-mast::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:38px 100%;opacity:.5;
}
.ybk-mast-bg{position:absolute;inset:0;object-fit:cover;width:100%;height:100%;opacity:.2;filter:saturate(.6)}
.ybk-mast-in{position:relative;z-index:2;padding:2.9rem 0 2.4rem;max-width:52rem}
.ybk-mast .ybk-eyebrow{color:var(--ybk-accent-l)}
.ybk-mast h1{
  font-family:var(--ybk-serif);font-weight:400;letter-spacing:-.015em;
  font-size:clamp(2rem,1.35rem + 2.6vw,3.25rem);line-height:1.1;margin:.5rem 0 0;color:#fff;
}
.ybk-stand{margin:.85rem 0 0;font-size:1.06rem;line-height:1.6;color:#CFC9D6;max-width:44rem}

.ybk-rail{
  display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;margin-top:1.5rem;padding-top:1rem;
  border-top:1px solid rgba(255,255,255,.16);
  font-family:var(--ybk-mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:#A9A2B3;
}
.ybk-rail b{color:#E5A093;font-weight:500}

/* ============================================================
   6. Body grid — article + sticky desk rail
   ============================================================ */
.ybk-main{padding:2.6rem 0 3.4rem}
.ybk-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:2.6rem}
@media(min-width:1040px){
  .ybk-grid{grid-template-columns:minmax(0,1fr) 17.5rem;gap:3.2rem;align-items:start}
}
.entry-content{max-width:44rem}
.entry-content>*:first-child{margin-top:0}

.ybk-side{position:sticky;top:88px;display:flex;flex-direction:column;gap:1.4rem;font-size:.9rem}
@media(max-width:1039px){.ybk-side{position:static;top:auto}}

.ybk-card{border:1px solid var(--ybk-line);border-radius:8px;background:var(--ybk-wash);padding:1.1rem 1.2rem}
.ybk-card h2{font-size:.72rem;font-family:var(--ybk-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ybk-accent-d);margin:0 0 .7rem;font-weight:500}
.ybk-toc{list-style:none;margin:0;padding:0;counter-reset:toc}
.ybk-toc li{counter-increment:toc;margin:0 0 .5rem;padding-left:1.7rem;position:relative;line-height:1.4}
.ybk-toc li::before{content:counter(toc,decimal-leading-zero);position:absolute;left:0;top:.05rem;font-family:var(--ybk-mono);font-size:.68rem;color:var(--ybk-accent);letter-spacing:.04em}
.ybk-toc a{color:var(--ybk-ink);text-decoration:none;border-bottom:1px solid transparent}
.ybk-toc a:hover{color:var(--ybk-accent-d);border-bottom-color:var(--ybk-line-2)}

.ybk-desk{background:var(--ybk-deep);border-color:var(--ybk-deep);color:#EDE9F2}
.ybk-desk h2{color:var(--ybk-accent-l)}
.ybk-desk p{margin:0 0 .85rem;line-height:1.5;color:#CFC9D6;font-size:.88rem}
.ybk-desk .ybk-b{display:block;text-align:center;text-decoration:none;font-weight:600;font-size:.9rem;padding:.66rem 1rem;border-radius:6px;margin-bottom:.5rem}
.ybk-b-1{background:var(--ybk-accent);color:#fff}
.ybk-b-1:hover{background:var(--ybk-accent-d);color:#fff}
.ybk-b-2{border:1px solid rgba(255,255,255,.3);color:#F1EEF5}
.ybk-b-2:hover{border-color:var(--ybk-accent-l);color:#fff}
.ybk-desk small{display:block;font-family:var(--ybk-mono);font-size:.64rem;letter-spacing:.09em;text-transform:uppercase;color:#948CA1;margin-top:.3rem}
.ybk-desk-img{display:block;width:calc(100% + 2.4rem);margin:-1.1rem -1.2rem .95rem;border-radius:7px 7px 0 0;aspect-ratio:4/3;object-fit:cover;max-width:none}

/* ============================================================
   7. Journal index — index-card rows
   ============================================================ */
.ybk-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--ybk-line)}
.ybk-item{border-bottom:1px solid var(--ybk-line);padding:1.5rem 0}
.ybk-item-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:1rem}
@media(min-width:720px){.ybk-item-grid{grid-template-columns:8.5rem minmax(0,1fr);gap:1.6rem;align-items:start}}
.ybk-thumb{display:block;border-radius:6px;overflow:hidden;border:1px solid var(--ybk-line);background:var(--ybk-wash)}
.ybk-thumb img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.ybk-item h2{font-size:1.2rem;line-height:1.3;margin:.35rem 0 .45rem;font-family:var(--ybk-serif);font-weight:400;letter-spacing:-.005em}
.ybk-item h2 a{color:var(--ybk-ink);text-decoration:none}
.ybk-item h2 a:hover{color:var(--ybk-accent-d)}
.ybk-item p{margin:0;color:var(--ybk-ink-2);font-size:.95rem;line-height:1.55}
.ybk-meta{font-family:var(--ybk-mono);font-size:.66rem;letter-spacing:.11em;text-transform:uppercase;color:var(--ybk-ink-2)}
.ybk-meta a{color:var(--ybk-accent-d);text-decoration:none}

.ybk-pag{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:2rem}
.ybk-pag .page-numbers{display:inline-block;padding:.45rem .8rem;border:1px solid var(--ybk-line);border-radius:5px;text-decoration:none;color:var(--ybk-ink);font-size:.88rem}
.ybk-pag .current{background:var(--ybk-deep);color:#fff;border-color:var(--ybk-deep)}

/* ============================================================
   8. Single entry extras
   ============================================================ */
.ybk-hero-fig{margin:0 0 2rem;border-radius:9px;overflow:hidden;border:1px solid var(--ybk-line)}
.ybk-hero-fig img{display:block;width:100%;height:auto}

.ybk-foot-note{
  margin-top:2.6rem;padding-top:1.3rem;border-top:1px solid var(--ybk-line);
  font-size:.88rem;color:var(--ybk-ink-2);max-width:44rem;
}
.ybk-foot-note b{color:var(--ybk-ink)}

.ybk-next{margin-top:2.4rem;max-width:44rem}
.ybk-next h2{font-family:var(--ybk-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ybk-accent-d);font-weight:500;margin:0 0 .8rem}
.ybk-next ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.ybk-next a{color:var(--ybk-ink);text-decoration:none;border-bottom:1px solid var(--ybk-line);display:block;padding-bottom:.5rem}
.ybk-next a:hover{color:var(--ybk-accent-d)}

/* ============================================================
   9. Notice panel (404 / empty search)
   ============================================================ */
.ybk-panel{max-width:40rem;border:1px solid var(--ybk-line);border-left:4px solid var(--ybk-accent);border-radius:0 8px 8px 0;background:var(--ybk-wash);padding:1.6rem 1.7rem}
.ybk-panel h2{margin:.3rem 0 .6rem;font-family:var(--ybk-serif);font-weight:400;font-size:1.5rem}
.ybk-panel p{margin:0 0 1rem;color:var(--ybk-ink-2)}
.ybk-search{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.4rem}
.ybk-search input[type=search]{flex:1 1 12rem;min-width:0;padding:.6rem .75rem;border:1px solid var(--ybk-line-2);border-radius:5px;font:inherit;font-size:.95rem;background:#fff;color:var(--ybk-ink)}
.ybk-search button{padding:.6rem 1.1rem;border:0;border-radius:5px;background:var(--ybk-deep);color:#fff;font:inherit;font-weight:600;font-size:.9rem;cursor:pointer}
.ybk-search button:hover{background:var(--ybk-accent-d)}

/* ============================================================
   10. Footer — sitemap columns + desk block
   ============================================================ */
.ybk-foot{background:var(--ybk-deeper);color:#A9A2B3;margin-top:3rem;padding:3rem 0 2rem;font-size:.9rem}
.ybk-foot-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:2rem}
.ybk-foot h2{font-family:var(--ybk-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ybk-accent-l);margin:0 0 .85rem;font-weight:500}
.ybk-foot ul{list-style:none;margin:0;padding:0}
.ybk-foot li{margin:0 0 .5rem;line-height:1.45}
.ybk-foot a{color:#CFC9D6;text-decoration:none}
.ybk-foot a:hover{color:#fff;text-decoration:underline;text-underline-offset:.18em}
.ybk-foot-brand b{display:block;font-family:var(--ybk-serif);font-weight:400;font-size:1.3rem;color:#fff;margin-bottom:.4rem}
.ybk-foot-base{
  margin-top:2.4rem;padding-top:1.3rem;border-top:1px solid rgba(255,255,255,.13);
  display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;justify-content:space-between;
  font-size:.78rem;color:#948CA1;line-height:1.55;
}
.ybk-foot-base p{margin:0;max-width:46rem}

/* ============================================================
   11. Responsive — burger below 960px, room for the mu-plugin
        sticky enquiry bar (.iyb-bar) below 781px.
   ============================================================ */
@media(max-width:1100px){
  .ybk-burger{display:flex}
  .ybk-nav{
    display:none;position:absolute;left:0;right:0;top:100%;
    background:#fff;border-bottom:1px solid var(--ybk-line);
    box-shadow:0 14px 30px rgba(43,34,51,.14);padding:.6rem 0 .9rem;
  }
  .ybk-nav-check:checked~.ybk-nav{display:block}
  .ybk-nav ul{flex-direction:column;align-items:stretch;gap:0;width:min(100% - 2.4rem,74rem);margin-inline:auto}
  .ybk-nav a{padding:.72rem .2rem;border-bottom:1px solid var(--ybk-line);border-radius:0;font-size:.98rem;white-space:normal}
  .ybk-nav li:last-child a{border-bottom:0}
  .ybk-nav .ybk-wa>a{margin-top:.6rem;border-radius:6px;text-align:center;padding:.75rem 1rem}
  .ybk-head-in{position:relative;min-height:60px}
}
@media(max-width:781px){
  body{padding-bottom:64px}
  .ybk-mast-in{padding:2.1rem 0 1.9rem}
  .ybk-main{padding:2rem 0 2.4rem}
  .ybk-strip-note{display:none}
}
@media(max-width:400px){
  body{font-size:16px}
  .ybk-brand b{font-size:1.24rem}
}

/* ============================================================
   12. Dark scheme — keeps the plum/vermillion identity, mirrors the
        content palette so article styles stay in the same brand.
   ============================================================ */
@media(prefers-color-scheme:dark){
  :root:root{
    --ybk-ink:#EDE9F2;--ybk-ink-2:#A9A2B3;--ybk-paper:#221A2B;
    --ybk-wash:#2B2233;--ybk-line:#3A2F47;--ybk-line-2:#4A3D57;
    --ybk-deep:#2B2233;--ybk-deeper:#1A1421;--ybk-accent-d:#E5A093;--ybk-accent:#F0B7AA;
    --iyb-ink:#EDE9F2;--iyb-ink-2:#A9A2B3;--iyb-line:#3A2F47;
    --iyb-accent:#E5A093;--iyb-accent-2:#F0B7AA;--iyb-wash:#2B2233;--iyb-warn:#D9B27A;
  }
  .ybk-head{background:rgba(34,26,43,.94)}
  .ybk-burger{background:#2B2233}
  .ybk-nav{background:#221A2B}
  .ybk-search input[type=search]{background:#2B2233;color:#EDE9F2}
  .ybk-b-1{background:#E5A093;color:#221A2B}
  .ybk-thumb,.ybk-hero-fig{background:#2B2233}
}