/*
Theme Name: AmanzBiz
Theme URI: https://amanzbiz.example
Author: AmanzBiz
Description: Minimalist business and technology publication theme for AmanzBiz. Warm off-white editorial layout with category/tag-driven sponsored content and a built-in newsletter signup.
Version: 2.4.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: amanzbiz
*/

:root{
  --dna-bg: oklch(98.6% 0.0025 250);
  --dna-ink: oklch(14% 0.008 250);
  --dna-body: oklch(25% 0.006 250);
  --dna-muted: oklch(56% 0.008 250);
  --dna-muted-2: oklch(45% 0.005 250);
  --dna-hair: oklch(90% 0.004 250);
  --dna-hair-strong: oklch(85% 0.005 250);
  --dna-blue: #197CDF;
  --dna-blue-dark: #0f5fac;
  --dna-blue-dark-bg: oklch(17% 0.02 255);
  --dna-sponsor-bg: oklch(97.5% 0.012 250);
  --dna-sponsor-border: oklch(93% 0.012 250);
  --dna-panel: oklch(97% 0.004 250);
  --dna-radius: 10px;
  --dna-radius-lg: 16px;
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--dna-bg);
  color:var(--dna-ink);
  font-family:'Source Serif 4',serif;
  text-wrap:pretty;
  -webkit-font-smoothing:antialiased;
}
a{ color:var(--dna-blue); text-decoration:none; }
a:hover{ color:var(--dna-blue-dark); }
img{ max-width:100%; height:auto; display:block; }
mark{ background:none; color:var(--dna-blue); }
h1,h2,h3,h4,span,p{ color:inherit; }
::placeholder{ color:oklch(55% 0.005 250); }
.screen-reader-text{ position:absolute!important; clip:rect(1px,1px,1px,1px); width:1px; height:1px; overflow:hidden; }
/* The skip link is hidden until it takes focus, then it has to be visible
   and clickable — so it drops the clip and sizing the class above applies. */
.dna-skip-link:focus{
  position:fixed!important; top:10px; left:10px; z-index:100;
  clip:auto!important; width:auto; height:auto;
  padding:12px 18px; border-radius:999px;
  background:var(--dna-blue-dark-bg); color:#fff;
  font-family:'Space Grotesk',sans-serif; font-size:14px; font-weight:600;
}

/* WP core */
.alignleft{ float:left; margin:0 24px 12px 0; }
.alignright{ float:right; margin:0 0 12px 24px; }
.aligncenter{ display:block; margin:24px auto; }
.wp-caption-text{ font-family:'Space Grotesk',sans-serif; font-size:12px; color:var(--dna-muted-2); margin-top:8px; }

/* Eyebrow / kicker label — IBM Plex Mono, blue, wide tracking */
.dna-eyebrow{
  font-family:'IBM Plex Mono',monospace; font-size:10.5px; font-weight:500;
  color:var(--dna-blue); letter-spacing:0.16em; text-transform:uppercase;
}
.dna-eyebrow-underline{
  display:inline-block; border-bottom:2px solid var(--dna-blue); padding-bottom:8px;
}
.dna-date{
  font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:0.06em; color:var(--dna-muted);
}

/* Sponsored card — subtle blue-tinted card used across sections */
.dna-sponsor-card{
  background:var(--dna-sponsor-bg); border:1px solid var(--dna-sponsor-border); border-radius:12px;
}
.dna-sponsor-label{
  font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:0.08em; color:var(--dna-muted-2); text-transform:uppercase;
}

/* Pill CTA button */
.dna-pill-btn{
  display:inline-block; font-family:'Space Grotesk',sans-serif; font-size:13px; font-weight:600;
  letter-spacing:0.06em; text-transform:uppercase; border:1px solid var(--dna-hair); border-radius:999px;
  background:#fff; color:oklch(20% 0.01 250); padding:13px 30px;
}
.dna-pill-btn:hover{ color:oklch(20% 0.01 250); border-color:oklch(78% 0.005 250); }
/* "Lagi Berita" while a batch is in flight, and once the archive runs out. */
.dna-pill-btn[aria-busy="true"]{ opacity:.7; cursor:progress; }
.dna-pill-btn.is-done{ opacity:.5; cursor:default; }
.dna-pill-btn.is-done:hover{ border-color:var(--dna-hair); }

