/**
 * Base stylesheet - design tokens + components shared across every
 * template (calculator pages, blog, contact page). Loaded on every
 * page; calculator.css and blog.css only ever reference these
 * variables, never redefine them, so the whole site's look stays
 * controlled from this one file.
 *
 * Design language: a measuring-tape motif (the ".ybsc-tape" ruler you'll
 * see used sparingly as a divider) ties the visual identity back to the
 * site's one real subject - precise measurement - instead of leaning on
 * decorative pink/lace cliches.
 */

/* -----------------------------------------------------------------
   Tokens
----------------------------------------------------------------- */
:root {
	/* Color - derived directly from the logo (steel blue #4080B0,
	   amber-gold #F8A000), with a warm rust as the secondary accent so
	   the palette isn't purely cool. All text/background pairings
	   below are WCAG AA-checked. */
	--ybsc-bg:          #FBF8F3;
	--ybsc-ink:         #1E2A33;
	--ybsc-ink-soft:    #55636B;
	--ybsc-primary:     #3E7CA6;
	--ybsc-primary-dark:#2C5A7C;
	--ybsc-gold:        #F0980A;
	--ybsc-rust:        #A8441F;
	--ybsc-card:        #EFF3F6;
	--ybsc-border:      #D7E1E8;
	--ybsc-white:       #FFFFFF;

	/* Type */
	--ybsc-font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
	--ybsc-font-body: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

	/* Spacing scale */
	--ybsc-space-xs:  .5rem;
	--ybsc-space-sm:  1rem;
	--ybsc-space-md:  1.5rem;
	--ybsc-space-lg:  2.5rem;
	--ybsc-space-xl:  4rem;
	--ybsc-space-2xl: 6rem;

	/* Layout */
	--ybsc-container: 1120px;
	--ybsc-radius-sm: 8px;
	--ybsc-radius-md: 14px;
	--ybsc-radius-pill: 999px;

	/* Motion */
	--ybsc-ease: cubic-bezier(.4, 0, .2, 1);
}

/* -----------------------------------------------------------------
   Reset (minimal - no framework)
----------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}

body {
	margin: 0;
	background: var(--ybsc-bg);
	color: var(--ybsc-ink);
	font-family: var(--ybsc-font-body);
	font-size: 1rem;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--ybsc-primary); text-decoration-thickness: 1px; text-underline-offset: .15em; }
a:hover { color: var(--ybsc-primary-dark); }

h1, h2, h3, h4 {
	font-family: var(--ybsc-font-display);
	font-weight: 600;
	line-height: 1.15;
	margin: 0 0 var(--ybsc-space-sm);
	color: var(--ybsc-ink);
}

h1 { font-size: clamp(2rem, 1.5rem + 2vw, 3.25rem); }
h2 { font-size: clamp(1.5rem, 1.25rem + 1vw, 2.25rem); }
h3 { font-size: clamp(1.15rem, 1.05rem + .5vw, 1.5rem); }

p { margin: 0 0 var(--ybsc-space-sm); color: var(--ybsc-ink-soft); }

/* Visible keyboard focus everywhere */
a:focus-visible,
button:focus-visible,
select:focus-visible,
input:focus-visible {
	outline: 3px solid var(--ybsc-gold);
	outline-offset: 2px;
}

.screen-reader-text {
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* -----------------------------------------------------------------
   Layout helpers
----------------------------------------------------------------- */
.ybsc-container {
	max-width: var(--ybsc-container);
	margin-inline: auto;
	padding-inline: var(--ybsc-space-md);
}

.ybsc-section {
	padding-block: var(--ybsc-space-xl);
}

@media (max-width: 640px) {
	.ybsc-section { padding-block: var(--ybsc-space-lg); }
}

/* -----------------------------------------------------------------
   Site header
----------------------------------------------------------------- */
.ybsc-header {
	border-bottom: 1px solid var(--ybsc-border);
	background: var(--ybsc-bg);
	position: relative;
}

.ybsc-header__inner {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--ybsc-space-md);
	padding-block: var(--ybsc-space-sm);
}

.ybsc-logo {
	display: flex;
	align-items: center;
	order: 1;
}

.ybsc-logo img {
	height: 55px;
	width: auto;
	display: block;
}

.ybsc-logo--text {
	font-family: var(--ybsc-font-display);
	font-weight: 600;
	font-size: 1.25rem;
	color: var(--ybsc-ink);
	text-decoration: none;
	white-space: nowrap;
}

.ybsc-logo--text:hover { color: var(--ybsc-primary); }

