/* =========================================================================
   Mobile / Tablet Responsive Fixes (added in 1.26.0).

   WHAT THIS FILE IS
   ------------------------------------------------------------------------
   A small, additive layer that is enqueued LAST (see inc/enqueue.php), so
   it can correct spacing/sizing problems on phones and small tablets
   without touching any other stylesheet, template or setting. Every rule
   in it sits inside a max-width (or min-width, for the one tablet/desktop
   dropdown fix) media query — nothing here is ever applied to the normal
   desktop layout, and no Customizer setting is read, removed or changed.

   Breakpoints match the rest of the theme: 782px (the framework's own
   mobile switch), 640px, 600px and 480px.

   WHY EACH SECTION EXISTS
   ------------------------------------------------------------------------
   1. Safety net       - no stray element may widen the page sideways.
   2. Header row       - Logo + Social Links + Search + Account + Header
                         Button + Dark/Light toggle + Menu button cannot all
                         fit side by side on a 360px phone. The row used to
                         push the whole page wider than the screen and the
                         items overlapped. Now the logo shrinks first, then
                         the optional extras step aside in a fixed order.
   3. Touch targets    - icon buttons are raised to a comfortable 40px.
   4. Menu bar         - tighter rows on phones; last dropdowns can no longer
                         open off the right edge of the screen.
   5. Hero Section     - decorative corner brackets used to sit on top of the
                         text and buttons on small screens.
   6. Post content     - wide tables / code blocks scroll inside themselves.
   ========================================================================= */


/* -------------------------------------------------------------------------
   1. Safety net (<= 782px)
   `clip` (unlike `hidden`) does not turn the page into a scroll container,
   so sticky headers and sticky sidebars keep working. Browsers without
   `overflow: clip` simply skip this block.
   ------------------------------------------------------------------------- */
@media (max-width: 782px) {
	html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
	body { overflow-wrap: break-word; }
	img, video, iframe, embed, object, canvas { max-width: 100%; }
}
@supports (overflow: clip) {
	@media (max-width: 782px) {
		html, body { overflow-x: clip; }
	}
}


/* -------------------------------------------------------------------------
   2. Header row (<= 782px)
   Order of priority on a narrow screen: Menu button, Search, Dark/Light
   toggle, Account, Logo (shrinks/ellipsis), then Header Button (compact,
   hidden on phones <= 480px), then Header Social Links (compact <= 782px,
   hidden <= 640px). Nothing is removed from the site — the Header Button
   and the Social Links are still on tablets/desktop, and the same social
   links are still in the mobile menu panel.
   ------------------------------------------------------------------------- */
