/*
Theme Name: IntelliPress Blog
Theme URI: https://intellipress.ae
Author: IntelliPress
Description: Dark, isolated-by-design block theme for the IntelliPress blog. Built for blog.intellipress.ae (English) and blog.intellipress.at (German) — the hero flag ribbon auto-swaps to red/white/red when the site language is German, and all theme strings are translation-ready.
Version: 1.2.0
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
Text Domain: intellipress-blog
Tags: blog, block-theme, full-site-editing, dark, custom-colors, translation-ready
*/

/* ============================================================
   Tokens (mirror theme.json so custom components work standalone)
   ============================================================ */
:root{
  --green:#4eac47;--green-bright:#62c25a;--green-deep:#0c4d08;--green-ink:#f4f9f3;
  --bg:#080b08;--bg-2:#0b0f0b;--surface:#11160f;--surface-2:#161d14;
  --line:rgba(78,172,71,0.16);--line-soft:rgba(255,255,255,0.07);
  --text:#eef4ec;--muted:#a9b8a5;--muted-2:#7c8b78;
  --mono:'Roboto Mono',ui-monospace,Menlo,monospace;
  --read:720px;

  /* Hero flag ribbon — equal thirds. AE: green / white / red. */
  --rib-1:#4eac47;--rib-2:#f4f9f3;--rib-3:#ce1126;
}
/* Austria (blog.intellipress.at): site language de-* → red / white / red, no other change needed */
html[lang^="de"]{ --rib-1:#ce1126; }

/* ============================================================
   Reading-progress bar (filled by assets/js/blog.js)
   ============================================================ */
.ip-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:100;
  background:linear-gradient(90deg,var(--green-deep),var(--green));transition:width .1s linear}

/* ============================================================
   Flag ribbon — drop a <div class="ip-ribbon"></div> at the
   bottom of any banner group; colours come from --rib-1/2/3.
   ============================================================ */
