/*
    Theme Name: Marrky
    Author: agratri
    Author URI: https://themeforest.net/user/agratri
    Support: agratriinfo@gmail.com
    Description: Small WordPress-only overrides. main.css is generated from
                 assets/scss/ — put fixes here, never in main.css.
    Version: 1.0.0
*/

/* --------------------------------------------------
   Admin bar offsets
   The sticky / transparent header sits at top:0; the
   logged-in admin bar pushes the document down.
-------------------------------------------------- */
.admin-bar .ma-header-1-area {
	top: 32px;
}

.admin-bar .ma-header-1-area.wa_sticky_header.is-sticky {
	top: 32px;
}

.admin-bar .ma-offcanvas-area,
.admin-bar .ma-search-popup-area {
	top: 32px;
}

@media screen and (max-width: 782px) {
	.admin-bar .ma-header-1-area,
	.admin-bar .ma-header-1-area.wa_sticky_header.is-sticky,
	.admin-bar .ma-offcanvas-area,
	.admin-bar .ma-search-popup-area {
		top: 46px;
	}
}

/* --------------------------------------------------
   Core widgets in the blog sidebar

   The design defines .widget-categories and .widget-tags,
   but core's Categories and Tag Cloud widgets emit their
   own markup with fixed classes and give no filter for
   the wrapper element. main.css is generated from SCSS
   and must not be hand-edited, so the equivalent rules
   are mirrored here against core's selectors. They use
   the same custom properties, so a palette change still
   flows through.
-------------------------------------------------- */
/* Categories / Archives / Pages / Meta / Nav Menu */
.sidebar-widget.widget_categories > ul,
.sidebar-widget.widget_archive > ul,
.sidebar-widget.widget_pages > ul,
.sidebar-widget.widget_meta > ul,
.sidebar-widget.widget_nav_menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.sidebar-widget.widget_categories li a,
.sidebar-widget.widget_archive li a,
.sidebar-widget.widget_pages li a,
.sidebar-widget.widget_meta li a,
.sidebar-widget.widget_nav_menu li a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 15px;
	font-weight: 600;
	color: var(--ma-clr-p-1);
	padding: 9px 12px;
	border-radius: 10px;
	transition: background-color 0.3s ease, color 0.3s ease, padding-left 0.3s var(--ma-cube-1);
}

.sidebar-widget.widget_categories li a:hover,
.sidebar-widget.widget_archive li a:hover,
.sidebar-widget.widget_pages li a:hover,
.sidebar-widget.widget_meta li a:hover,
.sidebar-widget.widget_nav_menu li a:hover {
	background-color: var(--ma-clr-bg-3);
	color: var(--ma-clr-h-1);
	padding-left: 18px;
}

/* marrky_cat_count_span() moves the post count inside the link. */
.sidebar-widget.widget_categories li a span,
.sidebar-widget.widget_archive li a span {
	font-size: 13px;
	color: var(--ma-clr-p-1);
	opacity: 0.7;
}

