/**
 * InsurePro - responsive layer
 *
 * main.css is written mobile-first; this file only widens things as the
 * viewport grows. Loaded after main.css so the media queries always win.
 *
 * Breakpoints
 *   480px   large phones
 *   680px   small tablets / phone landscape
 *   860px   tablets - the navigation switches from drawer to inline bar
 *   1024px  small laptops - the sidebar appears
 *   1280px  large screens
 *
 * @package InsurePro
 * @since   1.0.0
 */

/*--------------------------------------------------------------
480px - large phones
--------------------------------------------------------------*/

@media (min-width: 480px) {

	.container {
		padding-inline: 1.5rem;
	}

	.newsletter-form--inline .newsletter-form__row,
	.newsletter-form--stacked .newsletter-form__row {
		flex-direction: row;
	}

	.newsletter-form__submit {
		flex-shrink: 0;
	}

	.entry--single,
	.entry--page,
	.entry--full,
	.comments-area,
	.landing__card,
	.contact-form-wrap,
	.contact-details {
		padding: var(--ip-space-lg);
	}

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

/*--------------------------------------------------------------
680px - small tablets
--------------------------------------------------------------*/

@media (min-width: 680px) {

	:root {
		--ip-header-h: 76px;
	}

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

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

	.stats-grid {
		grid-template-columns: repeat(4, 1fr);
	}

	/* List entries put the image beside the summary. */
	.entry--list {
		grid-template-columns: 260px 1fr;
		gap: var(--ip-space-md);
		align-items: start;
	}

	.entry--list .post-thumbnail {
		aspect-ratio: 4 / 3;
	}

	.author-box {
		grid-template-columns: 96px 1fr;
		align-items: start;
		padding: var(--ip-space-lg);
	}

	.post-navigation .nav-links {
		grid-template-columns: repeat(2, 1fr);
	}

	.contact-form__row {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--ip-space-md);
	}

	.landing__proof-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.site-info__inner {
		flex-direction: row;
		justify-content: space-between;
		text-align: left;
	}

	.newsletter {
		padding: var(--ip-space-lg);
	}

	.section__header--split {
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
	}

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

/*--------------------------------------------------------------
860px - navigation becomes a horizontal bar
--------------------------------------------------------------*/

@media (min-width: 860px) {

	.menu-toggle {
		display: none;
	}

	/* Undo the mobile drawer. */
	.main-navigation {
		position: static;
		width: auto;
		padding: 0;
		background: none;
		box-shadow: none;
		transform: none;
		overflow: visible;
		visibility: visible;
		flex: 1;
		display: flex;
		justify-content: center;
	}

	.nav-menu {
		display: flex;
		align-items: center;
		gap: 0.35rem;
	}

	.nav-menu > li {
		border-bottom: 0;
	}

	.nav-menu > li > a {
		padding: 0.55rem 0.85rem;
		border-radius: var(--ip-radius-sm);
		font-size: 0.92rem;
		transition: background-color var(--ip-speed) var(--ip-ease), color var(--ip-speed) var(--ip-ease);
	}

	.nav-menu > li > a:hover {
		background: var(--ip-bg-alt);
	}

	/* Animated underline for the active item. */
	.nav-menu > .current-menu-item > a,
	.nav-menu > .current_page_item > a,
	.nav-menu > .current-menu-ancestor > a {
		position: relative;
		color: var(--ip-primary);
	}

	.nav-menu > .current-menu-item > a::after,
	.nav-menu > .current_page_item > a::after,
	.nav-menu > .current-menu-ancestor > a::after {
		content: "";
		position: absolute;
		left: 0.85rem;
		right: 0.85rem;
		bottom: 0.15rem;
		height: 2px;
		background: var(--ip-accent);
		border-radius: 2px;
	}

	/* Dropdowns */
	.nav-menu .menu-item-has-children > a {
		padding-right: 1.9rem;
	}

	.nav-menu .sub-menu {
		display: block;
		position: absolute;
		top: 100%;
		left: 0;
		z-index: 50;
		min-width: 230px;
		margin: 0;
		padding: 0.5rem;
		background: var(--ip-white);
		border: 1px solid var(--ip-border);
		border-radius: var(--ip-radius);
		box-shadow: var(--ip-shadow);
		opacity: 0;
		visibility: hidden;
		transform: translateY(8px);
		transition: opacity var(--ip-speed) var(--ip-ease),
			transform var(--ip-speed) var(--ip-ease),
			visibility var(--ip-speed) var(--ip-ease);
	}

	.nav-menu li:hover > .sub-menu,
	.nav-menu li:focus-within > .sub-menu,
	.nav-menu .sub-menu.is-open {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}

	/* Third level opens to the side. */
	.nav-menu .sub-menu .sub-menu {
		top: -0.5rem;
		left: 100%;
	}

	.nav-menu .sub-menu a {
		padding: 0.5rem 0.75rem;
		border-radius: var(--ip-radius-sm);
		font-size: 0.9rem;
		color: var(--ip-text);
	}

	.nav-menu .sub-menu a:hover {
		background: var(--ip-bg-alt);
		color: var(--ip-primary);
	}

	.submenu-toggle {
		top: 50%;
		right: 0.35rem;
		transform: translateY(-50%);
		padding: 0.2rem;
		pointer-events: none; /* Hover handles it on desktop. */
	}

	.submenu-toggle[aria-expanded="true"] {
		transform: translateY(-50%) rotate(180deg);
	}

	.menu-item--cta > a {
		margin-top: 0;
	}

	.header-cta {
		display: inline-flex;
	}

	.header-cta--mobile {
		display: none;
	}

	.nav-backdrop {
		display: none;
	}

	/* Hero splits into copy + image. */
	.hero {
		padding-block: var(--ip-space-2xl);
	}

	.hero--has-image .hero__inner {
		grid-template-columns: 1.05fr 0.95fr;
		align-items: center;
		gap: var(--ip-space-xl);
	}

	.landing__hero-inner {
		grid-template-columns: 1fr 440px;
		align-items: center;
		gap: var(--ip-space-xl);
	}

	.contact-grid {
		grid-template-columns: 340px 1fr;
	}

	.site-footer__grid {
		grid-template-columns: 1fr 1.6fr;
	}

	.site-footer__widgets {
		grid-template-columns: repeat(3, 1fr);
	}

	.post-grid--3 {
		grid-template-columns: repeat(3, 1fr);
	}

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

	.cat-grid {
		grid-template-columns: repeat(4, 1fr);
	}

	.error-404__cards {
		grid-template-columns: repeat(4, 1fr);
	}

	.testimonial {
		padding: var(--ip-space-xl) var(--ip-space-lg);
	}

	.testimonial__quote {
		font-size: 1.32rem;
	}

	.newsletter {
		grid-template-columns: 1fr 1fr;
		align-items: center;
		gap: var(--ip-space-xl);
		padding: var(--ip-space-xl);
	}
}

/*--------------------------------------------------------------
1024px - the sidebar appears
--------------------------------------------------------------*/

@media (min-width: 1024px) {

	.layout {
		grid-template-columns: minmax(0, 1fr) 330px;
		padding-top: var(--ip-space-xl);
	}

	/* Templates and pages without widgets go full width. */
	.no-sidebar .layout,
	.error-404-main {
		grid-template-columns: minmax(0, 1fr);
	}

	.no-sidebar .site-main,
	.site-main--full {
		max-width: none;
	}

	/* Sidebar follows the reader down long articles. */
	.sidebar__inner {
		position: sticky;
		top: calc(var(--ip-header-h) + var(--ip-space-md));
	}

	.post-grid--4 {
		grid-template-columns: repeat(4, 1fr);
	}

	.entry--list {
		grid-template-columns: 300px 1fr;
	}

	.section {
		padding-block: var(--ip-space-2xl);
	}

	/* Full-width templates keep a readable measure for plain text. */
	.entry-content--wide > p,
	.entry-content--wide > ul,
	.entry-content--wide > ol,
	.entry-content--wide > h2,
	.entry-content--wide > h3,
	.entry-content--wide > blockquote {
		max-width: 860px;
	}
}

/*--------------------------------------------------------------
1280px - large screens
--------------------------------------------------------------*/

@media (min-width: 1280px) {

	.container {
		padding-inline: 2rem;
	}

	.hero__title {
		font-size: 3.6rem;
	}

	.back-to-top {
		right: 2rem;
		bottom: 2rem;
	}
}

/*--------------------------------------------------------------
Landscape phones - keep the drawer usable when height is tight
--------------------------------------------------------------*/

@media (max-height: 480px) and (max-width: 859px) {

	.main-navigation {
		padding-top: calc(var(--ip-header-h) + 0.5rem);
	}

	.nav-menu a {
		padding-block: 0.55rem;
	}
}

/*--------------------------------------------------------------
Touch devices - no hover-only dropdowns
--------------------------------------------------------------*/

@media (hover: none) {

	.nav-menu .sub-menu {
		opacity: 1;
		visibility: hidden;
		transform: none;
	}

	.nav-menu .sub-menu.is-open {
		visibility: visible;
	}

	.submenu-toggle {
		pointer-events: auto;
	}

	/* Hover lifts do nothing useful on touch, so drop them. */
	.btn:hover,
	.cat-card:hover,
	.entry--card:hover {
		transform: none;
		box-shadow: var(--ip-shadow-sm);
	}
}