/* ---------------------------------------------------------------------------
   Enhancements — deliberate departures from the source design.

   The three stylesheets are layered on purpose:

     main.css         the approved design, extracted verbatim. Never edited.
     bridge.css       element-substitution deltas only. No design changes.
     enhancements.css this file. Intentional fixes to defects in the source.

   Every rule here must say what it fixes and why, because each one is a place
   the port knowingly differs from the design it is cloning.
   --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   FIX: the header scrolls sideways on every screen narrower than ~1122px.

   The source has a single breakpoint at 680px. Above it, the full desktop nav
   — logo, six links, a 210px search box, currency toggle, cart and Sign in —
   must fit, and it needs about 1122px to do so. Everything between 681px and
   1121px therefore overflows: measured on the original document, 768px scrolls
   by 354px and 1024px by 98px. That is every tablet, on a store that takes money.

   Measured on the original, not introduced by the port:
     320px  overflow 176px
     390px  overflow 106px
     768px  overflow 354px
    1024px  overflow  98px

   The fix collapses to the hamburger whenever the desktop row will not fit,
   rather than at an arbitrary width.
   --------------------------------------------------------------------------- */
@media (max-width: 1121px) {
	.nav-links,
	.search-box {
		display: none;
	}

	.hamb {
		display: block;
	}
}

/* Below 680px the row is tight even without the links and search box, so the
   two controls that are already reachable from the menu step aside. Currency
   moves into the menu rather than disappearing — it has to stay reachable on a
   phone, which is the primary device for the INR audience. */
@media (max-width: 680px) {
	.nav-actions > .cur-toggle {
		display: none;
	}

	/* Sign in / My account moves to the menu too — it is already listed there,
	   so this removes a duplicate rather than a route. Logo, cart badge and the
	   hamburger are what remain, which is the pattern every storefront settles on.
	   Without this the row is still ~7px too wide at 390px. */
	.nav-actions > .btn-dark {
		display: none;
	}

	/* Currency row inside the slide-down menu. main.css only styles
	   `.mobile-menu a` and `.mobile-menu button.mlink`, so this row needs the
	   same treatment applied to its own wrapper. */
	.mobile-menu .m-currency {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		width: 100%;
		padding: 13px 4px;
		border-bottom: 1px solid var(--line);
		font-size: 16px;
		font-weight: 600;
		color: var(--ink);
	}

	.mobile-menu .m-currency .cur-toggle {
		flex-shrink: 0;
	}
}

/* ---------------------------------------------------------------------------
   FIX: the wordmark alone is wider than a 320px viewport allows.

   .logo is 21px/700 plus a 36px mark and a 10px gap, which needs ~176px. With
   the container's 24px gutters and the cart and hamburger beside it, the row
   still overflows on the narrowest phones in use. Scaling the wordmark down is
   the least invasive fix; the mark keeps its size so branding holds.
   --------------------------------------------------------------------------- */
@media (max-width: 360px) {
	.logo {
		font-size: 18px;
		gap: 8px;
	}

	.wrap {
		padding: 0 16px;
	}
}

/* ---------------------------------------------------------------------------
   FIX: the vendor track grid overflows on the narrowest phones.

   .vgrid drops to two columns and stops there. A tile's label ("Data Science &
   MLOps" at 17px/700) plus 20px of padding sets a min-content floor of ~151px,
   so two columns plus the 14px gap need 316px — more than a 320px viewport has
   after gutters. Grid tracks cannot shrink below min-content, so the row spills.
   One column below 360px, which is where two stop fitting.
   --------------------------------------------------------------------------- */
@media (max-width: 360px) {
	.vgrid {
		grid-template-columns: 1fr;
	}
}

/* ---------------------------------------------------------------------------
   FIX: checkout scrolls sideways on phones.

   The source declares the checkout's two-column grid as an inline style, which
   outranks the `.f2 { grid-template-columns: 1fr }` rule in its own ≤680px
   media query. The columns therefore never collapse: measured on the original
   document, checkout overflows by 106px at 390px.

   Declaring the same grid as a class lets the existing breakpoint apply.
   --------------------------------------------------------------------------- */