.ybsc-search-toggle,
.ybsc-nav-toggle {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	background: none;
	border: 1px solid var(--ybsc-border);
	border-radius: var(--ybsc-radius-sm);
	padding: .5rem .65rem;
	font-size: .95rem;
	font-family: var(--ybsc-font-body);
	color: var(--ybsc-ink);
	cursor: pointer;
}

.ybsc-search-toggle:hover,
.ybsc-nav-toggle:hover { border-color: var(--ybsc-primary); color: var(--ybsc-primary); }

.ybsc-nav-toggle { display: none; }

/*
 * Primary nav. IMPORTANT: this class lives on ONE element only - the
 * <nav id="ybsc-primary-nav"> itself. The menu <ul> inside it carries
 * no class of its own; it's styled via the child combinator below.
 * (An earlier version put the same class on both the wrapping <nav>
 * AND the inner <ul>, so the mobile "hide by default" rule matched
 * both - toggling .is-open on the outer nav revealed an empty shell,
 * because the untoggled inner <ul> was independently caught by the
 * same display:none rule.)
 */
.ybsc-nav {
	order: 2;
	flex: 1 1 auto;
}

.ybsc-nav > ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: var(--ybsc-space-md);
	list-style: none;
	margin: 0;
	padding: 0;
}

.ybsc-nav li { position: relative; }

.ybsc-nav a {
	display: inline-block;
	color: var(--ybsc-ink);
	font-weight: 500;
	text-decoration: none;
	font-size: .95rem;
	padding: .35rem 0;
}

.ybsc-nav a:hover,
.ybsc-nav a[aria-current="page"] { color: var(--ybsc-primary); }

/* Sub-menus: hidden by default, revealed on hover/focus on desktop */
.ybsc-nav ul.sub-menu {
	list-style: none;
	margin: 0;
	padding: .5rem 0;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 220px;
	background: var(--ybsc-white);
	border: 1px solid var(--ybsc-border);
	border-radius: var(--ybsc-radius-sm);
	box-shadow: 0 12px 28px -16px rgba(30, 42, 51, .3);
	opacity: 0;
	visibility: hidden;
	transform: translateY(4px);
	transition: opacity .15s var(--ybsc-ease), transform .15s var(--ybsc-ease), visibility .15s;
	z-index: 40;
}

.ybsc-nav li:hover > ul.sub-menu,
.ybsc-nav li:focus-within > ul.sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.ybsc-nav ul.sub-menu li { width: 100%; }

.ybsc-nav ul.sub-menu a {
	display: block;
	padding: .5rem 1rem;
	white-space: nowrap;
}

.ybsc-nav ul.sub-menu a:hover { background: var(--ybsc-card); }

/* A small caret on items that have children, so a dropdown isn't a surprise */
.ybsc-nav li.menu-item-has-children > a::after {
	content: '';
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-left: .35rem;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg) translateY(-2px);
}

.ybsc-header__actions {
	display: flex;
	align-items: center;
	gap: .5rem;
	order: 3;
}

/* Expandable header search panel */
.ybsc-header-search {
	border-top: 1px solid var(--ybsc-border);
	background: var(--ybsc-card);
	padding-block: var(--ybsc-space-sm);
}

.ybsc-header-search .ybsc-search-form { margin: 0; max-width: 480px; }

/* Search form itself - lives here (not blog.css) because the header
   search toggle appears on every page, including calculator pages
   that never load blog.css. Previously unstyled there entirely. */
.ybsc-search-form {
	display: flex;
	gap: .5rem;
	max-width: 480px;
	margin: 0 auto var(--ybsc-space-lg);
}

.ybsc-search-form input[type="search"] {
	flex: 1;
	padding: .7rem 1rem;
	border: 1px solid var(--ybsc-border);
	border-radius: var(--ybsc-radius-pill);
	font-family: var(--ybsc-font-body);
	font-size: 1rem;
	background: var(--ybsc-white);
	color: var(--ybsc-ink);
}

.ybsc-search-form button {
	background: var(--ybsc-primary);
	color: var(--ybsc-white);
	border: none;
	border-radius: var(--ybsc-radius-pill);
	padding: 0 1.25rem;
	font-weight: 600;
	cursor: pointer;
}

.ybsc-search-form button:hover { background: var(--ybsc-primary-dark); }

