/**
 * Responsive CSS — Ontwo Theme
 *
 * Media queries for tablet and mobile layouts
 * Adjusts desktop styles for smaller viewports
 *
 * Breakpoints:
 * - Tablet: max-width 1024px
 * - Mobile: max-width 875px
 *
 * Structure:
 * 1. Tablet Media Queries (1024px and below)
 * 2. Mobile Media Queries (875px and below)
 *
 * No colors, no new components - only layout adjustments
 */

/* ==========================================================================
   Base Responsive Rules (Desktop-First)
   ========================================================================== */

/**
 * Hamburger menu toggle - hidden on desktop
 * Visibility controlled here to keep all responsive logic in one file
 */
.menutoggle {
	display: none;
}

/* ==========================================================================
   1. Tablet Media Queries (max-width: 1024px)
   ========================================================================== */

@media screen and (max-width: 1024px) {

	/* Layout adjustments
	   ====================================================================== */

	/**
	 * Content and sidebar layout
	 * Stack sidebar below content on tablet
	 */
	.content-main {
		width: 100%;
	}

	/**
	 * Page layout
	 * Stack main content and sidebar vertically
	 */
	.page-layout {
		flex-direction: column;
	}

	.page-layout__main {
		width: 100%;
	}

	.page-layout__sidebar {
		width: 100%;
		margin-top: var(--spacing-unit);
	}

	/* Post card grid adjustments
	   ====================================================================== */

	/**
	 * Post card grid
	 * Reduce minimum column width for better fit
	 */
	.post-card-grid {
		grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
		gap: var(--spacing-half);
	}

	/* Footer adjustments
	   ====================================================================== */

	/**
	 * Site footer
	 * Reduce vertical spacing
	 */
	.site-footer {
		padding-top: var(--spacing-1-5x);
		padding-bottom: var(--spacing-1-5x);
	}

	/**
	 * Footer meta
	 * Reduce top margin
	 */
	.footer-meta {
		margin-top: var(--spacing-1-5x);
	}

	/* Widget adjustments
	   ====================================================================== */

	/**
	 * Widget spacing
	 * Reduce bottom margin
	 */
	.widget {
		margin-bottom: var(--spacing-half);
	}

}

/* ==========================================================================
   2. Mobile Media Queries (max-width: 875px)
   ========================================================================== */