/* Newsletter card (dark, rounded) */
.dna-newsletter-card{
  background:var(--dna-blue-dark-bg); color:#fff; padding:30px 26px; border-radius:16px;
}
.dna-newsletter-card input[type=email]{
  width:100%; padding:10px 12px; border:1px solid oklch(32% 0.015 255); border-radius:10px;
  background:oklch(23% 0.02 255); color:#fff; font-family:'Space Grotesk',sans-serif; font-size:13px;
  margin-bottom:10px; outline:none;
}
.dna-newsletter-card button{
  width:100%; background:#fff; color:var(--dna-blue-dark-bg); border:none; border-radius:10px; padding:11px;
  font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:13px; letter-spacing:0.01em; cursor:pointer;
}
.dna-newsletter-notice{
  font-family:'Space Grotesk',sans-serif; font-size:12.5px; line-height:1.5; margin:0 0 12px; padding:8px 12px; border-radius:8px;
}
.dna-newsletter-notice.is-success{ background:oklch(93% 0.05 155); color:oklch(28% 0.06 155); }
.dna-newsletter-notice.is-error{ background:oklch(93% 0.05 25); color:oklch(30% 0.08 25); }

.dna-article-body h2{ font-size:28px; font-weight:700; margin:44px 0 20px; line-height:1.3; letter-spacing:-0.012em; }
.dna-article-body h3{ font-size:22px; font-weight:700; margin:32px 0 14px; line-height:1.3; }
.dna-article-body p{ font-size:19px; line-height:1.75; margin:0 0 24px; }
.dna-article-body blockquote{ margin:0 0 24px; padding-left:24px; border-left:3px solid var(--dna-blue); font-style:italic; font-size:22px; line-height:1.5; color:oklch(20% 0.005 250); }
.dna-article-body figure{ margin:36px 0 12px; }
.dna-article-body figcaption{ font-family:'Space Grotesk',sans-serif; font-size:12px; color:oklch(50% 0.005 250); margin-top:8px; }
.dna-article-body ul,.dna-article-body ol{ font-size:19px; line-height:1.75; margin:0 0 24px; padding-left:24px; }
.dna-article-body img{ border-radius:var(--dna-radius); }

.dna-page-body h2{ font-size:24px; font-weight:700; margin:40px 0 20px; }
.dna-page-body p{ font-size:19px; line-height:1.65; color:var(--dna-body); margin:0 0 24px; }
.dna-page-body hr{ border:none; height:1px; background:var(--dna-hair); margin:40px 0; }

/* ==========================================================================
   Phone navigation

   The toggle, the search shortcut and the overlay ship on every page but
   only surface at phone width, where the date bar and its text links are
   replaced by a 56px sticky masthead. The overlay stays closed without
   JavaScript, and the footer links remain the way around the site.
   ========================================================================== */
.dna-menu-toggle,
.dna-search-link{ display:none; }