@media (max-width: 720px) {
	.ybsc-nav-toggle { display: inline-flex; }

	/* On mobile the toggle order changes: logo, actions (search +
	   hamburger) stay together on the top row, and the nav becomes a
	   full-width block that expands below - rather than competing for
	   space in the same row as actions. */
	.ybsc-header__actions { order: 2; }

	.ybsc-nav {
		order: 3;
		flex-basis: 100%;
		display: none;
	}

	.ybsc-nav.is-open { display: block; }

	.ybsc-nav > ul {
		flex-direction: column;
		align-items: flex-start;
		width: 100%;
		gap: 0;
		padding-block: var(--ybsc-space-sm);
	}

	.ybsc-nav li { width: 100%; }

	.ybsc-nav > ul > li > a { padding-block: .6rem; width: 100%; }

	/* On mobile, sub-menus are always expanded inline (no hover) */
	.ybsc-nav ul.sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		border: none;
		border-left: 2px solid var(--ybsc-border);
		border-radius: 0;
		margin-left: .75rem;
		padding: 0 0 .25rem;
	}
}

/* -----------------------------------------------------------------
   Footer nav - deliberately a SEPARATE class from the header's
   .ybsc-nav. Reusing the same class previously meant the header's
   mobile "hide behind hamburger" rule also caught the footer menu,
   which has no toggle button to reveal it again - so on narrow
   screens the footer menu simply vanished with no way to open it.
   This nav is always visible, at every viewport width.
----------------------------------------------------------------- */
.ybsc-footer-nav ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: .5rem 1.25rem;
	list-style: none;
	margin: 0 0 var(--ybsc-space-xs);
	padding: 0;
}

.ybsc-footer-nav a {
	color: var(--ybsc-ink);
	text-decoration: none;
	font-size: .9rem;
	font-weight: 500;
}

.ybsc-footer-nav a:hover { color: var(--ybsc-primary); }

@media (max-width: 720px) {
	.ybsc-footer-nav ul { justify-content: flex-start; }
}

/* -----------------------------------------------------------------
   Breadcrumbs
----------------------------------------------------------------- */
.ybsc-breadcrumbs {
	background: var(--ybsc-card);
	border-bottom: 1px solid var(--ybsc-border);
}

.ybsc-breadcrumbs__inner {
	padding-block: .6rem;
	font-size: .82rem;
	color: var(--ybsc-ink-soft);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .35rem;
}

.ybsc-breadcrumbs a {
	color: var(--ybsc-ink-soft);
	text-decoration: none;
}

.ybsc-breadcrumbs a:hover { color: var(--ybsc-primary); }

.ybsc-breadcrumbs__sep { color: var(--ybsc-border); }

.ybsc-breadcrumbs [aria-current="page"] {
	color: var(--ybsc-ink);
	font-weight: 600;
}

/* -----------------------------------------------------------------
   Buttons
----------------------------------------------------------------- */
.ybsc-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	background: var(--ybsc-primary);
	color: var(--ybsc-white);
	border: none;
	border-radius: var(--ybsc-radius-pill);
	padding: .85rem 1.75rem;
	font-family: var(--ybsc-font-body);
	font-weight: 600;
	font-size: 1rem;
	cursor: pointer;
	text-decoration: none;
	transition: background-color .18s var(--ybsc-ease), transform .18s var(--ybsc-ease);
}

.ybsc-button:hover {
	background: var(--ybsc-primary-dark);
	color: var(--ybsc-white);
	transform: translateY(-1px);
}

.ybsc-button:active { transform: translateY(0); }

/* -----------------------------------------------------------------
   Cards (used by calculator result cards AND blog post cards)
----------------------------------------------------------------- */
.ybsc-card {
	background: var(--ybsc-card);
	border: 1px solid var(--ybsc-border);
	border-radius: var(--ybsc-radius-md);
	padding: var(--ybsc-space-md);
}

/* -----------------------------------------------------------------
   Tape-measure divider - the signature motif.
   A row of tick marks like cm gradations on a tailor's tape, used
   sparingly as a section divider and inside the calculator flow.
----------------------------------------------------------------- */
.ybsc-tape {
	--tick: var(--ybsc-border);
	height: 18px;
	margin-block: var(--ybsc-space-md);
	background-image:
		repeating-linear-gradient(
			90deg,
			var(--tick) 0, var(--tick) 1px,
			transparent 1px, transparent 12px
		);
	background-position: center;
	background-repeat: repeat-x;
	background-size: 100% 10px;
	position: relative;
}

.ybsc-tape::before {
	content: '';
	position: absolute;
	inset-inline: 0;
	top: 50%;
	height: 2px;
	background: var(--ybsc-gold);
	transform: translateY(-50%);
}

/* -----------------------------------------------------------------
   Footer - kept deliberately compact: small thumbnails in a wrapping
   row rather than a tall stacked list, tighter vertical rhythm.
----------------------------------------------------------------- */
.ybsc-footer {
	border-top: 1px solid var(--ybsc-border);
	background: var(--ybsc-card);
	margin-top: var(--ybsc-space-xl);
}