.ip-ribbon{height:56px;width:100%;pointer-events:none;
  background:linear-gradient(180deg,var(--rib-1) 0 33.333%,var(--rib-2) 33.333% 66.666%,var(--rib-3) 66.666% 100%);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 56' preserveAspectRatio='none'%3E%3Cpath d='M0 9 C300 5 900 13 1200 7 L1200 56 L0 56 Z' fill='%23fff'/%3E%3C/svg%3E") bottom/100% 100% no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 56' preserveAspectRatio='none'%3E%3Cpath d='M0 9 C300 5 900 13 1200 7 L1200 56 L0 56 Z' fill='%23fff'/%3E%3C/svg%3E") bottom/100% 100% no-repeat}

/* ============================================================
   Category cover gradients (fallback when a post has no
   featured image). Add the category slug as a class.
   ============================================================ */
.ip-cover{position:relative;display:grid;place-items:center;overflow:hidden;border-radius:16px;min-height:158px}
.ip-cover.performance{background:linear-gradient(135deg,#0c4d08,#4eac47)}
.ip-cover.security{background:linear-gradient(135deg,#08304d,#3f9eb6)}
.ip-cover.migration{background:linear-gradient(135deg,#5a3a06,#e0a84e)}
.ip-cover.gcc{background:linear-gradient(135deg,#1d4d1a,#7bbf3f)}
.ip-cover.ops{background:linear-gradient(135deg,#2a1d4d,#9b8cef)}

/* ============================================================
   Header / nav
   ============================================================ */
.wp-site-blocks{overflow-x:hidden}
.ip-nav{position:sticky;top:0;z-index:60;background:rgba(8,11,8,0.85);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-soft)}
.ip-brandtag{font-family:var(--wp--preset--font-family--heading,sans-serif);font-weight:700;font-size:12px;
  letter-spacing:1px;text-transform:uppercase;color:var(--muted-2);border-left:1px solid var(--line-soft);
  padding-left:10px;margin-left:2px}

/* ============================================================
   Post cards / query loop
   ============================================================ */
.ip-card{background:var(--surface);border:1px solid var(--line-soft);border-radius:16px;overflow:hidden;
  transition:transform .2s,border-color .2s;height:100%}
.ip-card:hover{transform:translateY(-4px);border-color:var(--line)}
.ip-card .wp-block-post-featured-image,.ip-card .wp-block-post-featured-image img{border-radius:0;height:158px;object-fit:cover;width:100%}
.ip-card .wp-block-post-title{font-size:18px;line-height:1.25}
.ip-card .wp-block-post-excerpt{font-size:13.5px;color:var(--muted-2)}
.ip-cat-tag,.wp-block-post-terms a{font-family:var(--wp--preset--font-family--heading,sans-serif);
  font-weight:800;font-size:10.5px;letter-spacing:1.2px;text-transform:uppercase;color:var(--green)!important;
  text-decoration:none}
.ip-meta,.wp-block-post-date,.wp-block-post-author__name{font-size:12.5px;color:var(--muted-2)}
.ip-avatar{width:24px;height:24px;border-radius:50%}

/* Featured post */
.ip-featured{border:1px solid var(--line);border-radius:20px;overflow:hidden;background:var(--surface)}
.ip-featured:hover{border-color:var(--green)}
.ip-badge{display:inline-block;font-family:var(--wp--preset--font-family--heading,sans-serif);font-weight:800;
  font-size:10px;letter-spacing:1.4px;text-transform:uppercase;color:#06120a;background:var(--green);
  border-radius:20px;padding:3px 10px}

/* ============================================================
   Single article — centred reading column + margin TOC
   ============================================================ */
.ip-article{max-width:var(--read);margin:0 auto;position:relative;padding-top:24px}
.ip-toc{position:absolute;top:0;left:-256px;width:212px;height:100%}
.ip-toc-inner{position:sticky;top:90px}
.ip-toc h6{font-family:var(--wp--preset--font-family--heading,sans-serif);font-weight:800;font-size:11px;
  letter-spacing:1.4px;text-transform:uppercase;color:var(--muted-2);margin:0 0 14px}
.ip-toc a{display:block;font-size:14.5px;color:var(--muted);padding:6px 0 6px 12px;
  border-left:2px solid var(--line-soft);transition:all .15s;text-decoration:none}
.ip-toc a:hover{color:var(--text)}
.ip-toc a.active{color:var(--green);border-left-color:var(--green)}

.entry-content{font-size:19px;color:#dde7da;line-height:1.78}
.entry-content p{margin-bottom:1.4em}
.entry-content h2{scroll-margin-top:90px;margin-top:42px}

/* ============================================================
   Custom blocks / patterns
   ============================================================ */
.ip-callout{border-radius:14px;padding:20px 22px;border:1px solid var(--line);background:rgba(78,172,71,0.07)}
.ip-callout .ct{font-family:var(--wp--preset--font-family--heading,sans-serif);font-weight:800;font-size:13px;
  color:var(--green);margin-bottom:8px}
.ip-callout p{margin:0;font-size:15px;color:var(--muted)}

.ip-takeaways{border-radius:14px;padding:22px 24px;border:1px solid var(--line-soft);background:var(--bg-2)}
.ip-takeaways h4{font-family:var(--wp--preset--font-family--heading,sans-serif);font-size:15px;margin:0 0 14px;color:var(--green-ink)}
.ip-takeaways ul{list-style:none;margin:0;padding:0}
.ip-takeaways li{font-size:15px;color:var(--muted);margin-bottom:10px;padding-left:24px;position:relative}
.ip-takeaways li::before{content:"✓";position:absolute;left:0;color:var(--green);font-weight:700}

/* code block + copy button (button injected by blog.js) */
.wp-block-code{position:relative;background:#0c120c;border:1px solid var(--line-soft);border-radius:12px}
.wp-block-code code{font-family:var(--mono);font-size:13px;line-height:1.7;color:#cfe0cb}
.ip-copy{position:absolute;top:8px;right:8px;background:rgba(0,0,0,0.4);border:1px solid var(--line-soft);
  color:var(--muted);border-radius:6px;font-size:11px;padding:3px 9px;cursor:pointer;
  font-family:var(--wp--preset--font-family--heading,sans-serif);font-weight:700}
.ip-copy:hover{color:var(--green);border-color:var(--line)}

/* benchmark bars (pattern) */
.ip-bench{background:var(--surface);border:1px solid var(--line-soft);border-radius:14px;padding:22px}
.ip-bench .row{display:grid;grid-template-columns:130px 1fr 60px;align-items:center;gap:12px;margin-bottom:12px;font-size:13.5px}
.ip-bench .bar{height:12px;border-radius:6px;background:rgba(255,255,255,0.06);overflow:hidden}
.ip-bench .bar i{display:block;height:100%;border-radius:6px}
.ip-bench .bar i.us{background:linear-gradient(90deg,var(--green-deep),var(--green))}
.ip-bench .bar i.them{background:#c06b6b}
.ip-bench .v{font-family:var(--mono);font-size:13px;text-align:right;color:var(--muted)}

/* author box, newsletter, cta */
.ip-authorbox{display:flex;gap:16px;padding:24px;border:1px solid var(--line-soft);border-radius:16px;background:var(--surface)}
.ip-news,.ip-cta{border:1px solid var(--line);border-radius:22px;padding:44px;text-align:center;position:relative;overflow:hidden;
  background:linear-gradient(160deg,rgba(12,77,8,0.4),var(--surface))}
.ip-news input[type=email]{background:var(--bg-2);border:1px solid var(--line);border-radius:9px;padding:12px 15px;
  color:var(--text);font-family:inherit;min-width:240px}
.ip-btn{font-family:var(--wp--preset--font-family--heading,sans-serif);font-weight:800;font-size:14px;border-radius:9px;
  padding:12px 20px;background:var(--green);color:#06120a;border:0;cursor:pointer;text-decoration:none;display:inline-block}
.ip-btn:hover{background:var(--green-bright)}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:1280px){ .ip-toc{display:none} }
@media (max-width:782px){ .ip-article{max-width:100%} }
@media (prefers-reduced-motion:reduce){ .ip-card:hover{transform:none} }

/* ============================================================
   Search — force dark theme everywhere (kills the white box)
   ============================================================ */
.wp-block-search{margin:0}
.wp-block-search .wp-block-search__input,
input.wp-block-search__input{
  background:#11160f!important;border:1px solid rgba(255,255,255,0.1)!important;border-radius:9px!important;
  color:#eef4ec!important;font-family:var(--body);font-size:14px;padding:9px 14px;min-width:200px;max-width:280px}
.wp-block-search__input:focus{outline:none;border-color:var(--green)!important}
.wp-block-search__input::placeholder{color:var(--muted-2)}
.wp-block-search__inside-wrapper{border:0!important;background:transparent!important;box-shadow:none!important}
.wp-block-search__button{
  background:var(--surface)!important;color:var(--muted)!important;border:1px solid var(--line-soft)!important;
  border-radius:9px!important;margin-left:6px;padding:8px 12px;cursor:pointer}
.wp-block-search__button:hover{color:var(--green)!important;border-color:var(--line)!important}
.wp-block-search__button svg{fill:currentColor}

/* Site logo + title in the dark header */
.ip-nav .wp-block-site-title a{color:var(--text);text-decoration:none;font-weight:800;
  font-family:var(--wp--preset--font-family--heading,'Nunito',sans-serif)}
.ip-nav .wp-block-site-title a:hover{color:var(--green)}
.ip-nav .wp-block-site-logo img{display:block;height:auto;border-radius:8px}

/* Share row on single posts */
.ip-share{display:flex;align-items:center;gap:10px;margin:34px 0 0}
.ip-share .lbl{font-family:var(--wp--preset--font-family--heading,sans-serif);font-weight:800;
  font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted-2)}
.ip-share a{width:36px;height:36px;border:1px solid var(--line-soft);border-radius:9px;
  display:grid;place-items:center;color:var(--muted)}
.ip-share a:hover{color:var(--green);border-color:var(--line)}
.ip-share a svg{width:17px;height:17px}

/* ============================================================
   Custom header: nav, search, product link (portable / shared)
   Literal colors so nothing in the cascade or cache can break it.
   ============================================================ */
.ip-mainnav{display:flex;gap:22px;flex-wrap:wrap;align-items:center}
.ip-mainnav a{font-family:'Roboto',sans-serif;font-size:14px;font-weight:500;color:#a9b8a5;text-decoration:none;padding:6px 0;white-space:nowrap}
.ip-mainnav a:hover{color:#4eac47}

.ip-navright{display:flex;align-items:center;gap:14px;flex-wrap:nowrap}
.ip-search{margin:0}
.ip-search input[type="search"]{
  background:#11160f;border:1px solid rgba(255,255,255,0.10);border-radius:9px;
  color:#eef4ec;font-family:'Roboto',sans-serif;font-size:14px;padding:9px 14px;
  width:180px;outline:none}
.ip-search input[type="search"]:focus{border-color:#4eac47}
.ip-search input[type="search"]::placeholder{color:#7c8b78}
.ip-product-link{font-size:13.5px;color:#a9b8a5;text-decoration:none;white-space:nowrap}
.ip-product-link:hover{color:#4eac47}

@media (max-width:900px){
  .ip-mainnav{order:3;width:100%;gap:18px;overflow-x:auto;padding-top:6px;-webkit-overflow-scrolling:touch}
  .ip-search input[type="search"]{width:140px}
}
@media (max-width:520px){
  .ip-search input[type="search"]{width:120px}
  .ip-product-link{display:none}
}

/* Brand logo lockup in header */
.ip-logo{display:flex;align-items:center;gap:12px}
.ip-logo a{display:flex;align-items:center}
.ip-logo img{height:30px;width:auto;display:block}
@media (max-width:520px){ .ip-logo img{height:26px} }

/* Header CTA cluster (matches the .io site) */
.ip-navcta{display:flex;align-items:center;gap:14px;flex-wrap:nowrap}
.ip-login{font-size:13.5px;color:#a9b8a5;text-decoration:none;white-space:nowrap}
.ip-login:hover{color:#4eac47}
.ip-btn-sm{background:#4eac47;color:#06120a;font-family:'Nunito',sans-serif;font-weight:800;font-size:13px;
  border-radius:8px;padding:9px 16px;text-decoration:none;white-space:nowrap}
.ip-btn-sm:hover{background:#62c25a}
@media (max-width:600px){ .ip-login{display:none} }

/* In-page search (index hero + search results) */
.ip-pagesearch{display:flex;justify-content:center;margin:8px 0 0}
.ip-pagesearch form{display:flex;gap:10px;width:100%;max-width:520px}
.ip-pagesearch input[type="search"]{flex:1;background:#11160f;border:1px solid rgba(255,255,255,0.10);
  border-radius:10px;color:#eef4ec;font-family:'Roboto',sans-serif;font-size:15px;padding:12px 16px;outline:none}
.ip-pagesearch input[type="search"]:focus{border-color:#4eac47}
.ip-pagesearch input[type="search"]::placeholder{color:#7c8b78}
.ip-pagesearch button{background:#4eac47;color:#06120a;border:0;border-radius:10px;font-family:'Nunito',sans-serif;
  font-weight:800;font-size:14px;padding:0 20px;cursor:pointer}
.ip-pagesearch button:hover{background:#62c25a}