.dna-menu{
  position:fixed; inset:0; z-index:60;
  background:var(--dna-blue-dark-bg); color:#fff;
  padding:24px 22px; display:flex; flex-direction:column;
  overflow-y:auto; overscroll-behavior:contain;
}
.dna-menu[hidden]{ display:none; }
.dna-menu-head{ display:flex; justify-content:flex-end; }
.dna-menu-close{
  width:44px; height:44px; padding:0; background:none; border:none; color:#fff;
  font-family:'Space Grotesk',sans-serif; font-size:26px; line-height:1; cursor:pointer;
}
.dna-menu-links{ display:flex; flex-direction:column; margin-top:14px; }
.dna-menu-links a{
  color:#fff; font-size:26px; font-weight:600; letter-spacing:-0.02em;
  padding:12px 0; border-bottom:1px solid oklch(28% 0.02 255);
}
.dna-menu-links a:last-child{ border-bottom:none; }
.dna-menu-date{
  margin-top:auto; padding-top:24px;
  font-family:'IBM Plex Mono',monospace; font-size:10px;
  letter-spacing:0.14em; text-transform:uppercase; color:oklch(70% 0.02 255);
}
/* Hold the page still behind the overlay. */
body.dna-menu-open{ overflow:hidden; }

/* The "Terkini" rail carries a thumbnail for the phone layout only. Hidden
   here rather than left out of the markup, and lazy — a lazy image with no
   layout box is never fetched, so desktop pays nothing for it. */
.dna-rail-item > img,
.dna-rail-item > .dna-img-ph{ display:none; }

/* ==========================================================================
   Tablet — the multi-column sections fold down to one
   ========================================================================== */
@media (max-width:820px){
  .dna-hero-grid{ grid-template-columns:1fr!important; padding-bottom:34px!important; }
  .dna-hero-grid > div:nth-child(2){ display:none; }            /* the vertical rule */
  .dna-hero-grid > a{ padding-right:0!important; }
  .dna-hero-grid > div:last-child{ padding-left:0!important; padding-top:30px; }

  .dna-3col{ grid-template-columns:1fr!important; }
  .dna-3col > a{
    border-right:none!important;
    padding:0 0 26px!important;
    border-bottom:1px solid var(--dna-hair);
    margin-bottom:26px;
  }
  .dna-3col > a:last-child{ border-bottom:none; margin-bottom:0; padding-bottom:0!important; }

  .dna-opinion-grid{ grid-template-columns:1fr!important; gap:38px!important; }
  .dna-sponsor-feature > a{ grid-template-columns:1fr!important; gap:18px!important; }
}

/* ==========================================================================
   Phone
   ========================================================================== */
