/**
 * Gürsoy WP Core — Ads Runtime Styles
 *
 * Ad slot containers, responsive behavior, debug mode, and CLS stability.
 *
 * @package Gursoy_WP_Core
 */

.gs-ad-container {
	display: block;
	width: 100%;
	box-sizing: border-box;
}

.gs-ad-container:not(:empty) {
	margin: 24px 0;
}

.gs-ad-container--inline:not(:empty) {
	margin: 20px 0;
}

.gs-ad-slot {
	display: block;
	width: 100%;
	min-width: 0;
	margin: 0 auto;
	text-align: center;
	overflow: hidden;
	box-sizing: border-box;
}

/* Fixed-size units reserve their height up front and release it as soon as the
   runtime marks the slot unfilled, errored or collapsed. */
.gs-ad-fixed {
	min-height: var(--gs-ad-reserve, 0);
}

/* Responsive/auto units still need a reserved box: AdSense applies its own
   height to the <ins> only after the push round-trip completes. Without a
   reservation that late height pushes every block below it down, which is the
   single largest source of ad-driven layout shift.

   The cap bounds how much vertical space one unit can ever claim. AdSense is
   free to pick a tall format for a responsive unit - a 600px unit is a valid
   choice for it - and an in-article slot has no reason to hand over that much
   of the page. Publishers who want taller units raise --gs-ad-max. */
.gs-ad-responsive {
	min-height: var(--gs-ad-reserve, 250px);
	max-height: var(--gs-ad-max, 330px);
	position: relative;
}

/* The provider rewrites every ancestor of the <ins> with inline
   "min-height:0!important" and "max-height:none!important" as soon as a unit
   comes back empty, which would undo the reservation above. The runtime
   re-asserts it, so these declarations document the intent the runtime keeps. */
.gs-ad-slot[data-gs-ad-reserved="true"] {
	min-height: var(--gs-ad-reserve, 250px);
}

.gs-ad-slot[data-gs-ad-collapsed="true"] {
	height: 0 !important;
	min-height: 0 !important;
	max-height: 0 !important;
	overflow: hidden !important;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
}

.gs-ad-adsense ins.adsbygoogle {
	display: block;
	width: 100%;
	background: transparent;
}

/* Sidebar ad contract: reserve exactly one medium rectangle. This applies only
   to explicitly managed sidebar placements, not Google Auto ads overlays. */
.gs-ad-sidebar-fixed {
	width: 300px;
	max-width: 100%;
	height: 250px;
	min-height: 250px;
	max-height: 250px;
	overflow: hidden;
	margin-left: auto;
	margin-right: auto;
}

.gs-ad-sidebar-fixed ins.adsbygoogle {
	width: 300px !important;
	max-width: 300px !important;
	height: 250px !important;
	max-height: 250px !important;
}

@media (max-width: 767px) {
	.gs-ad-sidebar-fixed { width: 300px; max-width: 100%; }
	.gs-ad-sidebar-fixed ins.adsbygoogle { max-width: 100% !important; }
}

/* Empty/error units must not become visible placeholder panels. The runtime
   continues observing slots and can remove the state if a late fill arrives.
   Hide the slot's placement wrapper too, otherwise its editorial margins leave
   a conspicuous blank strip in the reading flow. :has() is supported by current
   evergreen browsers; the slot-level fallback still suppresses the visible box. */
.gs-ad-slot[data-gs-ad-state="unfilled"],
.gs-ad-slot[data-gs-ad-state="error"] {
	display: none !important;
	visibility: hidden !important;
	background: transparent !important;
	box-shadow: none !important;
	min-height: 0 !important;
	max-height: 0 !important;
	height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
}

.gs-ad-container:has(.gs-ad-slot[data-gs-ad-state="unfilled"]),
.gs-ad-container:has(.gs-ad-slot[data-gs-ad-state="error"]),
.gs-ad-mobile-sticky:has(.gs-ad-slot[data-gs-ad-state="unfilled"]),
.gs-ad-mobile-sticky:has(.gs-ad-slot[data-gs-ad-state="error"]) {
	display: none !important;
	margin: 0 !important;
	padding: 0 !important;
	box-shadow: none !important;
}