/* Tag cloud */
.sidebar-widget.widget_tag_cloud .tagcloud {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.sidebar-widget.widget_tag_cloud .tagcloud a {
	font-size: 13px !important; /* core sets an inline font-size per tag weight */
	font-weight: 600;
	padding: 7px 15px;
	border-radius: 60px;
	border: 1px solid rgba(16, 16, 20, 0.14);
	color: var(--ma-clr-p-1);
	transition: background-color 0.35s ease, border-color 0.35s ease, color 0.35s ease;
}

.sidebar-widget.widget_tag_cloud .tagcloud a:hover {
	background-color: var(--ma-clr-pr-1);
	border-color: var(--ma-clr-pr-1);
	color: #0B0B10;
}

.ma-page-bg-dark .sidebar-widget.widget_tag_cloud .tagcloud a {
	border-color: rgba(244, 244, 240, 0.15);
	color: var(--ma-clr-p-2);
}

/* --------------------------------------------------
   Footer bottom bar
   The source markup put bare <a> elements inside
   .bottom-links. WordPress renders a menu as a <ul>,
   which is the correct element — this restores the
   flex layout. `.bottom-links a` styling in main.css
   is a descendant selector and still applies.
-------------------------------------------------- */
.ma-footer-1-bottom .bottom-links ul {
	display: flex;
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* --------------------------------------------------
   Footer background image
   Optional; sits behind the whole footer panel.
-------------------------------------------------- */
.ma-footer-1-area {
	position: relative;
}

.ma-footer-1-area .ma-footer-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

.ma-footer-1-area .ma-footer-bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ma-footer-1-area > .container,
.ma-footer-1-area > .ma-footer-1-bigtext {
	position: relative;
	z-index: 1;
}

/* --------------------------------------------------
   Static page wrapper
   The HTML template has no generic "page" layout —
   every page is built from sections. This gives the
   editor/Gutenberg fallback sane spacing.
-------------------------------------------------- */
.ma-page-area {
	padding: 100px 0;
}

.ma-page-content .article-body > *:last-child {
	margin-bottom: 0;
}

/* --------------------------------------------------
   Empty states
-------------------------------------------------- */
.ma-blog-none {
	padding: 60px 0 80px;
	max-width: 620px;
}

.ma-blog-none .widget-search {
	margin-top: 24px;
}

/* --------------------------------------------------
   Post formats
   Marrky's HTML only ever shows a plain featured
   image, so video / audio / gallery / quote posts
   reuse the existing image frame and need these few
   extra rules.
-------------------------------------------------- */
.ma-post-media.ma-post-embed {
	position: relative;
	aspect-ratio: 16 / 9;
}

.ma-post-media.ma-post-embed iframe,
.ma-post-media.ma-post-embed video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.ma-post-media.has-video {
	position: relative;
}

.ma-post-play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 72px;
	height: 72px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	background-color: var(--ma-clr-pr-1);
	color: #0B0B10;
	transition: transform 0.35s ease;
	z-index: 2;
}

.ma-post-play:hover {
	transform: translate(-50%, -50%) scale(1.08);
}

.ma-post-gallery .swiper-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ma-blog-1-card .ma-post-quote {
	margin-bottom: 20px;
}

/* Audio embeds have no useful aspect ratio. */
.ma-post-media.ma-post-embed:has(> .wp-audio-shortcode),
.format-audio .ma-post-media.ma-post-embed {
	aspect-ratio: auto;
}

.format-audio .ma-post-media.ma-post-embed iframe {
	position: static;
	height: auto;
	min-height: 120px;
}

/* --------------------------------------------------
   WooCommerce

   Marrky has no shop design, so WooCommerce renders
   its own templates (see include/marrky-woocommerce.php).
   These rules only align typography, colour and
   buttons with the rest of the site — they do not
   attempt to restyle the shop.

   Everything hangs off custom properties, so a palette
   change in the SCSS flows through here too.
-------------------------------------------------- */
.woocommerce,
.woocommerce-page {
	font-family: var(--ma-font-2);
	color: var(--ma-clr-p-1);
}

.woocommerce .woocommerce-products-header,
.woocommerce main > .woocommerce,
.woocommerce-page main > .woocommerce {
	padding: 80px 0;
}

.woocommerce h1,
.woocommerce h2,
.woocommerce h3,
.woocommerce h4 {
	font-family: var(--ma-font-1);
	color: var(--ma-clr-h-1);
}

/* Buttons — match .ma-pr-btn-1 without duplicating its markup. */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
	font-family: var(--ma-font-2);
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	padding: 15px 26px;
	border: 0;
	border-radius: 60px;
	background-color: var(--ma-clr-pr-1);
	color: #0B0B10;
	transition: transform 0.35s var(--ma-cube-1), opacity 0.3s ease;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
	background-color: var(--ma-clr-pr-1);
	color: #0B0B10;
	transform: translateY(-2px);
}

