/*!
 * SasthoInfo Theme — Responsive Stylesheet
 * Six device categories: Small Mobile, Large Mobile, Small Tablet,
 * Large Tablet, Laptop/Desktop, Large Desktop.
 * Verified against 320/375/390/414/480/576/768/820/912/1024/1280/1440/1920px.
 */

/* ==========================================================================
   Large Desktop (>= 1441px) — scale the layout up on big monitors and
   projectors instead of leaving a small fixed-width column surrounded by
   large empty margins. Uses CSS max() so this only ever widens the
   container beyond whatever the site owner set in the Customizer — it
   never overrides an intentionally larger custom value.
   ========================================================================== */
@media (min-width: 1441px) {
	.container { padding-left: 32px; padding-right: 32px; }
	:root {
		--si-container-width: max(var(--si-container-width), 1360px);
		--si-content-width: max(var(--si-content-width), 860px);
	}
}
@media (min-width: 1920px) {
	:root {
		--si-container-width: max(var(--si-container-width), 1600px);
		--si-content-width: max(var(--si-content-width), 920px);
	}
	body { font-size: calc(var(--si-font-body-size) + 1px); }
	.hero-title { font-size: calc(var(--si-font-h1-size) + 8px); }
}

/* ==========================================================================
   Laptop/Desktop (1025px – 1440px) — this is effectively the base design;
   no overrides needed beyond the CSS variables already in main.css.
   ========================================================================== */

/* ==========================================================================
   Large Tablet (768px – 1024px)
   ========================================================================== */
@media (max-width: 1024px) {
	/* NOTE: the header layout for this breakpoint is defined once, in the
	   drawer-navigation block further down. Nothing here may touch
	   .header-inner, otherwise the two blocks fight each other. */

	.site-content-wrap { flex-direction: column; }
	.has-sidebar-layout .site-main,
	.full-width-layout .site-main { max-width: 100%; }
	#secondary.widget-area { width: 100%; flex: 1 1 100%; order: 2; }
	.sidebar-left { flex-direction: column; }

	.sasthoinfo-single-article,
	.sasthoinfo-page-article { padding: 24px; }
}

/* Desktop-only nav (hide hamburger + drawer chrome, show inline menu). */
@media (min-width: 1025px) {
	.menu-toggle { display: none; }
	.nav-drawer-panel { position: static; width: auto; height: auto; transform: none; box-shadow: none; padding: 0; overflow: visible; display: contents; }
	.nav-drawer-close { display: none; }
	.drawer-footer { display: none; }
	.nav-drawer-overlay { display: none; }
	/* On desktop the arrow is purely decorative (submenus open on hover),
	   so it shouldn't behave like a tap target. */
	.dropdown-arrow { pointer-events: none; }
}

/* ==========================================================================
   Tablet + Mobile: hamburger drawer navigation (<= 1024px, covers Small
   Tablet, Large Tablet, Large Mobile and Small Mobile alike).
   ========================================================================== */
