/*
Theme Name: R. U. Asking
Theme URI: https://ruasking.com
Author: R. U. Asking
Description: Block theme for a NetSuite practitioner knowledge hub. Centred masthead, gradient hero, feature columns and article cards — built on system fonts with no page builder and no JavaScript framework, so it stays fast on the phones people read newsletters on.
Version: 2.2.1
Requires at least: 6.5
Tested up to: 7.0
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: ruasking
Tags: blog, one-column, block-patterns, full-site-editing, accessibility-ready
*/

/* ==========================================================================
   Design: "Direction B" — the familiar look, rebuilt properly.
   Everything here is hand-written CSS. No framework, no webfonts.
   Mobile rules at the bottom fix the two faults found by rendering the
   mockups at 360/390/768px: a form that overflowed the viewport, and
   navigation that disappeared below 860px.
   ========================================================================== */

:root{
	--ru-navy:#12395a;
	--ru-accent:#0c71c3;
	--ru-sky:#9ad9ef;
	--ru-ink:#12293c;
	--ru-body:#3a4a58;
	--ru-muted:#69798a;
	--ru-surface:#f5f9fc;
	--ru-rule:#e2eaf1;
}

body{ -webkit-font-smoothing:antialiased; }

/* ---- masthead: centred logo over centred nav ---------------------------- */

.ru-head{
	background:#fff;
	border-bottom:1px solid var(--ru-rule);
}
.ru-head-in{
	display:flex; flex-direction:column; align-items:center;
	gap:10px; padding:20px 0 0;
}
.ru-logo img{ display:block; height:56px; width:auto; }
.ru-nav{ display:flex; gap:34px; padding:12px 0; flex-wrap:wrap; justify-content:center; }
.ru-nav a{
	color:var(--ru-ink); text-decoration:none; font-weight:500; font-size:15px;
	padding-bottom:12px; border-bottom:2px solid transparent;
}
.ru-nav a:hover,.ru-nav a:focus-visible{ color:var(--ru-accent); border-bottom-color:var(--ru-accent); }

/* ---- hero --------------------------------------------------------------- */