.woocommerce a.button.disabled,
.woocommerce button.button:disabled {
	opacity: 0.5;
	transform: none;
}

/* Form fields */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .quantity .qty {
	font-family: var(--ma-font-2);
	font-size: 15px;
	padding: 12px 16px;
	border: 1px solid rgba(16, 16, 20, 0.14);
	border-radius: 10px;
	background-color: transparent;
	color: var(--ma-clr-p-1);
	transition: border-color 0.3s ease;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
	border-color: var(--ma-clr-pr-1);
	outline: none;
}

/* Price and sale badge */
.woocommerce .price,
.woocommerce ul.products li.product .price {
	font-family: var(--ma-font-1);
	font-weight: 700;
	color: var(--ma-clr-h-1);
}

.woocommerce span.onsale {
	font-family: var(--ma-font-2);
	font-weight: 600;
	background-color: var(--ma-clr-pr-1);
	color: #0B0B10;
	border-radius: 60px;
	padding: 4px 14px;
	min-height: auto;
	min-width: auto;
	line-height: 1.6;
}

/* Notices */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	font-family: var(--ma-font-2);
	border-top-color: var(--ma-clr-pr-1);
	border-radius: 10px;
}

.woocommerce-message::before,
.woocommerce-info::before {
	color: var(--ma-clr-pr-1);
}

/* Product sidebar reuses the blog sidebar's widget chrome. */
.woocommerce .widget_price_filter .ui-slider .ui-slider-range,
.woocommerce .widget_price_filter .ui-slider .ui-slider-handle {
	background-color: var(--ma-clr-pr-1);
}

/* Dark palette */
.ma-page-bg-dark .woocommerce,
.ma-page-bg-dark .woocommerce-page {
	color: var(--ma-clr-p-2);
}

.ma-page-bg-dark .woocommerce h1,
.ma-page-bg-dark .woocommerce h2,
.ma-page-bg-dark .woocommerce h3,
.ma-page-bg-dark .woocommerce h4,
.ma-page-bg-dark .woocommerce .price {
	color: var(--ma-clr-h-2);
}

.ma-page-bg-dark .woocommerce form .form-row input.input-text,
.ma-page-bg-dark .woocommerce form .form-row textarea,
.ma-page-bg-dark .woocommerce form .form-row select {
	border-color: rgba(244, 244, 240, 0.16);
	color: var(--ma-clr-p-2);
}

/* --------------------------------------------------
   Form plugins inside the theme's form markup

   The static template writes its inputs as direct children of a flex or grid
   container: .hero-form and .band-form are flex rows, .form-grid is a two
   column grid. No form plugin can produce that markup. Contact Form 7 wraps
   every control in <span class="wpcf7-form-control-wrap">, wraps the form in
   <div class="wpcf7">, and runs the template through wpautop so inline runs
   pick up a <p>. Mailchimp for WordPress adds .mc4wp-form and
   .mc4wp-form-fields. Each of those wrappers becomes the flex/grid item, and
   the input inside it collapses.

   display:contents removes a box from the layout tree while leaving its
   children in place, so the inputs become the flex/grid children the CSS above
   was written for. The elements stay in the DOM, which is what the plugins'
   own JavaScript needs for validation messages and the AJAX response.

   The rules are scoped to the theme's three form regions rather than applied
   to .wpcf7-form globally: a customer's own Contact Form 7 form, dropped into
   a page with the shortcode, must keep CF7's normal block layout.

   Anything the plugin injects that is NOT an input has to be pulled out of the
   flex row explicitly, or it lands between the field and the button: the
   spinner, the per-field validation tip, and the response output.
-------------------------------------------------- */
.ma-hero-2-content .hero-form .wpcf7,
.ma-hero-2-content .hero-form .wpcf7-form,
.ma-hero-2-content .hero-form .wpcf7-form > p,
.ma-hero-2-content .hero-form .wpcf7-form-control-wrap,
.ma-hero-2-content .hero-form .mc4wp-form,
.ma-hero-2-content .hero-form .mc4wp-form-fields,
.ma-newsletter-band .band-wrap .band-form .wpcf7,
.ma-newsletter-band .band-wrap .band-form .wpcf7-form,
.ma-newsletter-band .band-wrap .band-form .wpcf7-form > p,
.ma-newsletter-band .band-wrap .band-form .wpcf7-form-control-wrap,
.ma-newsletter-band .band-wrap .band-form .mc4wp-form,
.ma-newsletter-band .band-wrap .band-form .mc4wp-form-fields,
.widget-newsletter .newsletter-form .wpcf7,
.widget-newsletter .newsletter-form .wpcf7-form,
.widget-newsletter .newsletter-form .wpcf7-form > p,
.widget-newsletter .newsletter-form .wpcf7-form-control-wrap,
.widget-newsletter .newsletter-form .mc4wp-form,
.widget-newsletter .newsletter-form .mc4wp-form-fields,
.ma-contact-1-form .wpcf7-form-control-wrap,
.ma-contact-1-form .wpcf7-form > p,
.ma-contact-1-form .form-grid > p {
	display: contents;
}