.ybsc-footer__grid {
	display: grid;
	gap: var(--ybsc-space-md);
	padding-block: var(--ybsc-space-lg);
	grid-template-columns: 1.5fr 1fr;
	align-items: start;
}

@media (max-width: 720px) {
	.ybsc-footer__grid { grid-template-columns: 1fr; }
}

.ybsc-footer__recent h2 {
	font-size: 1rem;
	margin-bottom: var(--ybsc-space-sm);
}

/* Text-only list - no thumbnails. A small image cropped from a
   photo-heavy blog post rarely reads well at footer scale regardless
   of the pixel size, so this is a clean list instead: faster, and it
   never looks awkward. */
.ybsc-footer__recent-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: .5rem 1.5rem;
}

.ybsc-footer__recent-item a {
	color: var(--ybsc-ink);
	font-weight: 500;
	text-decoration: none;
	font-size: .88rem;
	line-height: 1.4;
}

.ybsc-footer__recent-item a:hover { color: var(--ybsc-primary); }

.ybsc-footer__meta {
	font-size: .85rem;
	color: var(--ybsc-ink-soft);
}

.ybsc-footer__meta p { margin: 0; }

.ybsc-footer__social {
	display: flex;
	justify-content: flex-end;
	gap: .6rem;
	margin: var(--ybsc-space-sm) 0;
}

.ybsc-footer__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--ybsc-white);
	border: 1px solid var(--ybsc-border);
	color: var(--ybsc-primary);
}

.ybsc-footer__social a:hover {
	background: var(--ybsc-primary);
	color: var(--ybsc-white);
	border-color: var(--ybsc-primary);
}

@media (max-width: 720px) {
	.ybsc-footer__social { justify-content: flex-start; }
}

/* ==========================================================================
   Conversion table styling for the calculator landing pages
   (homepage, /india/, /jp-ko-chn/)
   Uses the site's confirmed brand colors:
     heading / dark navy : #1A1A2E
     accent (pink)       : #B8437A
   Add this to the theme stylesheet or the WordPress Customizer's
   "Additional CSS" panel.
   ========================================================================== */

.ybsc-conversion-table {
	width: 100%;
	border-collapse: collapse;
	margin: 1.5rem 0 0.5rem;
	font-size: 0.95rem;
	background: #ffffff;
	box-shadow: 0 1px 3px rgba(26, 26, 46, 0.08);
	border-radius: 8px;
	overflow: hidden;
}

/* Wrap tables in a scroll container on narrow screens so they never
   break the page layout. If your theme doesn't already wrap tables,
   add <div class="ybsc-table-scroll"> around the <table> markup. */
.ybsc-table-scroll {
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.ybsc-conversion-table caption {
	caption-side: top;
	text-align: left;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #B8437A;
	padding: 0 0 0.6rem;
}

.ybsc-conversion-table thead th {
	background: #1A1A2E;
	color: #ffffff;
	text-align: left;
	font-weight: 600;
	padding: 0.75rem 1rem;
	font-size: 0.85rem;
	letter-spacing: 0.01em;
}

.ybsc-conversion-table thead th:first-child {
	border-top-left-radius: 8px;
}

.ybsc-conversion-table thead th:last-child {
	border-top-right-radius: 8px;
}

.ybsc-conversion-table tbody td {
	padding: 0.65rem 1rem;
	border-bottom: 1px solid #ECE7E9;
	color: #1A1A2E;
}

.ybsc-conversion-table tbody tr:last-child td {
	border-bottom: none;
}

.ybsc-conversion-table tbody tr:nth-child(even) {
	background: #FBF3F7;
}

.ybsc-conversion-table tbody tr:hover {
	background: #F5E6ED;
}

/* Small print under a table: source notes, caveats, "treat this as a
   starting point" style callouts. */
.ybsc-table-note {
	font-size: 0.85rem;
	font-style: italic;
	color: #5A5A6E;
	margin: 0.5rem 0 1.75rem;
	line-height: 1.5;
}

.ybsc-table-note a {
	color: #B8437A;
	text-decoration: underline;
	font-style: normal;
}

/* Mobile: tighten padding so two and three-column tables stay readable
   without forcing a horizontal scroll on typical phone widths. */
@media (max-width: 480px) {
	.ybsc-conversion-table {
		font-size: 0.88rem;
	}

	.ybsc-conversion-table thead th,
	.ybsc-conversion-table tbody td {
		padding: 0.55rem 0.65rem;
	}
}