.ru-hero{
	background:linear-gradient(135deg,#2b87da 0%,#1a5f9e 48%,#12395a 100%);
	color:#fff; text-align:center; padding:72px 0 0; overflow:hidden;
}
.ru-hero h1{ color:#fff; font-weight:800; letter-spacing:-.02em; line-height:1.16; margin:0; }
.ru-hero .ru-sub{ color:#d6e9f8; font-size:19px; max-width:40em; margin:20px auto 0; }
.ru-cta{ margin:32px 0 8px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.ru-btn,.ru-btn-o{
	display:inline-block; text-decoration:none; font-weight:700; border-radius:40px; font-size:16px;
}
.ru-btn{ background:#fff; color:var(--ru-navy); padding:15px 30px; }
.ru-btn:hover{ background:var(--ru-sky); color:var(--ru-navy); }
.ru-btn-o{ border:2px solid rgba(255,255,255,.6); color:#fff; padding:13px 28px; }
.ru-btn-o:hover{ border-color:#fff; background:rgba(255,255,255,.1); color:#fff; }

.ru-hero-shot{
	max-width:880px; margin:44px auto -80px;
	border-radius:10px 10px 0 0; overflow:hidden;
	box-shadow:0 -6px 60px rgba(0,0,0,.35);
	border:1px solid rgba(255,255,255,.2); border-bottom:0;
}
.ru-hero-shot img{ display:block; width:100%; height:auto; }

/* the section that sits under the overlapping hero screenshot */
.ru-pad-top{ padding-top:118px !important; }

/* ---- feature columns ---------------------------------------------------- */

.ru-feat{ text-align:center; }
.ru-feat .ru-ic{
	width:64px; height:64px; margin:0 auto 18px; border-radius:50%;
	background:linear-gradient(140deg,#e8f4fd,#c9e6f8);
	display:flex; align-items:center; justify-content:center;
	font-size:26px; color:var(--ru-accent); line-height:1;
}
.ru-feat h3{ font-size:20px; margin:0 0 9px; }
.ru-feat p{ font-size:15.5px; color:var(--ru-muted); margin:0; }

/* ---- pull quote band ---------------------------------------------------- */

.ru-quote{ background:var(--ru-navy); color:#fff; text-align:center; padding:64px 0; }
.ru-quote p{
	font-size:25px; color:#fff; max-width:26em; margin:0 auto;
	font-weight:300; line-height:1.45;
}
.ru-quote .ru-by{
	color:var(--ru-sky); font-size:14px; letter-spacing:.1em; text-transform:uppercase;
	margin-top:20px; font-weight:700;
}

/* ---- article cards ------------------------------------------------------ */

.ru-cards .wp-block-post{
	background:#fff; border:1px solid var(--ru-rule); border-radius:10px;
	overflow:hidden; transition:box-shadow .15s, transform .15s;
}
.ru-cards .wp-block-post:hover{
	box-shadow:0 16px 40px rgba(18,57,90,.13); transform:translateY(-3px);
}
.ru-cards .wp-block-post-featured-image{ margin:0; }
.ru-cards .wp-block-post-featured-image img{
	width:100%; height:180px; object-fit:cover; object-position:top;
	display:block; border-bottom:1px solid var(--ru-rule); border-radius:0;
}
.ru-cards .ru-card-body{ padding:22px; }
.ru-cards .wp-block-post-title{ font-size:20px; margin:0 0 8px; }
.ru-cards .wp-block-post-title a{ text-decoration:none; }
.ru-cards .wp-block-post-excerpt__excerpt{ font-size:15px; color:var(--ru-muted); margin:0; }
.ru-meta{ font-size:13px; color:var(--ru-muted); }
.ru-meta a{ text-decoration:none; }

/* ---- newsletter --------------------------------------------------------- */

.ru-signup{
	display:flex; gap:10px; max-width:520px; margin:26px auto 0; flex-wrap:wrap;
}
.ru-signup input[type=email]{
	flex:1 1 220px; min-width:0; padding:15px 16px;
	border:1px solid var(--ru-rule); border-radius:40px;
	font:inherit; font-size:16px; /* 16px stops iOS Safari zooming on focus */
	color:var(--ru-ink); background:#fff;
}
.ru-signup button{
	flex:1 1 auto; background:var(--ru-accent); color:#fff; border:0;
	padding:15px 30px; border-radius:40px; font:inherit; font-weight:700;
	font-size:16px; cursor:pointer;
}
.ru-signup button:hover{ background:var(--ru-navy); }
.ru-fine{ font-size:13px; color:var(--ru-muted); margin-top:14px; text-align:center; }

/* the form is display:flex, which overrides the [hidden] attribute's
   display:none — so hide it explicitly once the success note replaces it */
.ru-signup[hidden]{ display:none !important; }

/* inline confirmation shown after a Kit signup */
.ru-signup-msg{
	max-width:520px; margin:22px auto 0; text-align:center;
	font-size:16px; line-height:1.5;
}
.ru-signup-msg.is-ok{ color:var(--ru-navy); font-weight:600; }
.ru-signup-msg.is-err{ color:#c0392b; font-weight:500; }
/* on the navy footer the confirmation sits on dark ground */
.ru-foot .ru-signup-msg.is-ok{ color:var(--ru-sky); }
.ru-foot .ru-signup-msg.is-err{ color:#ffb3a8; }

/* on the navy footer the form sits on dark ground */
.ru-foot .ru-fine{ color:#9dc0d8; }

/* ---- footer ------------------------------------------------------------- */

.ru-foot{ background:var(--ru-navy); color:#a9c6da; text-align:center; }
.ru-foot a{ color:#dbeaf5; text-decoration:none; }
.ru-foot a:hover{ color:#fff; text-decoration:underline; }
.ru-foot-nav{ display:flex; gap:28px; justify-content:center; flex-wrap:wrap; }
.ru-foot-note{ font-size:12.5px; color:#7d9db4; }

/* ---- article body ------------------------------------------------------- */

.entry-content{ overflow-wrap:break-word; }

/* NetSuite screenshots are the evidence, not decoration. */
.entry-content img{
	height:auto; max-width:100%;
	border:1px solid var(--ru-rule); border-radius:6px;
}
.entry-content figcaption{
	color:var(--ru-muted); font-size:.9rem; text-align:left;
}
.entry-content pre{ overflow-x:auto; tab-size:2; }
.entry-content :not(pre) > code{
	background:var(--ru-surface); border-radius:3px; padding:.15em .35em; font-size:.9em;
}
.entry-content a:where(:not(.wp-element-button)){
	text-underline-offset:.2em; text-decoration-thickness:1px;
}
.entry-content a:where(:not(.wp-element-button)):hover{ text-decoration-thickness:2px; }

.ru-authorbox{
	border-top:1px solid var(--ru-rule); border-bottom:1px solid var(--ru-rule);
	padding:24px 0;
}
.ru-badge{ height:50px; width:auto; }

/* ---- accessibility ------------------------------------------------------ */

:where(a,button,input,textarea,summary):focus-visible{
	outline:2px solid var(--ru-accent); outline-offset:2px;
}
.skip-link:focus{
	background:#fff; color:var(--ru-ink); left:6px; padding:12px 18px; top:6px;
	z-index:100000; text-decoration:underline;
}
@media (prefers-reduced-motion: reduce){
	*,*::before,*::after{
		animation-duration:.01ms !important; animation-iteration-count:1 !important;
		transition-duration:.01ms !important; scroll-behavior:auto !important;
	}
}

/* ---- print: people print runbooks --------------------------------------- */

@media print{
	.ru-head,.ru-foot,.ru-signup,.ru-hero-shot,.wp-block-post-navigation-link{ display:none !important; }
	.ru-hero{ background:none !important; color:#000 !important; padding:0 !important; }
	.ru-hero h1{ color:#000 !important; }
	.entry-content a::after{ content:" (" attr(href) ")"; font-size:.85em; word-break:break-all; }
}

/* ---- mobile -------------------------------------------------------------
   Both fixes below came from rendering the design at 360/390/768px:
   the signup form overflowed the viewport, and nav needed real tap targets.
   -------------------------------------------------------------------------- */

@media (max-width:860px){
	.ru-hero{ padding-top:46px; }
	.ru-hero-shot{ margin:32px auto -50px; }
	.ru-pad-top{ padding-top:82px !important; }
	.ru-nav{ gap:6px 18px; }
	.ru-nav a{ padding:10px 0; min-height:44px; display:flex; align-items:center; }
	.ru-quote{ padding:48px 0; }
	.ru-quote p{ font-size:20px; }
	.ru-logo img{ height:46px; }
}