.ma-hero-2-content .hero-form .wpcf7-spinner,
.ma-newsletter-band .band-wrap .band-form .wpcf7-spinner,
.widget-newsletter .newsletter-form .wpcf7-spinner {
	display: none;
}

.ma-hero-2-content .hero-form .wpcf7-not-valid-tip,
.ma-hero-2-content .hero-form .wpcf7-response-output,
.ma-newsletter-band .band-wrap .band-form .wpcf7-not-valid-tip,
.ma-newsletter-band .band-wrap .band-form .wpcf7-response-output,
.widget-newsletter .newsletter-form .wpcf7-not-valid-tip,
.widget-newsletter .newsletter-form .wpcf7-response-output {
	flex: 0 0 100%;
	margin: 8px 0 0;
	padding: 0;
	border: none;
	font-size: 13px;
}

.ma-contact-1-area .wpcf7-form p,
.ma-footer-1-widget .wpcf7-form p {
	margin-bottom: 0;
}

.wpcf7 .wpcf7-not-valid-tip {
	font-size: 13px;
	margin-top: 6px;
}

.wpcf7 form .wpcf7-response-output {
	margin: 16px 0 0;
	padding: 10px 14px;
	border-radius: 6px;
	font-size: 14px;
}

/* --------------------------------------------------
   Section-title variants the template expressed inline

   index-2.html centres the FAQ heading and recolours the process heading with
   style="" attributes on the markup. A widget cannot ship inline styles the
   customer can then never override, so the same two intents are classes here:

     .has-center   the centred heading block (FAQ sections)
     .ma-step-2-*  the process band, which sits on a dark panel

   Without the second block the process heading rendered near-black on a
   near-black background and read as an empty strip.
-------------------------------------------------- */
.ma-sec-title-wrap.has-center {
	justify-content: center;
	text-align: center;
}

.ma-sec-title-wrap.has-center .left-content {
	max-width: 100%;
}

.ma-step-2-area .ma-sec-title-wrap {
	margin-bottom: 0;
}

.ma-step-2-area .ma-sec-title-wrap .ma-sec-title-1 {
	color: var(--ma-clr-h-2);
}

.ma-step-2-area .ma-sec-title-wrap .ma-sec-badge {
	border-color: rgba(244, 244, 240, 0.2);
	color: var(--ma-clr-h-2);
}

.ma-step-2-area .ma-sec-title-wrap .right-content p,
.ma-step-2-area .ma-sec-title-wrap .right-content .ma-link-1 {
	color: var(--ma-clr-p-2);
}