/*
Theme Name: E-Biz Blog
Theme URI: https://example.com/ebiz-blog
Author: E-Biz Blog
Description: A bold editorial theme for business, marketing and money blogs. Banknote-inspired colour system where each category owns its own colour, oversized display typography, an asymmetric post grid and a currency-style stat ticker. Built for fast, international, ad-free reading.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ebiz-blog
Tags: blog, one-column, two-columns, custom-colors, custom-menu, featured-images, translation-ready, block-styles, wide-blocks
*/


  :root{
    --navy:#0A0E2E;
    --navy-2:#151A46;
    --paper:#F1F1EC;
    --white:#FFFFFF;
    --violet:#5B3DF5;
    --emerald:#00A76A;
    --magenta:#E5157F;
    --amber:#FFC24B;
    --mute:#6E718F;
    --sans:Inter,system-ui,-apple-system,'Segoe UI','Helvetica Neue',Helvetica,Arial,sans-serif;
    --gap:16px;
  }
  *{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
  body{margin:0;background:var(--paper);color:var(--navy);font-family:var(--sans);
    font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
  .wrap{max-width:1280px;margin:0 auto;padding:0 32px}
  button{font-family:inherit}

  /* progress */
  #prog{position:fixed;top:0;left:0;height:3px;width:0;background:var(--amber);z-index:99}

  /* ---------- nav ---------- */
  nav.top{position:sticky;top:0;z-index:50;background:var(--navy);color:#fff}
  .nav-in{display:flex;align-items:center;justify-content:space-between;gap:20px;
    padding-block:15px;flex-wrap:wrap}
  .mark{background:none;border:0;color:#fff;cursor:pointer;font-size:1.35rem;
    font-weight:800;letter-spacing:-.045em;padding:0;display:flex;align-items:center;gap:9px}
  .mark i{width:11px;height:11px;border-radius:50%;background:var(--amber);display:block}
  .filters{display:flex;gap:7px;flex-wrap:wrap}
  .chip{background:transparent;border:1px solid rgba(255,255,255,.24);color:rgba(255,255,255,.78);
    border-radius:100px;padding:7px 13px;font-size:.81rem;font-weight:500;cursor:pointer;
    letter-spacing:-.01em}
  .chip:hover{border-color:#fff;color:#fff}
  .chip[aria-pressed="true"]{background:var(--c,#fff);border-color:var(--c,#fff);color:var(--navy);font-weight:650}
  .chip[data-c="Start a Business"][aria-pressed="true"]{background:var(--violet);border-color:var(--violet);color:#fff}
  .chip[data-c="Make Money Online"][aria-pressed="true"]{background:var(--emerald);border-color:var(--emerald);color:#fff}
  .chip[data-c="Marketing"][aria-pressed="true"]{background:var(--magenta);border-color:var(--magenta);color:#fff}

  /* ---------- hero ---------- */
  .hero{background:var(--navy);color:#fff;padding:56px 0 0;overflow:hidden}
  .hero-grid{display:grid;grid-template-columns:1fr 296px;gap:56px;align-items:end;padding-bottom:52px}
  .kicker{display:inline-flex;align-items:center;gap:9px;font-size:.8rem;font-weight:600;
    color:var(--amber);margin:0 0 26px;letter-spacing:-.01em}
  .kicker b{width:7px;height:7px;border-radius:50%;background:var(--amber)}
  .hero h1{font-size:clamp(2.4rem,5.5vw,4.6rem);line-height:.96;letter-spacing:-.045em;
    font-weight:800;margin:0;max-width:19ch}
  .hero-btn{background:none;border:0;padding:0;text-align:left;cursor:pointer;color:#fff;display:block}
  .hero-btn:hover h1{color:var(--amber)}
  .hero .dek{font-size:1.22rem;color:#B9BCD8;max-width:46ch;margin:26px 0 0;line-height:1.5}
  .hero-side{border-left:1px solid rgba(255,255,255,.16);padding-left:28px;font-size:.92rem;
    color:#B9BCD8;line-height:1.55}
  .hero-side h4{color:#fff;font-size:1rem;font-weight:700;margin:0 0 10px;letter-spacing:-.02em}
  .sub{display:flex;gap:8px;margin-top:16px}
  .sub input{flex:1;min-width:0;font:inherit;font-size:.9rem;padding:11px 14px;border-radius:100px;
    border:1px solid rgba(255,255,255,.24);background:rgba(255,255,255,.06);color:#fff}
  .sub input::placeholder{color:#8A8DB0}
  .sub input:focus{outline:2px solid var(--amber);outline-offset:1px}
  .sub button{font:inherit;font-size:.9rem;font-weight:650;padding:11px 20px;border-radius:100px;
    border:0;background:var(--amber);color:var(--navy);cursor:pointer;white-space:nowrap}
  .sub button:hover{background:#fff}
  .subnote{font-size:.8rem;margin:10px 0 0;color:var(--amber)}

  /* ticker */
  .ticker{border-top:1px solid rgba(255,255,255,.16);padding:16px 0;display:flex;overflow:hidden;
    mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
  .tick-run{display:flex;gap:12px;padding-right:12px;flex:none;animation:run 46s linear infinite}
  @keyframes run{from{transform:translateX(0)}to{transform:translateX(-100%)}}
  .tick{flex:none;display:flex;align-items:center;gap:9px;font-size:.83rem;color:#C7CAE4;
    border:1px solid rgba(255,255,255,.18);border-radius:100px;padding:7px 16px;white-space:nowrap}
  .tick s{width:6px;height:6px;border-radius:50%;background:var(--amber);flex:none}
  .tick em{font-style:normal;font-weight:700;color:#fff;font-variant-numeric:tabular-nums}

  /* ---------- grid ---------- */
  .board{padding-block:56px 80px}
  .board-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;
    margin-bottom:26px;flex-wrap:wrap}
  .board-head h2{font-size:2rem;font-weight:800;letter-spacing:-.04em;margin:0}
  .board-head span{font-size:.87rem;color:var(--mute);font-variant-numeric:tabular-nums}
  .tiles{display:flex;flex-wrap:wrap;gap:var(--gap)}
  .tile{flex:1 1 calc(34% - var(--gap));min-width:min(300px,100%);border-radius:22px;
    background:var(--white);border:0;padding:26px;text-align:left;cursor:pointer;
    color:var(--navy);display:flex;flex-direction:column;gap:11px;min-height:196px}
  .tile.lg{flex-basis:calc(57% - var(--gap));min-height:248px;padding:32px}
  .tile.sm{flex-basis:calc(26% - var(--gap))}
  .tile-top{display:flex;align-items:center;gap:9px;font-size:.79rem;font-weight:650;
    letter-spacing:-.01em;color:var(--k)}
  .tile-top s{width:7px;height:7px;border-radius:50%;background:var(--k);flex:none}
  .tile h3{font-size:1.18rem;line-height:1.24;letter-spacing:-.028em;font-weight:700;margin:0}
  .tile.lg h3{font-size:1.9rem;line-height:1.12;letter-spacing:-.038em}
  .tile p{font-size:.93rem;color:var(--mute);margin:0;line-height:1.5}
  .tile .foot{margin-top:auto;font-size:.8rem;color:var(--mute);font-variant-numeric:tabular-nums;
    padding-top:14px}
  .tile.filled{background:var(--k);color:#fff}
  .tile.filled .tile-top{color:rgba(255,255,255,.85)}
  .tile.filled .tile-top s{background:var(--amber)}
  .tile.filled p,.tile.filled .foot{color:rgba(255,255,255,.78)}
  .tile:hover{background:var(--k);color:#fff}
  .tile:hover .tile-top{color:rgba(255,255,255,.85)}
  .tile:hover .tile-top s{background:var(--amber)}
  .tile:hover p,.tile:hover .foot{color:rgba(255,255,255,.78)}
  .tile.filled:hover{background:var(--navy)}
  

  /* ---------- article ---------- */
  .art-wrap{padding-block:52px 90px;display:grid;grid-template-columns:minmax(0,1fr) 232px;
    gap:64px;align-items:start;max-width:1012px}
  .back{background:none;border:0;padding:0;color:var(--mute);font-size:.88rem;cursor:pointer;
    margin-bottom:30px;font-weight:550}
  .back:hover{color:var(--navy)}
  article{max-width:100%}
  .a-top{display:flex;align-items:center;gap:9px;font-size:.83rem;font-weight:650;color:var(--k);margin-bottom:18px}
  .a-top s{width:8px;height:8px;border-radius:50%;background:var(--k)}
  article h1{font-size:clamp(2.1rem,5vw,3.5rem);line-height:1.02;letter-spacing:-.045em;
    font-weight:800;margin:0 0 20px}
  article .dek{font-size:1.24rem;color:var(--mute);margin:0 0 26px;line-height:1.5}
  .byline{font-size:.85rem;color:var(--mute);border-top:1px solid #D9D9D2;border-bottom:1px solid #D9D9D2;
    padding:13px 0;margin-bottom:40px;font-variant-numeric:tabular-nums}
  article h2{font-size:1.55rem;font-weight:750;letter-spacing:-.035em;margin:46px 0 14px;line-height:1.2}
  article h3{font-size:1.08rem;font-weight:700;letter-spacing:-.02em;margin:32px 0 8px}
  article p{margin:0 0 21px;font-size:1.08rem;line-height:1.68}
  article ul,article ol{margin:0 0 22px;padding-left:22px;font-size:1.08rem;line-height:1.65}
  article li{margin-bottom:10px}
  article li::marker{color:var(--k);font-weight:700}
  .pull{border-left:5px solid var(--k);padding:6px 0 6px 24px;margin:36px 0;
    font-size:1.45rem;line-height:1.28;font-weight:700;letter-spacing:-.032em}
  .note{background:var(--navy);color:#C7CAE4;border-radius:20px;padding:24px 28px;margin:36px 0;font-size:.96rem}
  .note p{font-size:.96rem;margin:0 0 12px;line-height:1.6}
  .note p:last-child{margin:0}
  .note strong{color:#fff}
  table.fig{width:100%;border-collapse:separate;border-spacing:0;margin:30px 0;font-size:.92rem;
    background:var(--white);border-radius:18px;overflow:hidden}
  table.fig th{text-align:left;background:var(--navy);color:#fff;padding:14px 16px;font-weight:650;
    letter-spacing:-.015em}
  table.fig td{padding:13px 16px;vertical-align:top;font-variant-numeric:tabular-nums;
    border-top:1px solid #E7E7E0}
  .next{border-top:2px solid var(--navy);margin-top:60px;padding-top:22px}
  .next h4{font-size:.83rem;color:var(--mute);font-weight:600;margin:0 0 12px}
  .next button{background:none;border:0;padding:0;text-align:left;cursor:pointer;color:var(--navy);
    font-size:1.4rem;font-weight:750;letter-spacing:-.035em;line-height:1.15}
  .next button:hover{color:var(--violet)}
  .rail{position:sticky;top:96px;font-size:.9rem;color:var(--mute);line-height:1.5}
  .rail h4{color:var(--navy);font-size:.95rem;font-weight:700;margin:0 0 12px;letter-spacing:-.02em}
  .rail button{display:block;width:100%;background:none;border:0;padding:11px 0;text-align:left;
    cursor:pointer;color:var(--navy);font-size:.93rem;font-weight:600;line-height:1.35;
    letter-spacing:-.015em;border-top:1px solid #D9D9D2}
  .rail button:hover{color:var(--k,var(--violet))}

  footer{background:var(--navy);color:#8A8DB0;padding:44px 0}
  .foot-in{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;font-size:.86rem}
  .foot-in b{color:#fff;font-weight:800;letter-spacing:-.03em;font-size:1.1rem}

  :focus-visible{outline:3px solid var(--amber);outline-offset:2px}
  @media (max-width:1000px){
    .hero-grid{grid-template-columns:1fr;gap:38px;align-items:start}
    .hero-side{border-left:0;border-top:1px solid rgba(255,255,255,.16);padding:26px 0 0}
    .art-wrap{grid-template-columns:1fr;gap:40px;max-width:680px}
    .rail{position:static}
  }
  @media (max-width:720px){
    .wrap{padding:0 20px}
    .tile,.tile.lg,.tile.sm{flex-basis:100%;min-height:0}
    .hero{padding-top:44px}
  }
  @media (prefers-reduced-motion:reduce){
    .tick-run{animation:none}
    html{scroll-behavior:auto}
  }
  @media (prefers-reduced-motion:no-preference){
    .tile,.tile h3,.chip{transition:background .16s ease,color .16s ease,border-color .16s ease}
  }

/* ============================================================
   WordPress additions
   ============================================================ */

/* --- accessibility --- */
.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link:focus{position:fixed;top:10px;left:10px;width:auto;height:auto;clip:auto;z-index:200;
  background:var(--amber);color:var(--navy);padding:12px 20px;border-radius:100px;font-weight:700}

/* --- admin bar --- */
body.admin-bar nav.top{top:32px}
@media (max-width:782px){body.admin-bar nav.top{top:46px}}

/* --- article media --- */
article img,.feat img{max-width:100%;height:auto;border-radius:18px;display:block}
.feat{margin:0 0 34px}
figure{margin:32px 0}
figcaption,.wp-element-caption{font-size:.86rem;color:var(--mute);margin-top:10px;line-height:1.45}
.alignleft{float:left;margin:6px 28px 20px 0;max-width:48%}
.alignright{float:right;margin:6px 0 20px 28px;max-width:48%}
.aligncenter{margin-left:auto;margin-right:auto}
.alignwide{width:min(112%,100vw - 40px);margin-left:50%;transform:translateX(-50%)}
.alignfull{width:100vw;margin-left:50%;transform:translateX(-50%);border-radius:0}
@media (max-width:900px){.alignwide,.alignfull{width:100%;margin-left:0;transform:none}}

/* --- Gutenberg blocks mapped to the design --- */
article blockquote,.wp-block-quote{border-left:5px solid var(--k);padding:6px 0 6px 24px;
  margin:36px 0;font-size:1.45rem;line-height:1.28;font-weight:700;letter-spacing:-.032em}
article blockquote p,.wp-block-quote p{font-size:inherit;font-weight:inherit;line-height:inherit;margin:0 0 8px}
article blockquote cite{display:block;font-size:.9rem;font-weight:500;color:var(--mute);
  font-style:normal;letter-spacing:0;margin-top:10px}

.wp-block-table,article table:not(.no-style){width:100%;border-collapse:separate;border-spacing:0;
  margin:30px 0;font-size:.92rem;background:var(--white);border-radius:18px;overflow:hidden}
.wp-block-table table{width:100%;border-collapse:separate;border-spacing:0;margin:0;background:none}
.wp-block-table th,article table th{text-align:left;background:var(--navy);color:#fff;padding:14px 16px;
  font-weight:650;letter-spacing:-.015em;border:0}
.wp-block-table td,article table td{padding:13px 16px;vertical-align:top;border:0;
  border-top:1px solid #E7E7E0;font-variant-numeric:tabular-nums}
.wp-block-table figcaption{margin-top:12px}

/* callout — registered as a block style on Group blocks */
.is-style-ebiz-callout,.wp-block-group.is-style-ebiz-callout{background:var(--navy);color:#C7CAE4;
  border-radius:20px;padding:24px 28px;margin:36px 0}
.is-style-ebiz-callout p{font-size:.96rem;line-height:1.6;color:#C7CAE4}
.is-style-ebiz-callout p:last-child{margin-bottom:0}
.is-style-ebiz-callout strong,.is-style-ebiz-callout h2,.is-style-ebiz-callout h3{color:#fff}
.is-style-ebiz-callout a{color:var(--amber)}

/* stat — big number block style on Paragraph */
.is-style-ebiz-stat{font-size:clamp(2.4rem,6vw,4rem);font-weight:800;letter-spacing:-.045em;
  line-height:1;color:var(--k);margin:34px 0 8px;font-variant-numeric:tabular-nums}

.wp-block-separator,article hr{border:0;border-top:1px solid #D9D9D2;margin:44px 0}
.wp-block-code,article pre{background:var(--navy);color:#C7CAE4;border-radius:16px;padding:22px 24px;
  overflow-x:auto;font-size:.88rem;line-height:1.55;margin:30px 0}
article :not(pre)>code{background:#E3E3DB;border-radius:5px;padding:2px 6px;font-size:.9em}
.wp-block-button__link{background:var(--k);color:#fff;border-radius:100px;padding:13px 26px;
  font-weight:650;text-decoration:none;display:inline-block}
.wp-block-embed,.wp-block-video{margin:32px 0}
.wp-block-embed iframe,article iframe{max-width:100%;border-radius:18px}
article a{color:var(--k);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1.5px}
article a:hover{text-decoration-thickness:3px}
.wp-block-image.is-style-rounded img{border-radius:50%}

/* --- pagination --- */
.pager{display:flex;gap:8px;flex-wrap:wrap;margin-top:44px;align-items:center}
.pager .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:44px;
  height:44px;padding:0 15px;border-radius:100px;background:var(--white);color:var(--navy);
  text-decoration:none;font-weight:600;font-size:.92rem}
.pager .page-numbers:hover{background:var(--navy);color:#fff}
.pager .page-numbers.current{background:var(--violet);color:#fff}
.pager .page-numbers.dots{background:none}

/* --- comments --- */
.comments{max-width:680px;margin-top:64px;border-top:2px solid var(--navy);padding-top:30px}
.comments h3{font-size:1.5rem;font-weight:800;letter-spacing:-.035em;margin:0 0 26px}
.commentlist{list-style:none;margin:0;padding:0}
.commentlist ul.children{list-style:none;margin:18px 0 0 26px;padding:0;border-left:2px solid #DEDED6}
.commentlist li{margin-bottom:22px}
.comment-body{background:var(--white);border-radius:18px;padding:20px 24px}
.comment-meta{display:flex;align-items:center;gap:11px;margin-bottom:9px;font-size:.85rem;color:var(--mute)}
.comment-meta img{border-radius:50%}
.comment-meta b{color:var(--navy);font-weight:700}
.comment-body p{font-size:1rem;margin:0 0 12px}
.comment-reply-link{font-size:.85rem;font-weight:650;color:var(--k);text-decoration:none}
.comment-respond{margin-top:34px}
.comment-respond h3{font-size:1.25rem}
.comment-form p{margin-bottom:14px}
.comment-form label{display:block;font-size:.87rem;font-weight:600;margin-bottom:6px}
.comment-form input[type=text],.comment-form input[type=email],.comment-form input[type=url],
.comment-form textarea,.search-field{font:inherit;font-size:.95rem;width:100%;padding:12px 16px;
  border-radius:14px;border:1px solid #D5D5CC;background:var(--white);color:var(--navy)}
.comment-form textarea{min-height:150px;resize:vertical}
.comment-form input:focus,.comment-form textarea:focus,.search-field:focus{outline:2px solid var(--violet);
  outline-offset:1px;border-color:var(--violet)}
.comment-form .submit{background:var(--navy);color:#fff;border:0;border-radius:100px;padding:13px 28px;
  font-weight:650;font-size:.95rem;cursor:pointer}
.comment-form .submit:hover{background:var(--violet)}

/* --- search --- */
.searchform{display:flex;gap:9px;max-width:440px}
.searchform button{background:var(--navy);color:#fff;border:0;border-radius:100px;padding:12px 24px;
  font-weight:650;font-size:.93rem;cursor:pointer;white-space:nowrap}
.searchform button:hover{background:var(--violet)}

/* --- page + 404 --- */
.page-head{padding-block:52px 8px}
.page-head h1{font-size:clamp(2.1rem,5vw,3.6rem);font-weight:800;letter-spacing:-.045em;
  line-height:1.02;margin:0 0 14px}
.page-head p{color:var(--mute);font-size:1.15rem;margin:0;max-width:56ch}
.narrow{max-width:680px;padding-block:44px 90px}
.big404{font-size:clamp(5rem,18vw,12rem);font-weight:800;letter-spacing:-.06em;line-height:.85;
  color:var(--violet);margin:0 0 20px}

/* --- sticky post flag --- */
.tile .pin{font-size:.72rem;font-weight:700;color:var(--amber)}

/* --- nav menus --- */
.filters{list-style:none;margin:0;padding:0}
.filters li{display:contents}
.filters a{background:transparent;border:1px solid rgba(255,255,255,.24);color:rgba(255,255,255,.78);
  border-radius:100px;padding:7px 13px;font-size:.81rem;font-weight:500;letter-spacing:-.01em;
  text-decoration:none;display:inline-block}
.filters a:hover{border-color:#fff;color:#fff}
.filters a[aria-pressed="true"],.filters li.current-menu-item>a,.filters li.current-menu-parent>a{
  background:var(--c,#fff);border-color:var(--c,#fff);color:#fff;font-weight:650}
.filters a[aria-pressed="true"]:not([style*="--c"]){background:#fff;color:var(--navy)}
.foot-menu{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.foot-menu a{color:#8A8DB0;text-decoration:none}
.foot-menu a:hover{color:#fff}
.mark{text-decoration:none}
.hero-btn{text-decoration:none}
.tile{text-decoration:none}
.a-top a{color:inherit;text-decoration:none}
.next a{color:var(--navy);font-size:1.4rem;font-weight:750;letter-spacing:-.035em;
  line-height:1.15;text-decoration:none;display:block}
.next a:hover{color:var(--k)}
.rail a{display:block;width:100%;padding:11px 0;color:var(--navy);font-size:.93rem;font-weight:600;
  line-height:1.35;letter-spacing:-.015em;border-top:1px solid #D9D9D2;text-decoration:none}
.rail a:hover{color:var(--k)}
.back{text-decoration:none;display:inline-block}