.aicert-checkout-grid {
	grid-template-columns: 1.1fr .9fr;
	gap: 24px;
}

@media (max-width: 680px) {
	.aicert-checkout-grid {
		grid-template-columns: 1fr;
	}
}

/* ---------------------------------------------------------------------------
   Instant currency toggle: both currencies' prices are in the markup; only the
   session's is shown. Wrappers inside a .price block are display:contents so
   main.css's .now/.was/.off margins still apply to the visible spans directly.
   The body class comes from aicert_currency_body_class() and is flipped
   client-side by assets/js/currency-toggle.js. Hide rules are more specific
   (0,2,1) than the contents rule (0,1,1), so a hidden wrapper stays hidden.
   --------------------------------------------------------------------------- */
.price > .cur {
	display: contents;
}
body.cur-usd .cur-inr,
body.cur-inr .cur-usd {
	display: none;
}

/* ---------------------------------------------------------------------------
   FIX: "Browse by track" heading wraps inside the section-head's 640px
   max-width on the homepage. Left un-forced under the 680px breakpoint, where
   the heading is wider than the viewport and nowrap would push it off-screen.
   --------------------------------------------------------------------------- */
@media (min-width: 681px) {
	.vendors .section-head {
		max-width: none;
	}
	.vendors .section-head h2 {
		white-space: nowrap;
	}
}

/* ---------------------------------------------------------------------------
   FIX: store grid on phones — badge overlapping the exam code, "Add to cart"
   clipped off the card.

   The source's store listing declared its two columns as an inline style,
   which outranked main.css's `.pgrid { grid-template-columns: 1fr }` at ≤680px.
   Phones got two ~175px cards the card design was never sized for: the
   absolute BESTSELLER badge landed on the code chip, and the price row alone
   was wider than the card so the add-to-cart form was pushed past the card's
   overflow:hidden edge. The columns are now a class, so the breakpoint applies.
   --------------------------------------------------------------------------- */
.pgrid-store {
	grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 680px) {
	.pgrid-store {
		grid-template-columns: 1fr;
	}
}

/* Belt and braces for any card width: if price and button cannot share the
   footer row, the button drops to its own line (right-aligned) instead of
   being clipped. */
.pcard-foot {
	flex-wrap: wrap;
}
.pcard-foot .aicert-add-form {
	margin-left: auto;
}

/* ---------------------------------------------------------------------------
   Cart and hamburger as proper buttons.

   The source drew the cart as an emoji in a white outlined square and the
   hamburger as bare text — the two controls that remain on a phone header,
   and the least visible things in it. Both now match .btn-dark (the Sign in
   button beside them): ink square, white glyph, 11px radius. The cart glyph is
   an inline SVG (header.php) so it takes the button's colour; an emoji cannot.
   Display is deliberately not set on .hamb — main.css and the breakpoint
   above own whether it shows at all.
   --------------------------------------------------------------------------- */
.cart-btn {
	background: var(--ink);
	border: 0;
	color: #fff;
}
.cart-btn:hover {
	background: var(--ink-2);
	color: #fff;
	text-decoration: none;
}
.cart-btn .cart-icon {
	display: block;
}
.cart-btn .cart-count {
	box-shadow: 0 0 0 2px #fff;
}
.hamb {
	width: 44px;
	height: 44px;
	padding: 0;
	border-radius: 11px;
	background: var(--ink);
	color: #fff;
	font-size: 22px;
	line-height: 44px;
	text-align: center;
	flex-shrink: 0;
}
.hamb:hover {
	background: var(--ink-2);
}

/* ---------------------------------------------------------------------------
   FIX: hamburger menu — see assets/js/mobile-menu.js for the behaviour side.

   The source's .mobile-menu is fixed at top:68px, which is only right once
   the announcement bar has scrolled away; the script sets the real top edge.
   While the menu is open the page must not scroll underneath it, and the
   button should read as "close".
   --------------------------------------------------------------------------- */
