/* ---------------------------------------------------------------------------
   Bridge stylesheet.

   main.css is the approved design, extracted verbatim, and is never edited —
   that is what guarantees the port matches. But the source drove navigation
   through <button onclick="go('#/...')">, and real navigation has to be <a>
   for middle-click, browser history, screen readers and crawlers.

   Swapping the element changes which rules apply. Everything here exists purely
   to close that gap. Nothing in this file is a design change; if a rule cannot
   be traced to an element-type substitution, it does not belong here.
   --------------------------------------------------------------------------- */

/* main.css styles these as <button>; anchors pick up the global a:hover
   underline, which buttons never had. Note deliberately NO white-space rule on
   .nav-btn: the source wraps "All Exams" and "Free Mock Test" onto multiple
   lines at this width, and the port matches it rather than quietly improving it. */
.nav-btn,
.mobile-menu a.mlink,
.cart-btn,
.fitem,
.rm {
	text-decoration: none;
	/* Buttons take line-height:normal from the UA stylesheet; anchors inherit the
	   body's 1.6, which made every substituted control ~6px taller than the
	   source. Measured on the store filter rail: 475px tall vs the source's 520px. */
	line-height: normal;
}

/* The source's .cur-toggle is a <div>; ours is a <form> so the choice survives
   without JavaScript. A form is a flex item that can shrink below its content,
   which the div did not, so hold its intrinsic width instead of forcing nowrap
   (nowrap would widen the control on mobile, where the source lets it wrap). */
form.cur-toggle {
	flex-shrink: 0;
}

.nav-btn:hover,
.mobile-menu a.mlink:hover,
.cart-btn:hover,
.fitem:hover,
.rm:hover,
.dd a:hover {
	text-decoration: none;
}

/* The store's track filter is a <button> in the source, so its label inherits
   the body colour. As an anchor it would pick up the brand red link colour. */
.fitem {
	color: var(--text);
}

.fitem.on {
	color: var(--violet-dark);
}

/* The account rail is a list of <button>s in the source; here each item is a
   real link to its account endpoint. main.css only targets .side-nav button,
   so the same treatment is applied to the anchors. */
.side-nav a {
	display: flex;
	width: 100%;
	text-align: left;
	background: none;
	border: 0;
	padding: 10px 12px;
	border-radius: 9px;
	font-size: 14px;
	font-weight: 500;
	line-height: normal;
	color: var(--text);
	gap: 9px;
	text-decoration: none;
	white-space: nowrap;
}

.side-nav a:hover {
	background: var(--paper);
	text-decoration: none;
}

.side-nav a.on {
	background: var(--violet-soft);
	color: var(--violet-dark);
	font-weight: 600;
}

/* Cart removal is a nonced Woo URL, so this control is an anchor where the
   source used a button. Hold the design's red. */
.rm {
	color: var(--red);
}

/* Buttons centre their label by default; anchors start-align it. This only
   shows once a label wraps: the source's "Free Mock Test" centres across its
   three lines, where the anchor left-aligned them. Applied wherever main.css
   does not already set an explicit alignment. */
.cart-btn,
.nav-btn,
.rm {
	text-align: center;
}

/* The currency switch is a real GET form so the choice survives without
   JavaScript. main.css lays .cur-toggle out as a flex row, which a <form>
   inherits, but the browser's default form margin would break the header line. */
form.cur-toggle {
	margin: 0;
	padding: 0;
}

/* The source's "Buy now" was a button with a JS handler. Here it is a real
   WooCommerce form post so it works without JavaScript — but that <form>
   wrapper introduces a line box around the inline-flex button, adding ~5px the
   source did not have. display:contents removes the wrapper's own box while
   leaving the form fully functional. */
.buybox form,
.pcard-foot .aicert-add-form {
	display: contents;
}

/* The header's cart control and Sign in button are <button> in the source and
   anchors here, so both pick up the global link colour and the body's 1.6
   line-height. Measured against the source: Sign in rendered 40.39px tall
   against its 35px, and the cart glyph inherited brand red instead of black.

   The source's black is the browser's default button colour rather than a
   design choice, and the control holds an emoji so nothing visibly changes —
   but it is matched here so the port measures identically. */
.cart-btn {
	color: #000;
}

.nav-actions > .btn {
	line-height: normal;
	text-align: center;
}

/* WordPress markup convention the design never needed. Defined here rather than
   relying on WooCommerce's stylesheet, which only loads on store pages — without
   it these labels render as visible text. */
.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

/* The store's sort control is a bare <select> in the source, sitting directly in
   the .store-top flex row. Here it is wrapped in a GET form so a sorted view is
   a real URL, which stops the select being a flex item and blockifying. */
.aicert-sort-form {
	display: contents;
}

/* Marker for an anchor that stands in for a <button> in the source.
   Buttons take line-height:normal from the UA stylesheet; anchors inherit the
   body's 1.6, which makes the control ~5px taller and shifts everything below
   it. Apply this wherever navigation replaced a scripted button. */
.aicert-was-button {
	line-height: normal;
	text-align: center;
}

/* The source's .logo is a "AI" mark + text wordmark; here it is the real
   AICert Ready logo image. Qualified with the parent .logo class (not a bare
   .logo-img) so its specificity (0,2,0) beats WooCommerce's own
   `.woocommerce img, .woocommerce-page img { height:auto; max-width:100% }`
   (0,1,1) -- without this the logo rendered at its raw 4000x1150 intrinsic
   size on every WooCommerce page (cart, checkout, shop, account); the
   homepage looked fine only because it isn't a WooCommerce page. */
.logo .logo-img {
	display: block;
	height: 36px;
	width: auto;
}