/*
Theme Name: 360Trader Blog
Theme URI: https://boom360trader.com/
Description: 360Trader design language for the blog. Child theme of Twenty Twenty-Five. Dark, Poppins and JetBrains Mono, b360 blue and gold. Built so posts arriving through the REST API as plain blocks still come out on brand.
Author: Stallion Informatics
Author URI: https://stallioninformatics.com/
Template: twentytwentyfive
Version: 1.2.0
Requires at least: 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: b360-blog
*/

/* ===================================================================
   Why the visual weight lives here rather than only in theme.json:
   theme.json merges with the parent's slugs, and if a parent slug name
   ever changes, blocks silently fall back to default colours. These
   rules do not depend on slug names, so the blog stays on brand either
   way. theme.json still carries the palette and type scale so the
   editor shows the right swatches.
   =================================================================== */

:root{
  --b360-black:   #000000;
  --b360-bg:      #04060f;
  --b360-surface: #0a0d1a;
  --b360-blue:    #3051a5;
  --b360-blue-l:  #4963a6;
  --b360-gold:    #d1b206;
  --b360-green:   #33ce36;
  --b360-red:     #e23636;
  --b360-text:    rgba(255,255,255,.84);
  --b360-dim:     rgba(255,255,255,.60);
  --b360-line:    rgba(48,81,165,.24);
  --b360-r:       3px;
  --b360-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --b360-sans:    "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ------------------------------------------------------------ base */
body{
  background:var(--b360-bg);
  color:var(--b360-text);
  font-family:var(--b360-sans);
  font-size:16.5px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
.wp-site-blocks{ overflow-x:clip; }

h1,h2,h3,h4,h5,h6,
.wp-block-post-title,
.wp-block-site-title{
  font-family:var(--b360-sans);
  color:#fff;
  font-weight:800;
  line-height:1.15;
  letter-spacing:-.01em;
}
h1,.wp-block-post-title{ font-size:clamp(28px,4.6vw,46px); margin:0 0 .5em; }
h2{ font-size:clamp(23px,3.2vw,33px); margin:1.8em 0 .5em; }
h3{ font-size:clamp(19px,2.4vw,24px); margin:1.6em 0 .45em; font-weight:700; }
h4{ font-size:17px; margin:1.4em 0 .4em; font-weight:700; }

p{ margin:0 0 1.25em; }
strong,b{ color:#fff; font-weight:600; }

a{ color:var(--b360-blue-l); text-decoration:none; }
a:hover{ color:#fff; text-decoration:underline; }

/* post body links get an underline so they are findable in long text */
.wp-block-post-content a:not(.wp-block-button__link){
  border-bottom:1px solid rgba(73,99,166,.5);
}
.wp-block-post-content a:not(.wp-block-button__link):hover{
  border-bottom-color:#fff;
}

/* ============================================================ HEADER
   Our own header template part. Twenty Twenty-Five's default header
   prints the Site Title as text, which on this install is the long SEO
   title. We replace it with the logo and a three-item menu.
   ================================================================== */
.b360-header{
  border-bottom:1px solid var(--b360-line);
  background:rgba(4,6,15,.94);
  position:sticky; top:0; z-index:40;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.b360-header-in{
  max-width:1100px; margin:0 auto; padding:12px 20px;
  display:flex; align-items:center; justify-content:space-between; gap:18px;
}
/* The logo file is small, so cap it by HEIGHT and let width follow.
   Capping by width alone is what makes it look squashed or fuzzy. */
.b360-header .wp-block-site-logo{ line-height:0; flex:0 0 auto; }
.b360-header .wp-block-site-logo img,
.b360-header .wp-block-site-logo a img{
  display:block;
  height:auto; width:auto;
  max-height:40px; max-width:190px;
  object-fit:contain;
  image-rendering:auto;
}
/* Fallback if no Site Logo is set: show the site title instead of nothing */
.b360-header .wp-block-site-title a{
  font-family:var(--b360-sans); font-weight:800; font-size:19px;
  color:#fff; letter-spacing:-.01em;
}

.b360-nav{ flex:0 1 auto; }
.b360-header .wp-block-navigation{ gap:26px; }
.b360-header .wp-block-navigation a{
  font-size:14px; font-weight:600; color:var(--b360-dim);
  padding:10px 0; display:inline-flex; align-items:center; min-height:44px;
}
.b360-header .wp-block-navigation a:hover,
.b360-header .wp-block-navigation .current-menu-item a{
  color:#fff; text-decoration:none;
}
/* hamburger + overlay on phones */
.b360-header .wp-block-navigation__responsive-container-open,
.b360-header .wp-block-navigation__responsive-container-close{
  color:#fff; padding:10px; min-width:44px; min-height:44px;
}
.b360-header .wp-block-navigation__responsive-container.is-menu-open{
  background:var(--b360-bg); padding:28px 22px;
}
.b360-header .wp-block-navigation__responsive-container.is-menu-open a{
  font-size:20px; color:#fff;
}

/* ============================================================ FOOTER
   Mirrors the main site's bottom bar: copyright + Powered by on the
   left, legal links on the right, risk disclaimer underneath.
   ================================================================== */
.b360-footer{
  border-top:1px solid var(--b360-line);
  background:#02040a;
  margin-top:72px;
}
.b360-footer-in{ max-width:1100px; margin:0 auto; padding:34px 20px 40px; }
.b360-footer-bar{
  display:flex; flex-wrap:wrap; gap:14px 24px;
  align-items:flex-start; justify-content:space-between;
}
.b360-footer p{ margin:0; }
.b360-copy{ font-size:13.5px; color:var(--b360-dim); }
.b360-powered{ font-size:13.5px; color:var(--b360-dim); margin-top:6px !important; }
.b360-powered a{ color:var(--b360-dim); font-weight:600; }
.b360-powered a:hover{ color:#fff; }
.b360-footer-links{ font-size:13.5px; color:var(--b360-dim); }
.b360-footer-links a{ color:var(--b360-dim); font-weight:600; }
.b360-footer-links a:hover{ color:#fff; }
.b360-risk{
  margin-top:26px !important; padding-top:20px;
  border-top:1px solid rgba(48,81,165,.16);
  font-size:11.5px; line-height:1.75; color:rgba(255,255,255,.42);
}

/* ---------------------------------------------------- page masthead */
.b360-main{ padding-top:44px; }
.b360-masthead{ margin-bottom:34px; }
.b360-masthead-h{ margin:0 0 10px; }
.b360-masthead-p{ color:var(--b360-dim); font-size:15px; max-width:640px; }
.b360-empty{ color:var(--b360-dim); }
.b360-404{ padding-top:72px; padding-bottom:40px; }
.b360-posthead{ margin-bottom:26px; }
.b360-meta{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:12px; }
.b360-postnav{ display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; }
.b360-postnav a{ font-size:13.5px; font-weight:600; }
.b360-hero-img{ margin-bottom:28px; }

/* ---------------------------------------------------- post meta */
.wp-block-post-date,
.wp-block-post-author-name,
.wp-block-post-terms,
.wp-block-post-author{
  font-family:var(--b360-mono);
  font-size:11.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--b360-dim);
}
.wp-block-post-date a,
.wp-block-post-terms a{ color:var(--b360-gold); }

/* ====================================================== POST CARDS
   The blog index is a two-column card grid. The newest post takes the
   full width as a lead card so the page has a focal point instead of a
   flat stack. Cards show an EXCERPT, never the full post.
   ================================================================== */
.b360-cards{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:20px;
}
.b360-cards > li,
.wp-block-post-template > li{
  display:flex; flex-direction:column; min-width:0;
  background:var(--b360-surface);
  border:1px solid var(--b360-line);
  border-radius:var(--b360-r);
  padding:22px 24px;
  position:relative; overflow:hidden;
  transition:border-color .2s ease, transform .2s ease, background .2s ease;
}
.b360-cards > li::after{
  content:""; position:absolute; inset:0 auto auto 0; height:2px; width:100%;
  background:linear-gradient(90deg, var(--b360-blue-l), transparent 70%);
  opacity:.45; transition:opacity .22s ease;
}
.b360-cards > li:hover,
.wp-block-post-template > li:hover{
  border-color:var(--b360-blue-l);
  transform:translateY(-2px);
}
.b360-cards > li:hover::after{ opacity:1; }

/* lead card: newest post, full width, larger type, gold rule */
.b360-cards > li:first-child{
  grid-column:1 / -1;
  padding:28px 30px;
  background:linear-gradient(158deg, rgba(48,81,165,.14), var(--b360-surface) 70%);
}
.b360-cards > li:first-child::after{
  background:linear-gradient(90deg, var(--b360-gold), transparent 70%);
}
.b360-cards > li:first-child:hover{ border-color:rgba(209,178,6,.5); }
.b360-cards > li:first-child .wp-block-post-title{
  font-size:clamp(23px,3.1vw,32px);
}
.b360-cards > li:first-child .wp-block-post-excerpt__excerpt{
  font-size:15.5px; max-width:60ch;
}

.b360-card-img{ margin:0 0 16px; }
.b360-card-img img{ width:100%; height:auto; display:block; }

.b360-card-meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-bottom:10px;
}
/* category pill */
.b360-pill,
.b360-card-meta .wp-block-post-terms{
  display:inline-flex; align-items:center;
  font-family:var(--b360-mono); font-size:11px;
  letter-spacing:.13em; text-transform:uppercase;
  border:1px solid rgba(209,178,6,.3); background:rgba(209,178,6,.1);
  border-radius:3px; padding:0 10px; color:var(--b360-gold);
  min-height:32px;
}
/* the anchor fills the pill, so the whole pill is the hit area, not the text */
.b360-pill a{
  color:var(--b360-gold); display:inline-flex; align-items:center;
  min-height:32px; padding:0 1px;
}
.b360-pill a:hover{ color:#fff; text-decoration:none; }

.wp-block-post-template .wp-block-post-title{
  font-size:clamp(19px,2.4vw,23px); margin:.1em 0 .4em; line-height:1.22;
}
.wp-block-post-template .wp-block-post-title a{ color:#fff; }
.wp-block-post-template .wp-block-post-title a:hover{ color:var(--b360-gold); text-decoration:none; }
.wp-block-post-excerpt{ margin:0; }
.wp-block-post-excerpt__excerpt{ color:var(--b360-dim); font-size:14.5px; line-height:1.65; }
.wp-block-read-more,
.wp-block-post-excerpt__more-link{
  display:inline-flex; align-items:center; align-self:flex-start;
  margin-top:auto; padding-top:10px; min-height:44px;
  font-size:13px; font-weight:600; color:var(--b360-gold);
}
.wp-block-read-more:hover,
.wp-block-post-excerpt__more-link:hover{ color:#fff; text-decoration:none; }

/* category filter row under the masthead */
.b360-cats ul,
ul.b360-cats{
  list-style:none; margin:22px 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:8px;
}
.b360-cats li{ margin:0; }
.b360-cats a{
  display:inline-flex; align-items:center; min-height:44px;
  font-family:var(--b360-mono); font-size:11px;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--b360-dim); border:1px solid var(--b360-line);
  background:rgba(255,255,255,.02);
  border-radius:3px; padding:0 13px;
  transition:border-color .2s ease, color .2s ease;
}
.b360-cats a:hover{ color:#fff; border-color:var(--b360-blue-l); text-decoration:none; }

/* ================================================== AUTHORS: HIDDEN
   This blog does not show bylines anywhere. The templates contain no
   author block, and this is the belt-and-braces layer for anything a
   plugin, a pattern or a pasted block tries to render.
   ================================================================== */
.wp-block-post-author,
.wp-block-post-author-name,
.wp-block-post-author-biography,
.wp-block-avatar,
.author,
.byline,
.entry-meta .author,
.post-author,
.taxonomy-author{
  display:none !important;
}

/* ------------------------------------------------------- figures */
.wp-block-image img,
.wp-block-post-featured-image img{
  border-radius:var(--b360-r);
  border:1px solid var(--b360-line);
}
figcaption,
.wp-element-caption{
  font-size:12.5px; color:var(--b360-dim); text-align:center; margin-top:10px;
}

/* ------------------------------------------------------- quotes */
blockquote,
.wp-block-quote{
  border-left:3px solid var(--b360-gold);
  background:rgba(209,178,6,.07);
  margin:1.8em 0; padding:16px 20px;
  border-radius:0 var(--b360-r) var(--b360-r) 0;
}
blockquote p{ margin:0 0 .6em; color:#fff; }
blockquote cite,
.wp-block-quote cite{
  font-style:normal; font-size:12.5px; color:var(--b360-dim);
  font-family:var(--b360-mono);
}
.wp-block-pullquote{
  border-top:1px solid var(--b360-line);
  border-bottom:1px solid var(--b360-line);
  background:transparent; padding:28px 0;
}

/* --------------------------------------------------------- lists */
.wp-block-post-content ul,
.wp-block-post-content ol{ padding-left:1.3em; margin:0 0 1.25em; }
.wp-block-post-content li{ margin:0 0 .5em; }
.wp-block-post-content ul li::marker{ color:var(--b360-blue-l); }
.wp-block-post-content ol li::marker{ color:var(--b360-blue-l); font-family:var(--b360-mono); font-size:.9em; }

/* ---------------------------------------------------------- code */
code, kbd, samp{
  font-family:var(--b360-mono); font-size:.88em;
  background:rgba(48,81,165,.16);
  border:1px solid var(--b360-line);
  border-radius:2px; padding:1px 5px; color:#fff;
}
pre, .wp-block-code{
  font-family:var(--b360-mono); font-size:13px; line-height:1.6;
  background:#06080f; border:1px solid var(--b360-line);
  border-radius:var(--b360-r); padding:16px 18px;
  overflow-x:auto; color:var(--b360-text);
}
pre code, .wp-block-code code{ background:none; border:0; padding:0; }

/* --------------------------------------------------------- table */
.wp-block-table table{ border-collapse:collapse; width:100%; font-size:14px; }
.wp-block-table th{
  background:var(--b360-blue); color:#fff; font-weight:700;
  text-align:left; padding:10px 13px;
  font-family:var(--b360-mono); font-size:11.5px;
  letter-spacing:.06em; text-transform:uppercase;
}
.wp-block-table td{ padding:10px 13px; border-top:1px solid var(--b360-line); }
.wp-block-table tbody tr:nth-child(even) td{ background:rgba(255,255,255,.022); }
.wp-block-table figcaption{ text-align:left; }

/* -------------------------------------------------------- buttons */
.wp-block-button__link,
.wp-element-button,
button, input[type=submit]{
  background:var(--b360-blue); color:#fff;
  border:1px solid var(--b360-blue-l); border-radius:var(--b360-r);
  padding:12px 22px; font-family:var(--b360-sans);
  font-size:14px; font-weight:600; min-height:44px;
  transition:background .18s ease;
}
.wp-block-button__link:hover,
.wp-element-button:hover,
button:hover{ background:var(--b360-blue-l); color:#fff; text-decoration:none; }
.wp-block-button.is-style-outline .wp-block-button__link{
  background:transparent; color:var(--b360-gold);
  border-color:rgba(209,178,6,.45);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover{
  background:rgba(209,178,6,.14); color:#fff;
}

/* --------------------------------------------------------- rules */
hr, .wp-block-separator{
  border:0; height:1px; background:var(--b360-line);
  margin:2.4em 0; opacity:1;
}

/* ---------------------------------------------------------- forms */
input[type=text], input[type=email], input[type=search],
input[type=url], textarea, select{
  background:rgba(255,255,255,.03); color:var(--b360-text);
  border:1px solid var(--b360-line); border-radius:var(--b360-r);
  padding:11px 13px; font-family:var(--b360-sans); font-size:14px;
  width:100%; min-height:44px;
}
input:focus, textarea:focus, select:focus{
  outline:2px solid var(--b360-gold); outline-offset:2px;
}
::placeholder{ color:rgba(255,255,255,.35); }

/* ------------------------------------------------------ pagination */
.wp-block-query-pagination a,
.wp-block-query-pagination .page-numbers{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:44px; min-height:44px; padding:0 12px;
  border:1px solid var(--b360-line); border-radius:var(--b360-r);
  font-family:var(--b360-mono); font-size:13px; color:var(--b360-text);
}
.wp-block-query-pagination .current{
  background:var(--b360-blue); border-color:var(--b360-blue-l); color:#fff;
}
.wp-block-query-pagination a:hover{ border-color:var(--b360-blue-l); text-decoration:none; }

/* ------------------------------------------------------ utilities */
.b360-kicker{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--b360-mono); font-size:11px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--b360-gold);
  border:1px solid rgba(209,178,6,.3); background:rgba(209,178,6,.1);
  border-radius:var(--b360-r); padding:6px 12px;
}
/* drop this on the last paragraph of every post */
.b360-disclaimer{
  font-size:12.5px; color:var(--b360-dim); line-height:1.6;
  border-top:1px solid var(--b360-line); padding-top:16px; margin-top:34px;
}

@media (max-width:782px){
  .b360-header-in{ padding:10px 16px; }
  .b360-header .wp-block-site-logo img{ max-height:34px; max-width:150px; }
}
@media (max-width:760px){
  .b360-cards{ grid-template-columns:minmax(0,1fr); gap:16px; }
  .b360-cards > li:first-child{ padding:22px 24px; }
}
@media (max-width:600px){
  body{ font-size:16px; }
  .b360-main{ padding-top:30px; }
  .b360-cards > li,
  .b360-cards > li:first-child{ padding:18px 18px 16px; }
  .b360-cats ul, ul.b360-cats{ margin-top:18px; }
  .b360-footer{ margin-top:48px; }
  .b360-footer-in{ padding:28px 16px 34px; }
  .b360-footer-bar{ flex-direction:column; gap:12px; }
  .b360-risk{ font-size:11px; }
  .wp-block-post-template > li{ padding:18px; }
  .wp-block-buttons{ width:100%; }
  .wp-block-button{ width:100%; }
  .wp-block-button__link, .wp-element-button{ width:100%; text-align:center; }
  .wp-block-table{ overflow-x:auto; }
}
@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; animation:none !important; }
}