/* html only, never body: with html already non-visible, an overflow on body
   applies to the body element itself instead of the viewport, and that turns
   body into the sticky header's scroll container — the header stops sticking,
   scrolls away, and the menu (aligned to its bottom edge) opens full-screen
   with the close button off-screen. */
html.aicert-menu-open {
	overflow: hidden;
}
.hamb[aria-expanded="true"] {
	font-size: 0;
}
.hamb[aria-expanded="true"]::before {
	content: "✕";
	font-size: 22px;
	line-height: 44px;
}

/* ---------------------------------------------------------------------------
   Mobile menu layout: everything a first-time visitor needs above the fold.

   Fifteen full-width rows at 13px padding run ~750px, taller than a phone
   screen, so Contact, Cart, Sign in and the currency switch sat below the
   fold with nothing suggesting the panel scrolls. Currency + Sign in now lead
   in a utility row, the eight vendor tracks sit in two columns, and a sticky
   fade at the bottom edge signals the remaining rows. Markup in inc/nav.php.
   --------------------------------------------------------------------------- */
.mobile-menu .m-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 2px 0 14px;
	border-bottom: 1px solid var(--line);
}
/* main.css's `.mobile-menu a` (0,1,1) flattens every link in the panel into a
   full-width row; the Sign in button has to win it back. */
.mobile-menu .m-top a.btn {
	display: inline-flex;
	width: auto;
	flex-shrink: 0;
	padding: 9px 16px;
	border: 0;
	border-radius: 9px;
	background: var(--ink);
	color: #fff;
	font-size: 14px;
	text-align: center;
}
.mobile-menu .m-top a.btn:hover {
	background: var(--ink-2);
	color: #fff;
}
/* Beats the ≤680px .mobile-menu .m-currency rule above (0,3,0 vs 0,2,0). */
.mobile-menu .m-top .m-currency {
	width: auto;
	flex: 1;
	padding: 0;
	border-bottom: 0;
	font-size: 15px;
}
.mobile-menu .m-cats {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 16px;
	border-bottom: 1px solid var(--line);
}
.mobile-menu .m-cats a {
	padding: 10px 4px 10px 12px;
	border-bottom: 0;
	font-size: 14.5px;
	font-weight: 500;
	color: var(--muted);
}
.mobile-menu .m-accent {
	color: var(--violet);
}
.mobile-menu .m-fade {
	display: none;
	position: sticky;
	bottom: 0;
	height: 36px;
	margin-top: -36px;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
	pointer-events: none;
}
.mobile-menu.m-overflow .m-fade {
	display: block;
}

/* ------------------------------------------------------------------------
 * Free mock test chooser (templates/exam.php, no ?set= requested).
 * One card per certification; a card without questions yet is inert.
 * ---------------------------------------------------------------------- */