.gs-ad-fixed {
	max-width: 100%;
}

.gs-ad-fixed ins.adsbygoogle {
	max-width: 100%;
}

.gs-ad-html,
.gs-ad-image,
.gs-ad-text,
.gs-ad-script {
	text-align: center;
}

.gs-ad-image img {
	max-width: 100%;
	height: auto;
	display: inline-block;
}

.gs-ad-text-inner {
	padding: 16px;
	background: var(--ca-surface, #f7f7f7);
	border: 1px solid var(--ca-border, #e3e5e8);
	border-radius: 8px;
	text-align: left;
}

.gs-ad-text-title {
	margin: 0 0 8px;
	font-size: 16px;
	font-weight: 700;
	color: var(--ca-ink, #242424);
}

.gs-ad-text-desc {
	margin: 0 0 12px;
	font-size: 14px;
	color: var(--ca-muted, #70757d);
	line-height: 1.5;
}

.gs-ad-text-cta {
	display: inline-block;
	padding: 8px 16px;
	background: var(--ca-accent, #c133a7);
	color: #fff;
	text-decoration: none;
	border-radius: 4px;
	font-weight: 600;
	font-size: 13px;
}

.gs-ad-text-cta:hover {
	background: var(--ca-accent-dark, #a20b78);
}

.gs-ad-debug {
	position: relative;
	outline: 1px dashed #ff6b6b;
	outline-offset: 2px;
}

.gs-ad-debug::before {
	content: attr(data-gs-ad-id) " | " attr(data-gs-ad-type) | " | " attr(data-gs-ad-format);
	position: absolute;
	top: 0;
	left: 0;
	background: #ff6b6b;
	color: #fff;
	font-size: 10px;
	padding: 2px 6px;
	z-index: 9999;
	font-family: monospace;
	white-space: nowrap;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
}

.gs-ad-debug::after {
	content: "W: " attr(data-gs-w) " H: " attr(data-gs-h) " | " attr(data-gs-ad-status);
	position: absolute;
	bottom: 0;
	left: 0;
	background: rgba(0,0,0,0.7);
	color: #fff;
	font-size: 10px;
	padding: 2px 6px;
	z-index: 9999;
	font-family: monospace;
}

/* The banner is pinned to the bottom edge, so any change to its height moves
   its top edge and counts as a layout shift. AdSense's own loader rewrites the
   box it manages with inline "height:auto!important", "min-height:0!important"
   and "max-height:none!important", and an inline !important outranks any
   declaration in this file. The height therefore lives in a custom property
   that the runtime reads and re-asserts, keeping this value the single source
   of truth for the banner box. */
.gs-ad-mobile-sticky {
	--gs-ad-sticky-height: 120px;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 9998;
	background: #fff;
	box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
	padding: 8px;
	height: var(--gs-ad-sticky-height);
	overflow: hidden;
}

/* The nearest positioned ancestor of the <ins> is the element AdSense
   resizes. Keeping it inside the locked banner means a unit that fills at a
   different size can only change this box, never the banner's top edge. */
.gs-ad-sticky-host {
	position: relative;
	height: 100%;
	overflow: hidden;
}

.gs-ad-mobile-sticky .gs-ad-slot {
	max-width: 100%;
}

.gs-ad-mobile-sticky .gs-ad-close {
	position: absolute;
	top: 4px;
	right: 4px;
	width: 24px;
	height: 24px;
	border: none;
	background: rgba(0,0,0,0.5);
	color: #fff;
	border-radius: 50%;
	cursor: pointer;
	font-size: 12px;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

@media (max-width: 767px) {
	.gs-ad-slot {
		margin-left: -8px;
		margin-right: -8px;
		width: calc(100% + 16px);
		max-width: calc(100% + 16px);
	}
}

/* The sticky unit is a phone-only format. Without this it also renders on
   tablet, where it covers content it was never sized for. */
@media (min-width: 768px) {
	.gs-ad-mobile-sticky {
		display: none !important;
	}
}

@media print {
	.gs-ad-slot,
	.gs-ad-mobile-sticky {
		display: none !important;
	}
}