@media (max-width: 1024px) {
	/* Three-column header: hamburger (left) — logo (center) — search (right).
	   Every item declares BOTH its column and grid-row: 1. Without the
	   explicit row, CSS grid's sparse auto-placement never moves its cursor
	   backwards inside a row: .site-branding comes first in the HTML and
	   claims column 2, so .main-navigation (column 1, but later in the DOM)
	   was pushed down to a second row — which is why the mobile header kept
	   rendering as the old stacked layout instead of this one. */
	.header-inner {
		display: grid;
		grid-template-columns: 44px minmax(0, 1fr) 44px;
		grid-template-rows: auto;
		align-items: center;
		column-gap: 8px;
		row-gap: 0;
		flex-wrap: nowrap;
	}

	.header-inner > .main-navigation {
		grid-column: 1;
		grid-row: 1;
		justify-self: start;
		display: flex;
		align-items: center;
		height: 100%;
	}

	.header-inner > .site-branding {
		grid-column: 2;
		grid-row: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		min-width: 0;
		height: 100%;
	}
	.site-identity { text-align: center; min-width: 0; }
	.site-title { font-size: 18px; }
	.site-description { display: none; }

	.header-inner > .header-actions {
		grid-column: 3;
		grid-row: 1;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		height: 100%;
		justify-self: end;
		gap: 0;
	}
	.header-actions .header-dark-toggle { display: none; } /* Lives inside the drawer on mobile instead. */

	.menu-toggle {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.main-navigation { position: static; }

	/* The sliding off-canvas panel itself. */
	.nav-drawer-panel {
		position: fixed;
		top: 0;
		left: 0;
		width: 280px;
		max-width: 82vw;
		height: 100vh;
		background: var(--si-color-content-bg);
		color: var(--si-color-text);
		display: flex;
		flex-direction: column;
		padding: 70px 16px 24px;
		transform: translateX(-100%);
		transition: transform 0.3s ease;
		z-index: 100;
		overflow-y: auto;
		box-shadow: 10px 0 30px rgba(0, 0, 0, 0.25);
	}
	.nav-drawer-panel.is-open { transform: translateX(0); }

	/* Dedicated close (X) button inside the panel — see the comment in
	   header.php for why the hamburger button's own X state isn't usable
	   once the panel is open (the panel physically covers it). This one is
	   a normal descendant of the panel, so it's always drawn on top of it
	   and always clickable. */
	.nav-drawer-close {
		position: absolute;
		top: 16px;
		right: 16px;
		width: 38px;
		height: 38px;
		display: flex;
		align-items: center;
		justify-content: center;
		background: var(--si-color-bg);
		border: 1px solid var(--si-color-border);
		border-radius: 50%;
		color: var(--si-color-text);
		flex: 0 0 auto;
	}
	.nav-drawer-close svg { width: 16px; height: 16px; }
	.nav-drawer-close:hover { background: var(--si-color-border); }

	.primary-menu {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		width: 100%;
		gap: 0;
	}
	.primary-menu > li { width: 100%; }
	.primary-menu a { padding: 12px 10px; color: var(--si-color-text); }
	.primary-menu > li > a:hover,
	.primary-menu > li > a:focus,
	.primary-menu > li.current-menu-item > a { color: var(--si-color-primary); }
	.primary-menu ul {
		display: none;
		position: static;
		box-shadow: none;
		background: transparent;
		padding-inline-start: 16px;
	}
	.primary-menu ul a { color: var(--si-color-text); }

	/* Tap-only accordion. The desktop rules open a submenu on :hover and on
	   .focus-within; on a touch screen a single tap fires a synthetic hover,
	   which made submenus flash open by themselves and fight the arrow
	   toggle. Neutralise both here so .submenu-open (set by the arrow in
	   navigation.js) is the only thing that can open a submenu on mobile. */
	.primary-menu li:hover > ul,
	.primary-menu li.focus-within > ul { display: none; }
	.primary-menu li.submenu-open > ul { display: flex; }

	.menu-item-has-children { position: relative; }
	.menu-item-has-children > a {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 8px;
	}
	/* Chevron points down when closed, up when the accordion is open. */
	.menu-item-has-children.submenu-open > a .dropdown-arrow::before {
		transform: rotate(-135deg);
	}
	.dropdown-arrow::before { transition: transform 0.2s ease; }
	/* The single server-rendered .dropdown-arrow (see
	   inc/class-nav-walker.php) is the one and only tap target here —
	   made bigger and easier to hit with a thumb than the tiny inline
	   chevron is on its own. */
	.dropdown-arrow {
		width: 20px;
		height: 20px;
		padding: 8px;
		margin-inline-start: 4px;
		box-sizing: content-box;
	}

	/* Dark-mode toggle relocated inside the drawer footer on mobile. */
	.drawer-footer {
		display: block;
		margin-top: auto;
		padding-top: 16px;
		border-top: 1px solid var(--si-color-border);
	}

	.related-posts-grid { grid-template-columns: 1fr; }
	.sasthoinfo-post-nav { grid-template-columns: 1fr; }
	.nav-next { text-align: left; }

	/* List card on tablet: narrower image, tighter body, one line of excerpt. */
	.posts-grid.layout-list .card-thumb-wrap { flex: 0 0 190px; max-width: 190px; }
	.card-body-list { padding: 14px 16px; gap: 7px; }
	.card-body-list .card-title { font-size: 17px; }
	.card-excerpt-list { font-size: 14px; -webkit-line-clamp: 1; }

	.footer-columns { grid-template-columns: repeat(2, 1fr); }

	.author-profile { flex-direction: column; text-align: center; }

	.comments-area,
	.sasthoinfo-single-article,
	.sasthoinfo-page-article { padding: 20px; }

	.hero-height-large { padding: 70px 0; }
}

/* ==========================================================================
   Large Mobile (414px – 576px)
   ========================================================================== */
@media (max-width: 576px) {
	.container { padding-left: 16px; padding-right: 16px; }

	.site-title { font-size: 19px; }
	.site-description { display: none; }

	.hero-title { font-size: 26px; }
	.hero-subtitle { font-size: 15px; }
	.hero-height-medium { padding: 46px 0; }
	.hero-height-large { padding: 56px 0; }

	.card-body { padding: 16px; }
	.card-title { font-size: 18px; }

	/* Phones: every grid becomes a single column, and the list card keeps
	   its horizontal shape with a small thumbnail — stacking it would make
	   it identical to the grid card and lose the point of List layout. */
	.posts-grid.columns-2,
	.posts-grid.columns-3,
	.posts-grid.columns-4 { grid-template-columns: 1fr; }

	.posts-grid.layout-list .card-thumb-wrap { flex: 0 0 116px; max-width: 116px; }
	.card-body-list { padding: 12px 14px; gap: 6px; }
	.card-body-list .card-title { font-size: 15.5px; line-height: 1.4; }
	.card-body-list .sasthoinfo-post-meta { font-size: 11.5px; gap: 3px 10px; }
	.card-excerpt-list { display: none; }
	.card-body-list .sasthoinfo-readmore-btn { font-size: 12px; }

	.header-search-popup { padding: 8vh 14px 14px; }
	.header-search-panel { padding: 22px 18px; }
	.header-search-title { font-size: 16px; }
	.search-form .search-field { padding: 10px 14px; font-size: 15px; }
	.search-form .search-submit { width: 42px; }

	/* Footer columns (about text, menu links, contact info) stay left-
	   aligned on mobile — only the bottom bar (copyright / credit) is
	   centered, so .footer-columns intentionally does NOT get
	   text-align: center here, and the title underline and social icons
	   keep their default left position instead of the centered variants
	   this breakpoint used to apply. */
	.footer-columns { grid-template-columns: 1fr; }
	.footer-bottom { flex-direction: column; text-align: center; }

	.comment-body { flex-direction: column; }
	.comment-list .children { padding-inline-start: 16px; }

	.error-code { font-size: 64px; }
	.error-404-content { padding: 40px 20px; }
}

/* ==========================================================================
   Small Mobile (320px – 413px)
   ========================================================================== */
@media (max-width: 413px) {
	.header-inner { padding-top: 10px; padding-bottom: 10px; }
	.site-logo-fallback { width: 36px; height: 36px; font-size: 18px; }

	.hero-title { font-size: 22px; }
	.hero-subtitle { font-size: 14px; }

	.sasthoinfo-badge { font-size: 11px; padding: 4px 10px; }
	.card-excerpt { font-size: 14px; }

	.card-body .sasthoinfo-readmore-btn,
	.btn { width: 100%; justify-content: center; }
	/* ...but not the list card's button — it stays a compact inline pill
	   next to the horizontal thumbnail, not a full-width block. */
	.card-body-list .sasthoinfo-readmore-btn { width: auto; }

	.share-btn { flex: 1 1 calc(50% - 10px); text-align: center; }

	.popular-post-thumb { flex-basis: 48px; width: 48px; height: 48px; }
}

/* Ensure no element can force horizontal scroll on very narrow viewports. */
@media (max-width: 320px) {
	.container { padding-left: 12px; padding-right: 12px; }
}

/* Touch-friendly tap targets on any touch device regardless of width. */
@media (hover: none) and (pointer: coarse) {
	.primary-menu a,
	.btn,
	.sasthoinfo-readmore-btn,
	.header-search-toggle,
	.dark-mode-toggle,
	.menu-toggle {
		min-height: 44px;
	}
}