.mock-shell{max-width:1120px}
.mock-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.mock-card{display:flex;flex-direction:column;gap:10px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px;color:var(--text);text-decoration:none;transition:transform .14s,box-shadow .14s,border-color .14s}
a.mock-card:hover{text-decoration:none;transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--violet)}
.mock-card.is-soon{opacity:.62}
.mock-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.mock-head .code{font-family:var(--mono);font-size:11.5px;color:#fff;padding:3px 9px;border-radius:6px;font-weight:600}
.mock-vendor{font-size:12.5px;color:var(--muted);font-weight:600}
.mock-card h3{font-size:16.5px;line-height:1.35;color:var(--ink)}
.mock-meta{display:flex;gap:14px;font-size:13.5px;color:var(--muted)}
.mock-meta b{color:var(--ink)}
.mock-cta{margin-top:auto;padding-top:6px;font-weight:700;color:var(--violet)}
.mock-card.is-soon .mock-cta{color:var(--muted)}
@media(max-width:900px){.mock-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.mock-grid{grid-template-columns:1fr}}

/* ------------------------------------------------------------------------
 * FIX: the "Start preparing →" button in the pass-guarantee band is dead --
 * taps/clicks land on the decorative "100%" watermark instead of the link.
 *
 * .guarantee::after is a position:absolute 200px ghost numeral with no
 * z-index. The button (.guarantee .btn) is a normal static-flow element, and
 * a positioned box always paints above static siblings in the same stacking
 * context regardless of source order -- so the pseudo-element sits on top of
 * the button's hit area even though it's purely decorative background text.
 * Confirmed with elementFromPoint() at the button's center: it resolved to
 * DIV.guarantee (the pseudo-element's host), not the anchor. Most visible on
 * the single-column mobile layout, where the watermark and button overlap
 * directly instead of sitting in separate grid columns.
 * ---------------------------------------------------------------------- */
.guarantee::after{pointer-events:none}

/* ------------------------------------------------------------------------
 * FEATURE: "Buy now" on every exam-bank card (store grid, homepage
 * bestsellers), not just the single-product buybox. aicert_product_card()
 * (inc/template-helpers.php) is the one component behind both grids, so this
 * covers everywhere "Add to cart" appears outside the product page itself.
 *
 * .pcard-foot is a space-between row (price | actions); the two buttons stack
 * inside their own column rather than sitting side by side, since a 3-up grid
 * card has no room for two full labels on one line without wrapping oddly.
 * Both forms get display:contents so they don't add their own block box --
 * same reasoning as the buybox/aicert-add-form rule in bridge.css, just
 * covering the new Buy now form too (that existing rule only names
 * .aicert-add-form).
 * ---------------------------------------------------------------------- */
.pcard-foot .pcard-actions{display:flex;flex-direction:column;gap:8px}
.pcard-foot .pcard-actions form{display:contents}

/* ------------------------------------------------------------------------
 * FIX: notices on the checkout page (e.g. "added to cart" after Buy now)
 * render with a thick red ring around the intended thin border -- worst on
 * mobile, where it reads as two overlapping boxes with no gap between them.
 *
 * Root cause isolated by elimination, not by any rule in our own CSS: the
 * ring disappears if role="alert" is stripped from the notice, and also
 * disappears if Razorpay's checkout.js (enqueued only on the checkout page,
 * see woo-razorpay's enqueue_checkout_js_script_on_checkout()) is prevented
 * from loading -- with both present, no single property (border, background,
 * box-shadow, outline, border-radius) individually wins if overridden alone,
 * only overriding all five together does. That points to Razorpay's SDK
 * itself decorating role="alert" elements on the page it's embedded in,
 * outside our stylesheets and invisible to getComputedStyle() on the notice
 * itself -- not a rule we authored or can target with a single property fix.
 * role="alert" is WooCommerce's own markup (screen readers announce the
 * notice immediately) and is worth keeping, so this reasserts our own look
 * wholesale rather than dropping it.
 * ---------------------------------------------------------------------- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	background: #fff !important;
	border: 1px solid var(--line) !important;
	box-shadow: none !important;
	outline: none !important;
	border-radius: 12px !important;
}

.woocommerce-message { background: var(--pass-soft) !important; border-color: var(--pass) !important; }
.woocommerce-error { background: var(--violet-soft) !important; border-color: var(--red) !important; }

/* ------------------------------------------------------------------------
 * FEATURE: the sample-question card beside the hero text was removed
 * (client request); main.css's .hero .wrap is a two-column grid
 * (1.05fr .95fr, padding-top:64px/padding-bottom:72px) sized to balance
 * against that card's own height, both vertically centered by
 * align-items:center. With only the text column left: single column (else
 * the grid still reserves a dead second track at desktop widths), and
 * smaller vertical padding, since 64/72px was tuned for a tall card and now
 * just reads as dead space above the eyebrow that pushed the CTA button
 * toward/past the fold on shorter viewports.
 * ---------------------------------------------------------------------- */
.hero .wrap {
	grid-template-columns: 1fr;
	padding-top: 20px;
	padding-bottom: 40px;
}