@media (max-width: 782px) {
	.gzfc-header-main .gzf-header-main-inner {
		gap: 8px;
	}

	/* The logo is the one flexible piece: it gives up width first. */
	.gzfc-header-main .gzf-branding {
		flex: 0 1 auto;
		min-width: 0;
		overflow: hidden;
	}
	.gzfc-header-main .gzf-site-title-link {
		display: block;
		min-width: 0;
	}
	.gzfc-header-main .gzf-site-title {
		display: block;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.gzfc-header-main .gzf-branding img,
	.gzfc-header-main .custom-logo {
		max-width: 100%;
		height: auto;
	}
	/* Tagline is a nice-to-have; it is the first thing to go on a phone. */
	.gzfc-header-main .gzf-site-tagline {
		display: none;
	}

	/* The button cluster never shrinks and never wraps. */
	.gzfc-header-main .gzf-header-actions {
		flex: 0 0 auto;
		gap: 6px;
		min-width: 0;
	}

	/* Header Button: compact pill instead of a full-size desktop button. */
	.gzfc-header-main .gzf-header-btn {
		padding: 8px 14px;
		font-size: .85rem;
		white-space: nowrap;
		max-width: 132px;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	/* Header Social Links: one compact row, never wrapping into a stack. */
	.gzfc-header-main .gzfc-header-social {
		flex: 0 1 auto;
		min-width: 0;
	}
	.gzfc-header-main .gzfc-header-social .gzf-social-icons {
		flex-wrap: nowrap;
		gap: 4px;
	}
	.gzfc-header-main .gzfc-header-social .gzf-social-icon {
		width: min(var(--gzfc-social-icon-size, 34px), 30px);
		height: min(var(--gzfc-social-icon-size, 34px), 30px);
	}
}

/* Phones. There is no room for social icons next to the logo; they remain
   available in the mobile menu panel. */
@media (max-width: 640px) {
	.gzfc-header-main .gzfc-header-social {
		display: none;
	}
}

/* Small phones. The Header Button (a full text button) is the one item
   that cannot fit next to the logo AND the icon buttons at 390px and
   below; it stays on tablet/desktop. */
@media (max-width: 480px) {
	.gzfc-header-main .gzf-header-btn {
		display: none;
	}
	.gzfc-header-main .gzf-header-actions {
		gap: 4px;
	}
}


/* -------------------------------------------------------------------------
   3. Touch targets (<= 782px)
   Icon buttons that were 38px (or 32px for the search Close button) are
   raised to 40px, and the Dark/Light toggle — a 24-27px track — gets an
   invisible 44x40 hit area around it without changing how it looks.
   ------------------------------------------------------------------------- */
@media (max-width: 782px) {
	.gzfc-header-main .gzf-menu-toggle,
	.gzfc-header-main .gzf-account-link,
	.gzfc-header-main .gzfc-search-icon-btn {
		min-width: 40px;
		min-height: 40px;
	}
	.gzfc-header-main .gzfc-theme-toggle {
		min-width: 44px;
		min-height: 40px;
		justify-content: center;
	}
	.gzfc-search-compact-close {
		width: 40px;
		height: 40px;
	}
}


/* -------------------------------------------------------------------------
   4. Menu bar
   ------------------------------------------------------------------------- */
/* Phones / small tablets: tighter rows so a long category list does not
   eat half the screen; taller tap area per item. */
@media (max-width: 782px) {
	.gzfc-header-cat-menu-list {
		gap: 2px 4px;
		padding-top: 4px;
		padding-bottom: 4px;
	}
	.gzfc-header-cat-item > a {
		padding: 8px 10px;
		min-height: 36px;
	}
	.gzfc-header-cat-caret {
		padding: 10px;
		margin: -10px -6px -10px -4px;
	}
	.gzfc-header-cat-dropdown li a {
		padding: 10px 14px;
		white-space: normal;
	}
}

/* A closed dropdown is only visibility: hidden, so it still counts towards
   the page's width: near the right edge it made the whole page scrollable
   sideways on tablets. `overflow-x: clip` trims that sideways overflow only
   — it does not create a scroll box and leaves overflow-y visible, so the
   dropdowns keep opening downwards over the page exactly as before. */
@supports (overflow: clip) {
	.gzfc-header-cat-menu {
		overflow-x: clip;
	}
}

/* Tablets / laptops: the last two Main Categories' dropdowns open towards
   the LEFT so a 200px+ panel can never run past the right screen edge. On
   Right-aligned menus this applies at every width. */
@media (min-width: 783px) and (max-width: 1100px) {
	.gzfc-header-cat-item:nth-last-child(-n+2) > .gzfc-header-cat-dropdown {
		left: auto;
		right: 0;
	}
}
@media (min-width: 783px) {
	.gzfc-hcm-align-right .gzfc-header-cat-item:nth-last-child(-n+2) > .gzfc-header-cat-dropdown {
		left: auto;
		right: 0;
	}
}


/* -------------------------------------------------------------------------
   5. Hero Section (<= 782px)
   The two decorative L-shaped corner brackets are 120px squares placed 24px
   in from the corners. On a 190px-tall phone hero they crossed the title,
   subtitle and buttons. Smaller, closer to the corner and fainter here.
   ------------------------------------------------------------------------- */
@media (max-width: 782px) {
	.gzfc-hero .gzfc-hero-corner {
		width: 44px;
		height: 44px;
		opacity: .35;
	}
	.gzfc-hero .gzfc-hero-corner--tl { top: 12px; left: 12px; }
	.gzfc-hero .gzfc-hero-corner--br { bottom: 12px; right: 12px; }

	.gzfc-hero .gzf-hero-title,
	.gzfc-hero .gzf-hero-subtitle {
		overflow-wrap: anywhere;
	}
}
@media (max-width: 480px) {
	/* Two buttons side by side share the row instead of leaving a ragged gap. */
	.gzfc-hero .gzf-hero-buttons {
		gap: 10px;
	}
	.gzfc-hero .gzf-hero-buttons .gzf-btn {
		flex: 1 1 auto;
		justify-content: center;
		text-align: center;
		min-height: 44px;
	}
}


/* -------------------------------------------------------------------------
   6. Post / Page content (<= 782px)
   Wide tables and long code lines scroll inside their own box instead of
   pushing the whole page sideways.
   ------------------------------------------------------------------------- */
@media (max-width: 782px) {
	.gzf-content-area .wp-block-table {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	.gzf-content-area pre {
		overflow-x: auto;
		max-width: 100%;
	}
}


/* -------------------------------------------------------------------------
   7. Search "Not Found" card (<= 782px)
   16px text in the search field stops iOS Safari zooming the page in when
   the field is tapped; the request button may never be wider than the card
   (its text is editable in the Customizer and can be long).
   ------------------------------------------------------------------------- */
@media (max-width: 782px) {
	.gzfc-snf-form .gzf-search-field,
	.gzfc-snf-form input[type="search"] {
		font-size: 16px;
	}
	.gzf-btn.gzfc-snf-btn {
		max-width: 100%;
		justify-content: center;
		text-align: center;
	}
}


/* =========================================================================
   Mobile audit additions (320 / 375 / 390 / 430px and up to 782px).
   Additive only: every rule sits inside a max-width query, so desktop is
   untouched, and no Customizer setting is read or changed.
   Covers: no sideways scrolling, nothing leaving the screen, no text
   overlap, cards / slider / images resizing without distortion, category
   labels staying inside their card, single post content, related posts,
   comments and footer.
   ========================================================================= */
@media (max-width: 782px) {
	/* Grid/flex children may shrink below their content width — the usual
	   cause of a card or column pushing the page wider than the screen. */
	.gzf-layout > *,
	.gzf-content-area,
	.gzf-sidebar,
	.gzf-post-grid > *,
	.gzfc-related-grid > *,
	.gzfc-fs-body > * { min-width: 0; }

	/* Cards: images fill their box without stretching; text wraps. */
	.gzf-card { max-width: 100%; }
	.gzf-card-media img,
	.gzf-card-placeholder { width: 100%; height: 100%; object-fit: cover; }
	.gzf-card-title,
	.gzf-card-title a,
	.gzf-card-excerpt { overflow-wrap: anywhere; word-break: normal; }

	/* Category labels: stay inside the card image, never wider than it. */
	.gzfc-card-cat-tag {
		max-width: calc(100% - 12px);
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		box-sizing: border-box;
	}
	.gzfc-card-info { flex-wrap: wrap; justify-content: center; row-gap: 2px; }
	.gzfc-card-info-cat { max-width: 100%; overflow-wrap: anywhere; }

	/* Feature slider: stage never wider than the screen; text stays inside. */
	.gzfc-feature-slider,
	.gzfc-fs-body,
	.gzfc-fs-stage { max-width: 100%; }
	.gzfc-fs-slide-title { overflow-wrap: anywhere; }
	.gzfc-fs-thumb { min-width: 0; max-width: 100%; }
	.gzfc-fs-thumb-title { overflow-wrap: anywhere; }

	/* Single post content. */
	.gzf-single-body,
	.gzf-single-title { overflow-wrap: anywhere; }
	.gzf-single-body img,
	.gzf-single-body video,
	.gzf-single-body iframe,
	.gzf-single-body embed { max-width: 100%; }
	.gzf-single-body img { height: auto; }
	.gzf-single-body table { display: block; max-width: 100%; overflow-x: auto; }
	.gzf-share-buttons { flex-wrap: wrap; }

	/* Related posts: heading wraps, grid never overflows. */
	.gzf-related-posts .gzf-section-title { overflow-wrap: anywhere; }
	.gzfc-related .gzfc-related-grid { gap: 12px; }

	/* Comments / Leave a Comment. */
	.gzf-comments-area { min-width: 0; max-width: 100%; }
	.comment-reply-title,
	.gzf-comments-title { overflow-wrap: anywhere; }
	.comment-form input[type="text"],
	.comment-form input[type="email"],
	.comment-form input[type="url"],
	.comment-form textarea { width: 100%; max-width: 100%; box-sizing: border-box; }
	.comment-form-cookies-consent { display: flex; gap: 8px; align-items: flex-start; }
	.gzf-comment { gap: 10px; min-width: 0; }
	.gzf-comment-body,
	.gzf-comment-content { min-width: 0; overflow-wrap: anywhere; }
	.gzf-comment-list .children { margin-left: 14px; }

	/* Footer. */
	.gzf-footer img,
	.gzf-footer table { max-width: 100%; }
	.gzf-footer-columns > *,
	.gzf-footer-bottom-inner > * { min-width: 0; overflow-wrap: anywhere; }
	.gzf-footer-bottom-inner { justify-content: center; text-align: center; }
}

/* Narrow phones (320px – 390px): tighter padding so two-column cards and
   the slider's thumbnails keep readable text without overlapping. */
@media (max-width: 400px) {
	.gzf-card-body { padding: 12px 10px 14px; }
	.gzf-post-grid { gap: 12px; }
	.gzf-card-title { font-size: .92rem; line-height: 1.3; }
	.gzfc-fs-thumb-title { font-size: .82rem; }
	.gzfc-fs-slide-title { font-size: clamp(1.05rem, 5.4vw, 1.3rem); }
	.gzfc-related .gzfc-related-grid { gap: 10px; }
	.gzf-comment-list .children { margin-left: 8px; }
}