@media screen and (max-width: 875px) {

	/* Base spacing adjustments
	   ====================================================================== */

	/**
	 * Adjust spacing units for mobile
	 * Override CSS custom properties for smaller screens
	 */
	@media (max-width: 875px) {
		body {
			--spacing-unit: 30px;
			--spacing-half: 15px;
			--spacing-1-5x: 45px;
		}
	}

	/* Layout adjustments
	   ====================================================================== */

	/**
	 * Container width
	 * Full width with smaller padding on mobile
	 */
	.container {
		width: calc(100% - 20px);
	}

	/**
	 * Main content area
	 * Reduce top margin
	 */
	body:not(.home) main.main {
		margin-top: var(--spacing-unit);
		padding-bottom: var(--spacing-half);
	}

	/* Header adjustments
	   ====================================================================== */

	/**
	 * Mobile header bar
	 * Fixed header container for mobile with logo and menu toggle
	 */
	.header-branding {
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: fixed;
		z-index: 50;
		top: 0;
		left: 0;
		width: 100%;
		height: 60px;
		background: #ffffff;
		box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.3);
	}

	/**
	 * Override .layout-container behavior inside mobile header
	 * Remove centering/max-width to prevent content from being pushed off-screen
	 * Add justify-content to space out logo and hamburger
	 */
	.header-branding .layout-container {
		width: 100%;
		max-width: none;
		margin: 0;
		padding: 0;
		justify-content: space-between;
	}

	.header-branding .brand {
		margin: 3px 0 0 20px;
	}

	/**
	 * Logo sizing for mobile
	 * Further reduction
	 */
	.header-main .brand img {
		width: 120px;
	}

	/**
	 * Social icons in mobile header
	 * Hide in mobile header, show in footer instead
	 */
	.header-branding .social-icons {
		display: none;
	}

	footer .social-icons {
		display: flex;
		margin-right: auto;
		margin-bottom: 15px;
	}

	/**
	 * Mobile header buttons
	 * Show menu toggle
	 */
	.header-branding__controls {
		display: block;
		margin-right: 20px;
	}

	/**
	 * Hamburger menu toggle button
	 * Structure and icon
	 */
	.menutoggle {
		display: block;
		position: relative;
		width: 40px;
		height: 40px;
		background: transparent;
		border: none;
		cursor: pointer;
		padding: 8px;
	}

	/* Hamburger icon (three lines) */
	.menutoggle::before,
	.menutoggle::after {
		content: '';
		position: absolute;
		left: 8px;
		width: 24px;
		height: 3px;
		background: #E98C00;
		transition: transform 0.3s ease;
	}

	.menutoggle::before {
		top: 12px;
		box-shadow: 0 8px 0 #E98C00; /* Middle line via box-shadow */
	}

	.menutoggle::after {
		top: 28px;
	}

	/* Compensate for smaller fixed header on mobile */
	body {
		padding-top: 60px;
	}

	/* Mobile menu visibility
	   ====================================================================== */

	/**
	 * Primary navigation
	 * Hide by default, reveal when header has 'open' class
	 */
	.nav-primary {
		max-height: 0;
		overflow: hidden;
		transition: max-height 0.3s ease;
	}

	.header-main.open .nav-primary {
		max-height: 100vh;
		overflow-y: auto;
	}

	/**
	 * Animate hamburger to X when open
	 */
	.header-main.open .menutoggle::before {
		transform: rotate(45deg);
		box-shadow: none;
		top: 18px;
	}

	.header-main.open .menutoggle::after {
		transform: rotate(-45deg);
		top: 18px;
	}

	/**
	 * Sub-menu transitions
	 */
	.nav-primary .sub-menu {
		transition: max-height 0.3s ease;
		max-height: 0;
		overflow: hidden;
	}

	.nav-primary .menu-item-has-children.open > .sub-menu {
		max-height: 2000px;
	}

	/* Primary navigation adjustments
	   ====================================================================== */

	/**
	 * Primary navigation
	 * Full width stacked layout for mobile
	 */

	.nav-primary .layout-container {
		display: block;
		width: 100%;
		max-width: none;
		padding: 0;
		margin: 0;
	}

	.nav-primary .nav {
		display: block;
		margin: 0;
	}

	/**
	 * Top-level menu items
	 * 20px left padding, 50px right (for foldout toggle clearance)
	 */
	.nav-primary > .layout-container > .nav > .menu-item > a {
		padding: 1em 50px 1em 20px;
		font-size: 20px;
		font-weight: 500;
		color: #ffffff;
		border-bottom: 1px solid rgba(255, 255, 255, 0.25);
	}

	.nav-primary .menu-item-has-children:hover > .sub-menu {
		display: none;
	}

	/**
	 * Primary navigation - level 2
	 * Static positioning for mobile dropdown
	 */
	.nav-primary .sub-menu {
		position: static;
		background: #ffffff;
		box-shadow: none;
        padding-left: 20px;
	}

	.nav-primary .sub-menu .menu-item > a {
		width: 100%;
		padding: 0.5em 50px 0.5em 50px; /* Left padding for chevron */
		font-size: 20px;
		font-weight: 500;
		color: #E98C00;
		position: relative;
	}

	/**
	 * Level 2 items - add chevron-right indicator on the left for ALL items
	 */
	.nav-primary .sub-menu .menu-item > a::before {
		content: '';
		display: inline-block;
		width: 20px;
		height: 20px;
		position: absolute;
		left: 16px;
		top: 50%;
		transform: translateY(-50%);
		background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23E98C00" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="8.5 5 15.5 12 8.5 19"></polyline></svg>');
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
	}

	.nav-primary .sub-menu .menu-item-has-children {
		position: relative;
	}

	.nav-primary .sub-menu .menu-item:not(:last-child) > a {
		border-bottom: 1px solid rgba(17, 17, 17, 0.1);
	}

	/**
	 * Level 2 hover and active states
	 */
	.nav-primary .sub-menu .menu-item.open > a,
	.nav-primary .sub-menu .current-menu-item > a,
	.nav-primary .sub-menu .current_page_item > a {
		color: #B83288;
		background: #ffffff;
	}

	/**
	 * Level 2 open/active state - change chevron color to pink
	 */
	.nav-primary .sub-menu .menu-item.open > a::before,
	.nav-primary .sub-menu .current-menu-item > a::before,
	.nav-primary .sub-menu .current_page_item > a::before {
		background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23B83288" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="8.5 5 15.5 12 8.5 19"></polyline></svg>');
	}


	.nav-primary .open > .sub-menu {
		display: block !important;
	}

	/**
	 * Open state for top-level menu items
	 * Highlights expanded parent with orange border
	 */
	.nav-primary > .layout-container > .nav > .menu-item.open > a {
		border-bottom-color: #E98C00;
	}

	/**
	 * Primary navigation - level 3
	 * Reset right-most alignment for mobile
	 */
	.nav-primary > .layout-container > .nav > .menu-item:nth-last-child(2) .sub-menu .sub-menu,
	.nav-primary > .layout-container > .nav > .menu-item:last-child .sub-menu .sub-menu {
		left: 0;
		right: auto;
	}

	/**
	 * Level 3 submenu styling
	 * Maintains color consistency within white background
	 */
	.nav-primary .sub-menu .sub-menu {
		background: #ffffff;
	}

	.nav-primary .sub-menu .sub-menu .menu-item > a {
		color: #E98C00;
		font-weight: 400;
		position: relative;
	}

	/**
	 * Level 3 items - add chevron-right indicator on the left for ALL items
	 */
	.nav-primary .sub-menu .sub-menu .menu-item > a::before {
		content: '';
		display: inline-block;
		width: 20px;
		height: 20px;
		position: absolute;
		left: 23px; /* Slightly more indented than level 2 */
		top: 50%;
		transform: translateY(-50%);
		background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23E98C00" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="8.5 5 15.5 12 8.5 19"></polyline></svg>');
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
	}

	.nav-primary .sub-menu .sub-menu .menu-item.open > a,
	.nav-primary .sub-menu .sub-menu .current-menu-item > a,
	.nav-primary .sub-menu .sub-menu .current_page_item > a {
		color: #B83288;
	}

	/**
	 * Level 3 open/active state - change chevron color to pink
	 */
	.nav-primary .sub-menu .sub-menu .menu-item.open > a::before,
	.nav-primary .sub-menu .sub-menu .current-menu-item > a::before,
	.nav-primary .sub-menu .sub-menu .current_page_item > a::before {
		background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23B83288" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="8.5 5 15.5 12 8.5 19"></polyline></svg>');
	}

	/**
	 * Foldout toggle for mobile dropdowns
	 * Matches legacy dimensions and styling
	 */
	.foldout-toggle {
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		right: 0;
		top: 5px;
		height: 55px;
		width: 55px;
		background: transparent;
		border: none;
		cursor: pointer;
		z-index: 30;
		padding: 0;
	}

	.foldout-toggle .icon-chevron-down {
		color: #ffffff;
		font-size: 20px;
		transition: transform 0.3s ease;
	}

	/**
	 * Rotate chevron when submenu is open
	 */
	.nav-primary .open > .foldout-toggle .icon-chevron-down {
		transform: rotate(180deg);
	}

	/**
	 * Pink chevron for level 2 items
	 */
	.nav-primary .sub-menu .foldout-toggle .icon-chevron-down {
		color: #B83288;
	}

	/**
	 * Listen button for mobile
	 * Full width centered
	 */
	.nav-primary .btn.listen {
		margin: 8px 0;
		padding: 12px 20px;
		background: #B83288;
		color: #ffffff;
		height: 40px;
		text-transform: none;
		font-weight: bold;
		text-align: center;
		width: 50%;
		position: relative;
		left: 50%;
		transform: translateX(-50%);
	}

	.nav-primary .btn.listen:hover,
	.nav-primary .btn.listen:focus {
		background-color: #a02976;
	}

	/**
	 * Sub-sub-menu indent for mobile
	 * Adds visual hierarchy for level 3 items
	 */
	.nav .open .sub-menu .sub-menu > li a {
		padding-left: 57px; /* 50px + 7px */
	}


	/* Post card adjustments
	   ====================================================================== */

	/**
	 * Post list cards
	 * Reduce spacing between items
	 */
	.post-list .card {
		margin-top: var(--spacing-small);
		margin-bottom: var(--spacing-small);
		padding-top: var(--spacing-small);
		padding-bottom: var(--spacing-small);
	}

	/**
	 * Post card grid
	 * Single column layout on mobile
	 */
	.post-card-grid {
		grid-template-columns: 1fr;
		gap: var(--spacing-half);
	}

	/**
	 * Card title sizing
	 * Reduce size for mobile
	 */
	.card__title {
		font-size: var(--font-size-base);
	}

	/**
	 * Card image
	 * Reduce bottom margin
	 */
	.card__image {
		margin-bottom: var(--spacing-small);
	}

	/* Footer adjustments
	   ====================================================================== */

	/**
	 * Site footer
	 * Further reduce spacing
	 */
	.site-footer {
		padding-top: var(--spacing-unit);
		padding-bottom: var(--spacing-unit);
	}

	/**
	 * Footer navigation
	 * Stack navigation vertically
	 */
	.footer-menu {
		flex-direction: column;
		gap: var(--spacing-small);
	}

	/**
	 * Footer social icons
	 * Reduce spacing
	 */
	.footer-social ul {
		gap: var(--spacing-small);
	}

	/**
	 * Footer meta
	 * Reduce top margin
	 */
	.footer-meta {
		margin-top: var(--spacing-unit);
		padding-top: var(--spacing-small);
		padding-bottom: var(--spacing-small);
	}

	/**
	 * Site credits and info
	 * Reduce bottom margin
	 */
	.site-credits {
		margin-bottom: var(--spacing-tiny);
	}

	/* Widget adjustments
	   ====================================================================== */

	/**
	 * Widget spacing
	 * Further reduce for mobile
	 */
	.widget {
		margin-bottom: var(--spacing-half);
	}

	/**
	 * Widget heading
	 * Reduce size for mobile
	 */
	.widget__heading {
		font-size: var(--font-size-h4);
		margin-bottom: var(--spacing-tiny);
	}

	/**
	 * Widget content
	 * Reduce spacing
	 */
	.widget__content {
		margin-bottom: var(--spacing-tiny);
	}

	.widget__content p {
		margin-top: var(--spacing-tiny);
	}

	/* Typography adjustments
	   ====================================================================== */

	/**
	 * Heading sizes for mobile
	 * Reduce all heading sizes
	 */
	h1 {
		font-size: 28px;
	}

	h2 {
		font-size: 20px;
	}

	h3 {
		font-size: 18px;
	}

	h4 {
		font-size: var(--font-size-base);
	}

	h5 {
		font-size: var(--font-size-small);
	}

	h6 {
		font-size: var(--font-size-small);
	}

}