/* =====================================================================
   New Post 1 - Bit68  —  version-4 content styling
   Header & footer come from the active theme. Only the post content
   (and especially its tables) is styled here.
   ===================================================================== */

/* ── Article container ────────────────────────────────── */
.bit68-npt {
	width: 100%;
	background: #ffffff;
}
.bit68-npt__inner {
	max-width: 860px;
	margin: 0 auto;
	padding: 44px 20px 48px;
}
.bit68-npt__inner > *:first-child {
	margin-top: 0;
}

/* ── Hero (reh-hero) ──────────────────────────────────── */
.bit68-hero {
	max-width: 1200px;
	margin: 24px auto 0;
	padding: 0 20px;
}
.reh-hero{position:relative;width:100%;height:clamp(420px,72vh,780px);overflow:hidden;border-radius:18px;box-shadow:0 30px 80px -20px rgba(8,20,40,.45),0 10px 30px -10px rgba(8,20,40,.3);isolation:isolate;background:#0a1628;margin:0}
.reh-hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;transform:scale(1.08);animation:rehKenBurns 18s ease-in-out infinite alternate;will-change:transform;max-width:none}
@keyframes rehKenBurns{0%{transform:scale(1.08) translate(0,0)}100%{transform:scale(1.18) translate(-2%,-1.5%)}}
.reh-hero__veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,20,40,.15) 0%,rgba(8,20,40,.35) 45%,rgba(8,20,40,.82) 100%),linear-gradient(115deg,rgba(0,72,160,.35) 0%,rgba(0,0,0,0) 55%);pointer-events:none}
.reh-hero__grain{position:absolute;inset:0;opacity:.08;pointer-events:none;mix-blend-mode:overlay;background-image:radial-gradient(rgba(255,255,255,.6) 1px,transparent 1px);background-size:3px 3px}
.reh-hero__content{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(20px,4vw,56px);color:#fff;z-index:2}
.reh-hero__chip{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;padding:8px 16px;border-radius:999px;background:rgba(255,255,255,.12);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.22);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#eaf3ff;opacity:0;transform:translateY(14px);animation:rehRise .9s .15s ease forwards}
.reh-hero__chip .dot{width:8px;height:8px;border-radius:50%;background:#22d3a3;box-shadow:0 0 0 0 rgba(34,211,163,.65);animation:rehPulse 2.2s infinite}
@keyframes rehPulse{0%{box-shadow:0 0 0 0 rgba(34,211,163,.55)}70%{box-shadow:0 0 0 12px rgba(34,211,163,0)}100%{box-shadow:0 0 0 0 rgba(34,211,163,0)}}
.reh-hero__title{margin:18px 0 10px;font-size:clamp(26px,4.2vw,52px);line-height:1.08;font-weight:800;letter-spacing:-.02em;text-shadow:0 4px 24px rgba(0,0,0,.45);max-width:980px;opacity:0;transform:translateY(18px);animation:rehRise 1s .3s ease forwards;color:#fff}
.reh-hero__title .accent{background:linear-gradient(90deg,#ffd56b 0%,#ff9d4d 50%,#ffd56b 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.reh-hero__sub{margin:0;font-size:clamp(14px,1.4vw,18px);font-weight:400;color:#d5e3f5;max-width:720px;opacity:0;transform:translateY(18px);animation:rehRise 1s .45s ease forwards}
.reh-hero__stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-top:clamp(20px,3vw,32px);max-width:880px;opacity:0;transform:translateY(20px);animation:rehRise 1s .6s ease forwards}
.reh-stat{position:relative;padding:14px 16px;border-radius:14px;background:rgba(255,255,255,.09);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.18);overflow:hidden;transition:transform .35s ease,background .35s ease,border-color .35s ease}
.reh-stat:hover{transform:translateY(-4px);background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.32)}
.reh-stat::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,213,107,.18),transparent 60%);opacity:0;transition:opacity .35s}
.reh-stat:hover::before{opacity:1}
.reh-stat__num{font-size:clamp(18px,2vw,24px);font-weight:800;letter-spacing:-.01em;color:#fff;line-height:1}
.reh-stat__label{margin-top:6px;font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:#b8cae3}
.reh-hero__scroll{position:absolute;right:clamp(16px,3vw,40px);bottom:clamp(16px,3vw,32px);width:36px;height:56px;border:2px solid rgba(255,255,255,.55);border-radius:20px;display:flex;justify-content:center;padding-top:8px;z-index:2;opacity:0;animation:rehRise 1s .8s ease forwards}
.reh-hero__scroll::after{content:"";width:4px;height:8px;background:#fff;border-radius:2px;animation:rehScroll 1.8s ease-in-out infinite}
@keyframes rehScroll{0%{transform:translateY(0);opacity:1}80%{transform:translateY(22px);opacity:0}100%{transform:translateY(0);opacity:0}}
.reh-hero__corner{position:absolute;top:clamp(16px,3vw,28px);right:clamp(16px,3vw,28px);display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:12px;background:rgba(8,20,40,.55);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.16);color:#fff;font-size:12px;font-weight:600;letter-spacing:.06em;z-index:2;opacity:0;transform:translateY(-10px);animation:rehRise .9s .35s ease forwards}
.reh-hero__corner svg{width:14px;height:14px;color:#ffd56b}
@keyframes rehRise{to{opacity:1;transform:translateY(0)}}
@media (max-width:640px){.reh-hero{height:clamp(380px,75vh,560px);border-radius:14px}.reh-hero__corner{display:none}}
@media (prefers-reduced-motion:reduce){.reh-hero__img{animation:none}.reh-hero__chip,.reh-hero__title,.reh-hero__sub,.reh-hero__stats,.reh-hero__scroll,.reh-hero__corner{animation:none;opacity:1;transform:none}.reh-hero__scroll::after{animation:none}.reh-stat:hover{transform:none}}

/* ── Tables — exactly as version 4 ────────────────────────
   Applies to the version-4 markup (.d5v2-tw / .d5v2-table) and to any
   plain table inserted through the editor (incl. WP block tables).      */
.bit68-npt .d5v2-tw,
.bit68-npt .bit68-tw,
.bit68-npt figure.wp-block-table {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin: 28px 0;
}
.bit68-npt table {
	width: 100%;
	border-collapse: collapse;
	margin: 28px 0;
}
.bit68-npt .d5v2-tw table,
.bit68-npt .bit68-tw table,
.bit68-npt figure.wp-block-table table {
	margin: 0;
}

/* Header row (uses <thead>; WP block tables with a header section qualify).
   Content pasted from Word/Docs puts <td> cells in <thead>, so both count. */
.bit68-npt table thead tr {
	background: #165351;
}
.bit68-npt table thead th,
.bit68-npt table thead td {
	padding: 13px 20px;
	text-align: center;
	font-family: Avenir, sans-serif;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #fff !important;
	border: none;
}

/* Body rows */
.bit68-npt table tbody tr {
	border-bottom: 1px solid #e6e6e6;
	transition: background .15s;
}
.bit68-npt table tbody tr:nth-child(even) {
	background: #f7f7f7;
}
.bit68-npt table tbody tr:hover {
	background: #edf3f3;
}
.bit68-npt table tbody td {
	padding: 14px 20px;
	font-family: Avenir, sans-serif;
	font-size: 15px;
	font-weight: 300;
	color: #555555;
	vertical-align: top;
	line-height: 1.65;
	border: none;
}
.bit68-npt table tbody td:first-child {
	font-weight: 500;
	color: #1E1E1E;
}

/* Body cells keep the version-4 left-aligned look; header cells stay centered
   even when the WP editor adds inline alignment to the inner <p>. */
.bit68-npt table td p {
	margin: 0;
	text-align: left !important;
}
.bit68-npt table th p,
.bit68-npt table thead td p {
	margin: 0;
	text-align: center !important;
	text-transform: uppercase;
	color: #fff !important;
}
/* Keep header text white even when the theme or editor colors inner
   elements (strong, span, links, inline color styles). */
.bit68-npt table thead th *,
.bit68-npt table thead td *,
.bit68-npt table:not(:has(thead)) tbody tr:first-child td * {
	color: #fff !important;
}

/* Fallback: when a table has no <thead>, force its first row to look like the
   header (teal bg, white, centered, uppercase). Tables that already have a
   <thead> are excluded, so they are not affected. */
.bit68-npt table:not(:has(thead)) tbody tr:first-child,
.bit68-npt table:not(:has(thead)) tbody tr:first-child:hover {
	background: #165351;
}
.bit68-npt table:not(:has(thead)) tbody tr:first-child td,
.bit68-npt table:not(:has(thead)) tbody tr:first-child td:first-child {
	padding: 13px 20px;
	text-align: center;
	font-family: Avenir, sans-serif;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #fff !important;
}
.bit68-npt table:not(:has(thead)) tbody tr:first-child td p {
	margin: 0;
	text-align: center !important;
	text-transform: uppercase;
	font-weight: 700;
	color: #fff !important;
}

/* Tighter cells on phones so more of a wide table shows before it scrolls. */
@media (max-width: 767px) {
	.bit68-npt table thead th,
	.bit68-npt table thead td {
		padding: 11px 12px;
	}
	.bit68-npt table tbody td {
		padding: 12px;
		font-size: 14px;
		line-height: 1.55;
	}
}