/* Youngpreneur Commerce — responsive & alignment pass (1.10.0).
   Scoped, presentation-only fixes measured on the live site. Desktop (>=1025px) is untouched unless a rule
   says otherwise. Rollback: reinstall the previous plugin version (this file is new in 1.10.0). */

/* ---------- Global: Efor footer offset on phones/tablets ----------
   Efor's floating-header script gives every `.site-header ~ .elementor` an inline margin-top of minus the
   header height. That is meant for the page content (slides under the transparent header) but also hits the
   Elementor footer, which then covers the bottom 94px of every page on phones (Contact's Submit button sat
   7px above the footer). Desktop sections were spaced around the overlap, so only <=1024px is reset. */
@media (max-width: 1024px) {
  #page > footer.elementor-location-footer { margin-top: 0 !important; }
}

/* ---------- Homepage (254) ---------- */
/* "About Us" anchor: land below the sticky header (desktop clone header ends at 118px). */
#about-us { scroll-margin-top: 130px; }
@media (max-width: 1024px) { #about-us { scroll-margin-top: 120px; } }

/* ---------- Header (phones/tablets) ---------- */
/* Phone logo size: Customizer > Site Identity > Image Logo Height Mobile (px). */
/* Additional CSS colours the header navy and only whitens menu links at >=1025px, so the open mobile menu
   showed navy items and an invisible close (X) on the navy panel. The current item keeps navy on yellow. */
@media (max-width: 1024px) {
  .site-header .menu-wrap .nav-menu li:not(.current-menu-item) > a,
  .site-header .menu-wrap .nav-menu li:not(.current-menu-item) > a .link-text,
  .site-header .menu-toggle,
  .site-header .menu-wrap .search-container,
  .site-header .menu-wrap .search-container * { color: #fff; }
}

/* ---------- Footer (Elementor template 4004) ---------- */
/* "Explore" and "Account & Help" collapsed into small hamburger toggles at <=1024px; show the links. */
@media (max-width: 1024px) {
  .elementor-4004 .elementor-nav-menu--main { display: block !important; }
  .elementor-4004 .elementor-menu-toggle,
  .elementor-4004 .elementor-nav-menu--dropdown { display: none !important; }
}
@media (max-width: 767px) {
  .elementor-4004 .elementor-heading-title { text-align: center; }
  .elementor-4004 .elementor-nav-menu--main .elementor-nav-menu { display: flex; flex-wrap: wrap; justify-content: center; }
  /* Copyright squeezed into a 109px column beside wrapping social icons: stack, icons first. */
  .elementor-4004 .elementor-element-ec44c92 { flex-direction: column-reverse; align-items: center; gap: 16px; }
  .elementor-4004 .elementor-element-ec44c92 > .e-con { width: 100%; justify-content: center; }
  .elementor-4004 .elementor-element-a8533d5 { width: 100%; }
  .elementor-4004 .elementor-element-7df9c3a { width: auto; }
}

/* ---------- Courses page (5667): tablet/mobile HTML widget 7774185 had no phone layout ---------- */
@media (max-width: 767px) {
  /* "What Makes Our Courses Different": 4 columns of 68px (one word per line, clipped titles) -> 2x2. */
  .elementor-5667 .yp-value-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .elementor-5667 .yp-value-card { padding: 20px 16px; }
  /* Learning illustration: the two-column mock screen overflowed and was clipped on the right. */
  .elementor-5667 .yp-learning-visual { padding: 20px 16px 14px; }
  .elementor-5667 .yp-screenbar { flex-wrap: wrap; gap: 4px 12px; padding: 12px 16px; }
  .elementor-5667 .yp-screenbody { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 16px; }
  .elementor-5667 .yp-lesson { padding: 20px; gap: 20px; }
  .elementor-5667 .yp-lesson-title { font-size: 22px; }
  .elementor-5667 .yp-question { font-size: 17px; }
  .elementor-5667 .yp-journey { gap: 10px; flex-wrap: wrap; }
  .elementor-5667 .yp-journey i { width: 20px; }
}

/* ---------- Store (Efor shop grid) ----------
   Efor only reveals "Add to cart" on `.featured-image:hover`: never on touch screens, never for keyboard
   users, and never for products without an image (that block is 0px tall), even on desktop. Desktop keeps the
   hover overlay on image products; elsewhere the button sits under the price, aligned with the title. */
:is(body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) article.product .featured-image:focus-within .cart-button { opacity: 1; }
:is(body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) article.product:not(.has-post-thumbnail) .hentry-wrap { display: flex; flex-direction: column; }
:is(body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) article.product:not(.has-post-thumbnail) .featured-image { display: contents; }
:is(body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) article.product:not(.has-post-thumbnail) .cart-button { position: static; opacity: 1; order: 10; padding: 0 1.2em 1.8em; text-align: left; }
@media (max-width: 1024px), (hover: none) {
  :is(body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) article.product .hentry-wrap { display: flex; flex-direction: column; }
  :is(body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) article.product .featured-image { display: contents; }
  :is(body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) article.product .cart-button { position: static; opacity: 1; order: 10; padding: 0 1.2em 1.8em; text-align: left; }
}
/* Brand button logic: primary action yellow, turquoise on hover (was Efor's black outline). */
.woocommerce .site-content article.product .cart-button a.button { display: inline-flex; align-items: center; min-height: 44px; margin: 0; background: #FFD51E; border-color: #FFD51E; color: #0F2D52; }
.woocommerce .site-content article.product .cart-button a.button:is(:hover, :focus-visible) { background: #00C3C9; border-color: #00C3C9; color: #0F2D52; }

/* ---------- WooCommerce pages on phones/tablets (Shop, Cart, Checkout, My Account, Order received) ----------
   The branded WooCommerce UI in Additional CSS sits inside @media (min-width:1025px), so below that the pages
   had Efor defaults: #main pulled up -94px under the header (Cart's title and first item hidden), black/grey
   buttons, gold product links. Same look as desktop, mobile spacing. Desktop untouched. */
@media (max-width: 1024px) {
  body.woocommerce-page #main { margin-top: 0 !important; padding-top: 32px !important; padding-bottom: 48px; color: #0F2D52; }
  body.woocommerce-page #main > :is(.layout-medium, .layout-fixed, .layout-full) { width: auto; max-width: none; margin-left: 16px; margin-right: 16px; }
  body.woocommerce-page #main .post-header { margin: 0 0 20px; padding: 0; }
  body.woocommerce-page #main :is(.entry-title, .page-title) { color: #2193D2; margin-top: 0; margin-bottom: 16px; }
  body.woocommerce-page #main :is(h2, h3, h4, th, label, .woocommerce-loop-product__title) { color: #0F2D52; }
  body.woocommerce-page #main :is(a.wc-block-components-product-name, .product-name a, .woocommerce-table__product-name a) { color: #2193D2; }
  body.woocommerce-page #main :is(a.wc-block-components-product-name, .product-name a, .woocommerce-table__product-name a):is(:hover, :focus-visible) { color: #00C3C9; }
  body.woocommerce-page #main :is(.woocommerce-error, .woocommerce-message, .woocommerce-info, .wc-block-components-notice-banner) { padding: 16px 16px 16px 48px; margin: 16px 0 20px; border: 1px solid #B9DDEB; border-radius: 10px; background: #EDF7FC; color: #0F2D52; box-sizing: border-box; }
  body.woocommerce-page #main :is(.woocommerce-error, .wc-block-components-notice-banner.is-error) { background: #FFF1F2; border-color: #E8B8BE; color: #842D3C; }
  body.woocommerce-page #main :is(.woocommerce-error, .woocommerce-message, .woocommerce-info)::before { top: 16px; left: 16px; }
  body.woocommerce-page #main :is(button.button, input.button, a.button, .wc-block-components-button:not(.is-link), .wp-block-button__link) { min-height: 48px; padding: 12px 24px; border: 1px solid transparent; border-radius: 12px; background: #FFD51E; color: #0F2D52; font-weight: 600; line-height: 1.4; height: auto; text-decoration: none; box-shadow: none; }
  body.woocommerce-page #main :is(button.button, input.button, a.button, .wc-block-components-button:not(.is-link), .wp-block-button__link):is(:hover, :focus-visible) { background: #00C3C9; color: #0F2D52; }
  body.woocommerce-page #main :is(.woocommerce-orders-table, .woocommerce-message, .woocommerce-info) a.button,
  body.woocommerce-page #main a.button.back { background: #EDF7FC; color: #0F2D52; border-color: #C8DCE6; }
  body.woocommerce-page #main :is(#place_order, .wc-block-cart__submit-button, .wc-block-components-checkout-place-order-button, .checkout-button) { width: 100%; justify-content: center; }
  body.woocommerce-page #main :is(input.input-text, textarea.input-text, select, .select2-selection--single) { width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid #CBD6E0; border-radius: 9px; background: #fff; color: #0F2D52; box-sizing: border-box; font-family: inherit; font-size: 16px; }
  body.woocommerce-page #main .select2-selection--single .select2-selection__rendered { line-height: 22px; padding: 0; }
  body.woocommerce-page #main .select2-selection--single .select2-selection__arrow { height: 46px; }
  body.woocommerce-page #main :is(input.input-text, textarea.input-text, select):focus { border-color: #00C3C9; outline: 2px solid #BCEEF0; outline-offset: 1px; }
  body.woocommerce-page #main .form-row { margin-bottom: 16px; }
  body.woocommerce-page #main .form-row label { margin-bottom: 6px; font-weight: 500; }
  body.woocommerce-page #main :is(form.login, form.register, form.lost_reset_password) { padding: 20px 16px; border: 1px solid #DFE7EE; border-radius: 12px; }
  body.woocommerce-page #main table.shop_table { width: 100%; border: 1px solid #DFE7EE; border-radius: 12px; border-spacing: 0; border-collapse: separate; margin: 16px 0 24px; }
  body.woocommerce-page #main table.shop_table :is(th, td) { padding: 12px 14px; border: 0; border-bottom: 1px solid #E5EBF0; vertical-align: middle; }
  body.woocommerce-page #main table.shop_table th { font-weight: 600; background: #F4F8FB; }
  body.woocommerce-page #main table.shop_table :is(.order-total, tfoot tr:last-child) { color: #0F2D52; font-weight: 700; }
  body.woocommerce-page #main #payment { background: #F4F8FB; border: 1px solid #DFE7EE; border-radius: 12px; }
  body.woocommerce-page #main #payment :is(ul.payment_methods, .form-row) { padding: 16px; }
  body.woocommerce-page #main #payment img[alt="Whish Pay"] { width: 140px; max-width: 100%; height: auto; }
  body.woocommerce-page #main .woocommerce-order-overview { margin: 20px 0; padding: 16px; background: #F4F8FB; border-radius: 12px; }
  body.woocommerce-page #main .woocommerce-customer-details address { padding: 16px; border: 1px solid #DFE7EE; border-radius: 12px; }
}
/* Checkout, desktop (requested alignment fix): Billing sat in the left half of a 1160px container with an empty
   right half (shipping/notes are trimmed for course orders), and "Your order" + payment stacked below, so Place
   Order was far below the fold. Two columns: details left, order summary + payment right (sticky). If a product
   needs shipping fields they stack under Billing. Fields, hooks and gateway markup are unchanged. */
@media (min-width: 1025px) {
  body.woocommerce-checkout #main form.checkout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); column-gap: 56px; align-items: start; }
  body.woocommerce-checkout #main form.checkout > * { grid-column: 1 / -1; }
  /* Validation errors are prepended to the form by WooCommerce: keep them on top, full width. */
  body.woocommerce-checkout #main form.checkout > .woocommerce-NoticeGroup { grid-row: 1; }
  body.woocommerce-checkout #main form.checkout > #customer_details { grid-column: 1; grid-row: 2 / span 2; }
  body.woocommerce-checkout #main form.checkout > #customer_details > :is(.col-1, .col-2) { float: none; width: 100%; }
  body.woocommerce-checkout #main form.checkout > #customer_details > .col-2:not(:has(.form-row)) { display: none; }
  body.woocommerce-checkout #main form.checkout > #customer_details .woocommerce-billing-fields > h3 { margin-top: 0; }
  body.woocommerce-checkout #main form.checkout > #order_review_heading { grid-column: 2; grid-row: 2; margin-top: 0; }
  body.woocommerce-checkout #main form.checkout > #order_review { grid-column: 2; grid-row: 3; position: sticky; top: 110px; }
  body.woocommerce-checkout #main form.checkout > #order_review table.shop_table { margin-top: 0; }
  body.woocommerce-checkout #main form.checkout > #order_review #place_order { width: 100%; }
}
/* "Reset Password" under the login form used Efor's default gold link colour (all widths). */
body.woocommerce-page #main :is(.woocommerce-LostPassword, .lost_password) a { color: #2193D2; }
body.woocommerce-page #main :is(.woocommerce-LostPassword, .lost_password) a:is(:hover, :focus-visible) { color: #00C3C9; }
@media (max-width: 767px) {
  /* Checkout First/Last name were two 169px half-width fields. */
  body.woocommerce-page #main .form-row:is(.form-row-first, .form-row-last) { width: 100%; float: none; }
}

/* ---------- Tutor single course page ----------
   Below 1200px Tutor keeps the xl gutter (-24px row margins) inside a container with ~20px side margins, so the
   page was 5px wider than a 390px phone (sideways scroll) and the image, lesson list and sidebar sat 5px from
   the screen edge while the title sat at 20px. Columns are stacked there, so the gutter isn't needed. */
@media (max-width: 1199.98px) {
  .tutor-course-details-page > .tutor-row.tutor-gx-xl-5 { margin-left: 0; margin-right: 0; }
  .tutor-course-details-page > .tutor-row.tutor-gx-xl-5 > [class*="tutor-col"] { padding-left: 0; padding-right: 0; }
}
@media (max-width: 767px) {
  .tutor-course-details-top > .tutor-row { margin-left: 0; margin-right: 0; }
  .tutor-course-details-top > .tutor-row > [class*="tutor-col"] { padding-left: 0; padding-right: 0; }
  /* Topic info tooltips open to the right of the icon; hidden ones still widened the page. Show them below,
     centred and on screen, and take them out of layout while closed. */
  .tutor-course-details-page .tooltip-wrap:not(:hover):not(:focus-within) .tooltip-txt { display: none; }
  .tutor-course-details-page .tooltip-txt.tooltip-right { left: 50%; top: calc(100% + 8px); transform: translateX(-50%) !important; max-width: calc(100vw - 40px); }
  .tutor-course-details-page .tooltip-txt.tooltip-right::after { display: none; }
}

/* ---------- Tutor Reset Password (/dashboard-2/retrieve-password/, emailed reset link) ----------
   Tutor's inline `margin: 20px auto` left the card 20px under the header and edge-to-edge on phones. */
body.tutor-screen-frontend-dashboard #page > .tutor-card:has(> form.lost_reset_password) { width: calc(100% - 32px); box-sizing: border-box; margin-top: 48px !important; }
@media (max-width: 767px) {
  body.tutor-screen-frontend-dashboard #page > .tutor-card:has(> form.lost_reset_password) { margin-top: 32px !important; }
}