/*
Theme Name: SageRock Capital
Theme URI: https://sagerockcapital.example
Author: SageRock Capital (converted by Claude)
Author URI: https://sagerockcapital.example
Description: Bilingual (English / 中文) one-page theme for SageRock Capital, a real-world-asset innovation firm, plus a fully working blog. Front page preserves the original design with a built-in language toggle; posts and pages use the WordPress block editor. Brand palette and typography registered via the classic add_theme_support API.
Version: 1.6.0
Requires at least: 6.0
Tested up to: 6.5
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: sagerock-capital
Tags: one-page, business, finance, blog, translation-ready, custom-logo, block-styles, wide-blocks
*/

*{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:auto}
  body{background:#0E1A2B}
  ::selection{background:rgba(63,167,255,0.35);color:#F4F7FB}
  input::placeholder,textarea::placeholder{color:#566480}
  .sr-link:hover{color:#7CC5FF !important}
  .sr-card:hover{border-color:rgba(63,167,255,0.45) !important;background:linear-gradient(160deg,rgba(26,46,77,0.85),rgba(14,26,43,0.5)) !important}
  .sr-btn-p:hover{filter:brightness(1.06)}
  .sr-btn-s:hover{border-color:rgba(124,197,255,0.6) !important;background:rgba(124,197,255,0.14) !important}
  .sr-input:focus{outline:none;border-color:#3FA7FF !important;background:rgba(14,26,43,0.9) !important}
  .sr-card{box-shadow:0 16px 36px -22px rgba(0,0,0,0.62)}

  #capabilities{counter-reset:capn}
  #capabilities .sr-card{counter-increment:capn;position:relative;overflow:hidden;padding:34px !important;border-radius:18px !important;background:linear-gradient(165deg,rgba(28,50,84,0.72),rgba(12,24,42,0.5)) !important;border:1px solid rgba(124,197,255,0.16) !important;box-shadow:0 22px 48px -26px rgba(0,0,0,0.6) !important}
  #capabilities .sr-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#2E96FF,#46D6E6)}
  #capabilities .sr-card::after{content:"0" counter(capn);position:absolute;top:24px;right:28px;font-family:'Segoe UI',system-ui,sans-serif;font-weight:800;font-size:38px;line-height:1;letter-spacing:-0.03em;color:transparent;background:linear-gradient(135deg,rgba(95,196,255,0.5),rgba(70,214,230,0.3));-webkit-background-clip:text;background-clip:text;pointer-events:none}
  #capabilities .sr-card:hover{border-color:rgba(124,197,255,0.42) !important;box-shadow:0 30px 58px -24px rgba(46,150,255,0.45) !important;background:linear-gradient(165deg,rgba(34,58,96,0.82),rgba(14,28,48,0.6)) !important}
  #capabilities .sr-card h3{font-size:21px !important;margin-bottom:12px !important}
  #capabilities .sr-card > div:first-child{width:60px !important;height:60px !important;border-radius:16px !important;margin-bottom:22px !important;background:linear-gradient(135deg,#2E96FF,#46D6E6) !important;border:none !important;box-shadow:0 14px 28px -10px rgba(46,150,255,0.65) !important}
  #capabilities .sr-card > div:first-child svg{width:28px;height:28px}
  #capabilities .sr-card > div:first-child svg path,#capabilities .sr-card > div:first-child svg circle,#capabilities .sr-card > div:first-child svg rect{stroke:#FFFFFF}
  #capabilities .sr-card > div:first-child svg circle[fill="#7CC5FF"],#capabilities .sr-card > div:first-child svg rect[fill="#7CC5FF"]{fill:#E6F6FF;stroke:none}

  #sectors{background:radial-gradient(820px 520px at 88% -5%,rgba(46,150,255,0.14),transparent 56%),radial-gradient(640px 520px at 4% 110%,rgba(70,214,230,0.12),transparent 56%),linear-gradient(168deg,#FFFFFF 0%,#EEF4FC 55%,#E1EBF7 100%) !important}
  #sectors > div > div:first-child > span{color:#2173E6 !important}
  #sectors h2,#sectors h3{color:#0A1A2E !important}
  #sectors p{color:#3A4D6B !important}
  #sectors .sr-card{position:relative;overflow:hidden;border-radius:18px !important;background:linear-gradient(165deg,#FFFFFF,#EDF3FC) !important;border:1px solid #DCE6F4 !important;box-shadow:0 20px 44px -26px rgba(18,52,99,0.45) !important}
  #sectors .sr-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#2E96FF,#46D6E6)}
  #sectors .sr-card:hover{border-color:#A6CBF6 !important;box-shadow:0 28px 54px -24px rgba(46,150,255,0.4) !important;background:#FFFFFF !important}
  #sectors .sr-card > div:first-child > span{color:#2173E6 !important}


/* ====================================================================
   Blog & inner-page styling (matches the dark SageRock brand)
   ==================================================================== */
.sr-page{max-width:1240px;margin:0 auto;padding:140px 40px 96px}
.sr-page-narrow{max-width:820px}
.sr-eyebrow{font-family:'Segoe UI',system-ui,sans-serif;font-size:13px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#5FC4FF;margin-bottom:14px}
.sr-page h1.sr-page-title{font-family:'Segoe UI',system-ui,sans-serif;font-size:40px;line-height:1.12;letter-spacing:-.02em;color:#F7FAFF;margin-bottom:18px}
.sr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:28px;margin-top:40px}
.sr-post-card{display:flex;flex-direction:column;border-radius:18px;overflow:hidden;background:linear-gradient(165deg,rgba(28,50,84,.55),rgba(12,24,42,.45));border:1px solid rgba(124,197,255,.16);box-shadow:0 22px 48px -26px rgba(0,0,0,.6);transition:border-color .2s,transform .2s}
.sr-post-card:hover{border-color:rgba(124,197,255,.42);transform:translateY(-3px)}
.sr-post-thumb{display:block;aspect-ratio:16/9;overflow:hidden;background:#0B1729}
.sr-post-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.sr-post-body{padding:26px 26px 30px;display:flex;flex-direction:column;gap:12px;flex:1}
.sr-post-meta{font-family:'Segoe UI',system-ui,sans-serif;font-size:13px;color:#8D9AB5;letter-spacing:.02em}
.sr-post-body h2{font-family:'Segoe UI',system-ui,sans-serif;font-size:21px;line-height:1.3;color:#F4F7FB}
.sr-post-body h2 a{color:inherit;text-decoration:none}
.sr-post-body h2 a:hover{color:#7CC5FF}
.sr-excerpt{font-family:Calibri,'Segoe UI',sans-serif;font-size:15.5px;line-height:1.65;color:#C6D1E4}
.sr-readmore{margin-top:auto;font-family:'Segoe UI',system-ui,sans-serif;font-size:14px;font-weight:600;color:#5FC4FF;text-decoration:none}
.sr-readmore:hover{color:#9CD4FF}
.sr-article{font-family:Calibri,'Segoe UI',sans-serif;color:#D7E0EF;font-size:17px;line-height:1.75}
.sr-article .sr-article-body{margin-top:30px}
.sr-article .sr-article-body > *{margin-bottom:1.1em}
.sr-article h1,.sr-article h2,.sr-article h3,.sr-article h4{font-family:'Segoe UI',system-ui,sans-serif;color:#F4F7FB;line-height:1.25;margin:1.6em 0 .6em}
.sr-article h2{font-size:28px}.sr-article h3{font-size:22px}
.sr-article a{color:#7CC5FF}
.sr-article img,.sr-article figure img{max-width:100%;height:auto;border-radius:14px}
.sr-article blockquote{border-left:3px solid #2E96FF;margin:1.4em 0;padding:.4em 0 .4em 22px;color:#AEB9CE;font-style:italic}
.sr-article code,.sr-article pre{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;background:rgba(11,23,41,.8);border:1px solid rgba(124,197,255,.16);border-radius:8px}
.sr-article pre{padding:18px;overflow:auto}
.sr-article code{padding:2px 6px;font-size:.9em}
.sr-meta-bar{font-family:'Segoe UI',system-ui,sans-serif;font-size:14px;color:#8D9AB5;margin-bottom:8px}
.sr-feat{margin:28px 0;border-radius:18px;overflow:hidden}
.sr-feat img{width:100%;height:auto;display:block}
.sr-pagination{display:flex;gap:12px;flex-wrap:wrap;margin-top:48px}
.sr-pagination .page-numbers{font-family:'Segoe UI',system-ui,sans-serif;font-size:14px;color:#C6D1E4;text-decoration:none;padding:10px 16px;border-radius:10px;border:1px solid rgba(124,197,255,.18);background:rgba(14,26,43,.6)}
.sr-pagination .page-numbers.current,.sr-pagination .page-numbers:hover{border-color:#3FA7FF;color:#F4F7FB;background:rgba(46,150,255,.16)}
.sr-back{display:inline-block;margin-bottom:26px;font-family:'Segoe UI',system-ui,sans-serif;font-size:14px;color:#5FC4FF;text-decoration:none}
.sr-back:hover{color:#9CD4FF}
.sr-search-form{display:flex;gap:10px;max-width:460px;margin-top:8px}
.sr-search-form input[type=search]{flex:1;font-family:'Segoe UI',system-ui,sans-serif;font-size:15px;padding:13px 16px;border-radius:11px;border:1px solid rgba(124,197,255,.22);background:rgba(14,26,43,.7);color:#F4F7FB}
.sr-search-form button{font-family:'Segoe UI',system-ui,sans-serif;font-weight:600;font-size:15px;padding:13px 22px;border:none;border-radius:11px;cursor:pointer;color:#04101F;background:linear-gradient(135deg,#2E96FF,#46D6E6)}
.sr-comments{margin-top:56px;border-top:1px solid rgba(124,197,255,.14);padding-top:36px}
.sr-comments h2,.sr-comments h3{font-family:'Segoe UI',system-ui,sans-serif;color:#F4F7FB}
.sr-comments .comment-list{list-style:none;margin:24px 0;padding:0}
.sr-comments .comment-list li{margin:0 0 18px;padding:18px 20px;border-radius:14px;background:rgba(20,38,64,.5);border:1px solid rgba(124,197,255,.12)}
.sr-comments input[type=text],.sr-comments input[type=email],.sr-comments input[type=url],.sr-comments textarea{width:100%;font-family:'Segoe UI',system-ui,sans-serif;font-size:15px;padding:12px 14px;border-radius:10px;border:1px solid rgba(124,197,255,.22);background:rgba(14,26,43,.7);color:#F4F7FB;margin-bottom:14px}
.sr-comments .submit{font-family:'Segoe UI',system-ui,sans-serif;font-weight:600;padding:13px 26px;border:none;border-radius:11px;cursor:pointer;color:#04101F;background:linear-gradient(135deg,#2E96FF,#46D6E6)}
@media(max-width:768px){.sr-page{padding:120px 22px 72px}.sr-page h1.sr-page-title{font-size:30px}}


/* =============================================================
   WPForms — SageRock dark theme overrides
   ============================================================= */

.sr-wpf-wrapper .wpforms-field input,
.sr-wpf-wrapper .wpforms-field select,
.sr-wpf-wrapper .wpforms-field textarea {
	width: 100%;
	font-family: Calibri, 'Segoe UI', sans-serif;
	font-size: 15px;
	color: #F4F7FB !important;
	background: rgba(14, 26, 43, 0.6) !important;
	border: 1px solid rgba(124, 197, 255, 0.2) !important;
	border-radius: 9px !important;
	padding: 13px 14px !important;
	box-shadow: none !important;
}

.sr-wpf-wrapper .wpforms-field input::placeholder,
.sr-wpf-wrapper .wpforms-field textarea::placeholder {
	color: rgba(195, 210, 228, 0.45);
}

.sr-wpf-wrapper .wpforms-field input:focus,
.sr-wpf-wrapper .wpforms-field select:focus,
.sr-wpf-wrapper .wpforms-field textarea:focus {
	outline: none !important;
	border-color: rgba(124, 197, 255, 0.55) !important;
}

.sr-wpf-wrapper .wpforms-field label.wpforms-field-label {
	display: block;
	font-family: 'Segoe UI', system-ui, sans-serif;
	font-size: 13px;
	font-weight: 600;
	color: #C6D1E4 !important;
	margin-bottom: 8px;
}

.sr-wpf-wrapper .wpforms-field {
	margin-bottom: 0 !important;
	padding-bottom: 0 !important;
}

.sr-wpf-wrapper .wpforms-field-container {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
}

/* Message / textarea field spans full width */
.sr-wpf-wrapper .wpforms-field-textarea {
	grid-column: 1 / -1;
	margin-top: 0 !important;
}

.sr-wpf-wrapper .wpforms-submit-container {
	margin-top: 22px;
}

.sr-wpf-wrapper .wpforms-submit-container button[type="submit"],
.sr-wpf-wrapper button.wpforms-submit {
	width: 100%;
	font-family: 'Segoe UI', system-ui, sans-serif;
	font-size: 16px;
	font-weight: 600;
	color: #0E1A2B !important;
	background: linear-gradient(135deg, #2E96FF, #46D6E6) !important;
	border: none !important;
	border-radius: 10px !important;
	padding: 15px !important;
	cursor: pointer;
	transition: opacity 0.2s;
}

.sr-wpf-wrapper .wpforms-submit-container button[type="submit"]:hover {
	opacity: 0.88;
}

/* Confirmation / thank-you message */
.sr-wpf-wrapper .wpforms-confirmation-container-full,
.sr-wpf-wrapper .wpforms-confirmation-container {
	font-family: Calibri, 'Segoe UI', sans-serif;
	font-size: 18px;
	line-height: 1.6;
	color: #F4F7FB !important;
	background: transparent !important;
	border: none !important;
	text-align: center;
	padding: 40px 10px;
}

/* Validation errors */
.sr-wpf-wrapper .wpforms-error-container,
.sr-wpf-wrapper label.wpforms-error {
	color: #FF7070 !important;
	font-size: 12px;
	margin-top: 4px;
}


/* =============================================================
   RESPONSIVE / MOBILE
   The original design was desktop-first with fixed multi-column
   grids, nowrap headings, and 40px side padding set via inline
   styles. These rules override those inline styles at narrow
   widths so the site reflows cleanly on phones and tablets.
   Inline styles win on specificity, so !important is required.
   ============================================================= */

/* ---- Tablet / small laptop: collapse 3-col to 2-col ---- */
@media (max-width: 1024px) {
	.sr-grid-3 {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

/* ---- Phones (<=768px): single column everywhere ---- */
@media (max-width: 768px) {

	/* Every multi-column grid stacks to one column */
	.sr-grid-3,
	.sr-grid-2,
	.sr-grid-2-wide,
	.sr-footer-grid {
		grid-template-columns: 1fr !important;
		gap: 20px !important;
	}

	/* Pillars (Traditional Finance + Blockchain + RWA) stack vertically;
	   hide the "+" separators which only make sense horizontally */
	.sr-pillars {
		grid-template-columns: 1fr !important;
		gap: 18px !important;
		max-width: 320px !important;
	}
	.sr-pillars > span {
		display: none !important;
	}

	/* Release nowrap headings/text so nothing is clipped off-screen.
	   The design uses white-space:nowrap on many headlines and labels. */
	[style*="white-space:nowrap"] {
		white-space: normal !important;
	}

	/* Reduce the heavy 40px side padding on every section */
	[style*="padding:170px 40px 120px"] { padding: 120px 22px 80px !important; }
	[style*="padding:100px 40px"]       { padding: 64px 22px !important; }
	[style*="padding:88px 40px 80px"]   { padding: 56px 22px 56px !important; }
	[style*="padding:84px 40px 100px"]  { padding: 56px 22px 72px !important; }
	[style*="padding:64px 40px"]        { padding: 48px 22px !important; }
	[style*="padding:140px 40px 70px"]  { padding: 110px 22px 56px !important; }

	/* Inner card padding trims so text isn't cramped */
	.sr-card,
	.sr-post {
		padding: 22px !important;
	}

	/* Cap oversized clamp() headline sizes on tiny screens */
	h1[style*="clamp"] { font-size: 30px !important; line-height: 1.12 !important; }
	h2[style*="clamp"] { font-size: 25px !important; line-height: 1.15 !important; }

	/* WPForms: the two-up field rows go single column on phones */
	.sr-wpf-wrapper .wpforms-field-container {
		grid-template-columns: 1fr !important;
	}
}

/* ---- Mobile navigation (<=900px) ----
   Swap the overflowing inline link row for a hamburger menu.
   The desktop links hide, the burger button shows, and tapping
   it reveals the .sr-mobile-menu panel (handled in sagerock.js). */
@media (max-width: 900px) {
	.sr-nav-links {
		display: none !important;
	}
	.sr-burger {
		display: inline-flex !important;
	}
	.sr-nav-right {
		gap: 12px !important;
	}
}

/* Hamburger is hidden on desktop (default inline style is display:none;
   this keeps it hidden above the breakpoint even if inline is overridden). */
@media (min-width: 901px) {
	.sr-burger { display: none !important; }
	.sr-mobile-menu { display: none !important; }
}

/* Prevent any residual horizontal scrolling site-wide on mobile */
@media (max-width: 768px) {
	html, body {
		overflow-x: hidden !important;
		max-width: 100% !important;
	}
}


/* Partner grid: centered flex, 5 across on desktop, fewer per row on smaller
   screens. Tiles keep a fixed basis so partial rows center instead of
   stretching; overrides below widen the basis at each breakpoint. */
@media (max-width: 900px) {
	.sr-partner-grid > div {
		flex-basis: calc((100% - 32px) / 3) !important;
		max-width: calc((100% - 32px) / 3) !important;
	}
}
@media (max-width: 560px) {
	.sr-partner-grid > div {
		flex-basis: calc((100% - 16px) / 2) !important;
		max-width: calc((100% - 16px) / 2) !important;
	}
}

/* Force partner tiles to a clear landscape rectangle (wider than tall).
   Placed here (versioned stylesheet) so it cache-busts reliably and overrides
   any stale inline height from earlier cached page renders. */
.sr-partner-grid > div {
	aspect-ratio: 16 / 9 !important;
	min-height: 0 !important;
	height: auto !important;
}