@media (max-width:600px){
  /* --- masthead becomes a sticky 56px bar --- */
  /* !important: the element carries an inline display:flex. */
  .dna-topbar{ display:none!important; }
  .dna-masthead{
    position:sticky; top:0; z-index:20;
    display:grid; grid-template-columns:44px 1fr 44px; align-items:center;
    height:56px; max-width:none!important; padding:0 6px!important;
    background:var(--dna-bg); border-bottom:1px solid var(--dna-hair);
  }
  .dna-masthead .dna-logo{ justify-self:center; }
  /* One wordmark, scaled — not a second copy of the path data. */
  .dna-masthead .dna-logo svg{ width:122px; height:33px; }
  .dna-masthead-rule{ display:none; }

  .dna-menu-toggle{
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
    width:44px; height:44px; padding:0; background:none; border:none; cursor:pointer;
  }
  .dna-menu-toggle span{ display:block; width:18px; height:1.5px; background:oklch(25% 0.01 250); }
  .dna-search-link{
    display:flex; align-items:center; justify-content:center;
    width:44px; height:44px; color:oklch(25% 0.01 250);
  }

  /* --- gutters --- */
  .dna-wrap > main,
  .dna-wrap > article,
  .dna-wrap > section,
  .dna-newsletter-band > div,
  .dna-footer-row{ padding-left:18px!important; padding-right:18px!important; }
  .dna-wrap > main{ padding-top:22px!important; }
  .dna-wrap > article{ padding-top:26px!important; }
  .dna-wrap > section{ padding-top:34px!important; padding-bottom:34px!important; }

  /* --- type --- */
  .dna-hero-grid h1{
    font-size:32px!important; line-height:1.1!important;
    letter-spacing:-0.026em!important; margin-bottom:18px!important;
  }
  .dna-wrap > article h1{ font-size:30px!important; line-height:1.12!important; }
  .dna-wrap > article > p{ font-size:17px!important; }
  .dna-page-title{ font-size:32px!important; line-height:1.12!important; }
  .dna-article-body p,
  .dna-article-body ul,
  .dna-article-body ol{ font-size:17px!important; line-height:1.7!important; }
  .dna-article-body h2{ font-size:24px!important; margin-top:34px!important; }
  .dna-article-body blockquote{ font-size:19px!important; padding-left:18px!important; }
  .dna-page-body p{ font-size:17px!important; }

  /* --- hero --- */
  .dna-hero-grid{ padding-bottom:26px!important; }
  .dna-hero-grid > a img,
  .dna-hero-grid > a .dna-img-ph{ height:210px!important; }
  .dna-hero-grid > div:last-child{ padding-top:22px!important; }

  /* --- "Terkini": text left, small thumbnail right --- */
  .dna-rail-item{ display:grid!important; grid-template-columns:1fr 92px; gap:16px; align-items:start; }
  .dna-rail-item > img,
  .dna-rail-item > .dna-img-ph{ display:block; }
  .dna-rail-item h3{ font-size:17px!important; }

  /* --- "Berita Lain": the thumbnail crosses to the right and shrinks --- */
  .dna-latest-item{ grid-template-columns:1fr 92px!important; gap:16px!important; align-items:start; }
  .dna-latest-item > img,
  .dna-latest-item > .dna-img-ph{
    order:2; width:92px!important; height:72px!important; border-radius:8px!important;
  }
  .dna-latest-item h3{ font-size:17px!important; }

  /* Sponsored cards sit inside the gutter instead of bleeding past it. */
  .dna-sponsor-card{ margin-left:0!important; margin-right:0!important; padding:16px!important; }

  /* --- 3-up grid, stacked --- */
  .dna-3col > a img,
  .dna-3col > a .dna-img-ph{ height:180px!important; }
  .dna-3col h2{ font-size:20px!important; }

  /* --- the large sponsored panel --- */
  .dna-sponsor-feature{ padding:20px!important; margin-bottom:26px!important; }
  .dna-sponsor-feature > a img,
  .dna-sponsor-feature > a .dna-img-ph{ height:150px!important; }
  .dna-sponsor-feature h2{ font-size:20px!important; }

  /* --- newsletter above "Berita Lain", most-read after it ---
     display:contents unwraps the sidebar so its two blocks can be ordered
     independently, which is how the newsletter reaches the middle of the
     page on a phone without being moved in the markup. */
  .dna-opinion-grid{ display:flex!important; flex-direction:column; gap:26px!important; }
  .dna-aside{ display:contents; }
  .dna-aside-newsletter{ order:-1; margin-bottom:0!important; }
  .dna-opinion-main{ order:0; }
  .dna-most-read{ order:1; }

  .dna-newsletter-card{ padding:24px 20px!important; }
  /* 16px keeps iOS from zooming the page when the field takes focus. */
  .dna-newsletter-card input[type=email]{ height:46px; font-size:16px; }
  .dna-newsletter-card button{ height:46px; font-size:15px; }

  /* --- full-width tap target for "Lagi Berita" --- */
  .dna-pill-btn{
    display:flex; align-items:center; justify-content:center;
    width:100%; height:48px; padding:0 20px;
  }

  /* --- events --- */
  .dna-event-row{ grid-template-columns:64px 1fr!important; gap:16px!important; }

  /* --- footer: links first, then the copyright line --- */
  .dna-footer-row{
    flex-direction:column-reverse!important; align-items:flex-start!important;
    gap:20px!important; padding-top:26px!important; padding-bottom:34px!important;
  }
  .dna-footer-row > div{ flex-wrap:wrap; gap:14px 22px!important; }
}

/* Belt and braces: the overlay is only reachable from the phone-only
   toggle, so it should never appear on a wider screen. */
@media (min-width:601px){
  .dna-menu{ display:none!important; }
}