/* ========================================
   Responsive Styles
   Extracted from library.css
   ======================================== */

/* ===== 2000px ===== */
@media screen and (min-width: 2000px) {
	#helpfulthings #content-main #page.full > .entry-content {
		max-width: 1200px !important;
	}
	#page.full > .disclaimer > p.result-range-note{
		max-width: calc(1200px - 10rem) !important;
	}
}

/* ===== 1200px ===== */
@media (min-width: 1200px) {
	.emoji-grid {
		grid-template-columns: repeat(auto-fill, minmax(4rem, 1fr));
	}
	
	.emoji-item {
		font-size: 2.25rem;
	}
}

/* ===== 1460px ===== */
@media (max-width: 1460px) {
	.homepage-layout .entry-content {
		h1.page-title {
			font-size: var(--font-size--3xl);
			line-height: .85;
		}

		h2 {
			font-size: var(--font-size--xl);
			line-height: 1.1;
			letter-spacing: 0;

			span.italic{
				margin: 0 var(--space--2xs) 0 var(--space--3xs);
			}
		}
		.homepage-layout .homepage-tools-list li {
			font-size: var(--font-size--s-l);
		}
	}

}

/* ===== 1099px ===== */
@media (max-width: 1099px) {

	#sidebar-right {
		display: none;
	}

	.result-bar-left {
        display: none;
    }
}

/* ===== 1024px ===== */
@media (max-width: 1024px) {
	.expenses-container {
		padding: var(--space--l);
		padding-bottom: 1.875rem;
		grid-template-columns: 1fr;
		gap: var(--space--xl);
	}
	
	.expenses-column-left {
		border-right: none;
		border-bottom: var(--border--thin);
		padding-right: 0;
		padding-bottom: var(--space--xl);
		margin-bottom: var(--space--xl);
	}
	
	.expenses-column-right {
		padding-left: 0;
	}
}

/* ===== 768px ===== */
@media (max-width: 768px) {
	.educational-content h3 {
		font-size: var(--font-size--s-l);
	}
	
	.educational-content .keyboard-instructions li {
		font-size: 0.9375rem;
		padding-left: var(--space--m-l);
	}
	
	.emoji-grid {
		grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr));
	}
	
	.emoji-item {
		font-size: var(--font-size--l);
		padding: var(--space--m);
		line-height: 1.75;
	}
	.print-method-section {
		flex-direction: column;
	}
	
	.print-method-image {
		width: 100%;
	}
	
	.print-method-content {
		width: 100%;
	}
	.comparison-table {
		font-size: 0.8rem;
	}
	
	.comparison-table th,
	.comparison-table td {
		padding: var(--space--s) var(--space--xs);
	}
	
	.comparison-table th {
		font-size: var(--font-size--3xs);
	}

	.scope-included-not-included {
		flex-direction: column;
		gap: var(--space--xl);
	}
	.scope-prevent-grid {
		flex-direction: column;
		gap: var(--space--xl);
	}
	
	.scope-prevent-item {
		flex: 1 1 100%;
	}
	
	.mapping-container {
		flex-direction: column;
	}
	
	.modal-overlay {
		padding: var(--space--m);
	}
	
	.column-mapping-modal {
		padding: var(--space--l);
		max-height: 95vh;
	}
	
	.third-party-services-grid {
		flex-direction: column;
		gap: var(--space--xl);
	}
	
	.third-party-service-item {
		flex: 1 1 100%;
	}

	.scope-creep-problem-grid {
		flex-direction: column;
		gap: var(--space--xl);
	}

	.paper-series,
	.device-series,
	.social-series {
		flex-direction: column;
		align-items: center;
	}

	.paper-sheet-wrapper,
	.device-wrapper,
	.social-wrapper {
		align-items: center;
		width: 100%;
	}

	.paper-sheet {
		width: 90%;
		max-width: 400px;
	}

	.paper-dimensions,
	.device-dimensions,
	.social-dimensions {
		text-align: center;
	}

	.greeting-card-series {
		grid-template-columns: 1fr;
	}

	.greeting-card-pair {
		border-right: none;
		border-top: var(--border--thin);
		padding: var(--space--l);

		&:first-child {
			border-top: none;
		}
	}

	.pair-container {
		flex-direction: column;
		gap: var(--space--m);
	}

	.pair-arrow {
		transform: rotate(90deg);
	}

	#printer-filters {
		grid-template-columns: 1fr;
	}

	#printer-container {
		grid-template-columns: 1fr;
	}

	.printer-name {
		padding-right: 0;
	}

	.form-group input[type="text"],
	.form-group input[type="number"] {
		max-width: 100%;
	}
	
	.form-actions {
		flex-direction: column;
	}
	
	.calculate-button,
	.reset-button,
	.download-button {
		width: 100%;
	}
	
	.expenses-container {
		padding-bottom: 1.875rem;
	}
	
	#rates-income-bar.rates-income-fixed {
		padding: var(--space--m) var(--space--m-l);
	}
	
	#fee-estimate-bar.fee-estimate-fixed {
		padding: var(--space--m) var(--space--m-l);
	}
	
	.result-display-horizontal .result-item,
	.result-display-horizontal .result-item-group {
		min-width: 10rem;
		flex: 1 0 auto;
	}
	
	.rates-income-left {
		min-width: 12rem;
		max-width: 18rem;
	}
	
	.fee-estimate-left {
		min-width: 12rem;
		max-width: 18rem;
	}
	
	.result-item {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space--xs);
	}
	
	.result-item.highlight {
		text-align: center;
	}
	.story-prompt-display {
		padding: var(--space--xl);
	}
	
	.story-element {
		display: flex;
		flex-direction: column;
		gap: var(--space--xs);
	}
	
	.story-label {
		margin-right: 0;
		margin-bottom: var(--space--2xs);
	}
}

/* ===== 620px ===== */
@media (max-width: 620px) {
	.homepage-layout .homepage-tools-list li {
		font-size: var(--font-size--m);
		text-align: center;
	}

	#helpfulthings #content-main .entry-content h3.homepage-section-heading{
		text-align: center;
	}
	.homepage-layout .homepage-two-column {
		display:block;
	}
	.homepage-column-left {
		margin-bottom: var(--space--xl);
		text-align: center;
	}
	.homepage-layout .white-wrapper{
		padding: var(--space--m) var(--space--xl);
	}
	.homepage-layout{
		background: url("/images/cover-pattern-repeat-2.svg") repeat;
		background-size: 40%;
	}
	.expenses-container.bookkeeping, .expenses-container{
		grid-template-columns: 1fr;
	}
	.table-filters-column .type-filter-item{
		font-size: var(--font-size--s-m);
	}
	.totals-row{
		display:block;
	}
	.total-item{
		flex-direction: column;
		width: 100%;
		&:first-child{
			border-right: none;
		}
	}
	.export-buttons{
		width: 100%;
		gap: var(--space--3xs);
	}
	.pagination-controls{
		flex-direction: column;
		gap: var(--space--3xs);
		margin-bottom: var(--space--s);
	}
	.pagination-nav{
		width: 100%;
	}
	#content-main #page.full .entry-content{
		padding: 0rem var(--space--3xl);
	}
	
	#helpfulthings {
		flex-direction: column;
	}

	#helpfulthings #sidebar {
		width: 100%;
		min-width: 100%;
		max-width: 100%;
		border-right: none;
		border-bottom: var(--border--thin);
		padding: 0;
		display: flex;
		flex-direction: column;
		order: -1;
		position: static;
		height: auto;
		overflow: visible;
		align-self: auto;
	}

	#helpfulthings #sidebar .mobile-sidebar-toggle {
		display: none;
	}

	#helpfulthings #sidebar .mobile-sidebar-toggle-label {
		display: block;
		cursor: pointer;
		font-family: var(--font--title--family--small);
		font-weight: 900;
		font-size: var(--font-size--s-m);
		line-height: 2;
		text-transform: uppercase;
		letter-spacing: .2rem;
		margin: var(--space--m-l) var(--space--l) 0;
		padding: 0 var(--space--l) var(--space--m-l) 0;
		position: relative;
		user-select: none;
		background: none;
		border-radius: 0;
		text-align: left;
		color: var(--color--black);
		border-bottom: none
	}

	#helpfulthings #sidebar .mobile-sidebar-toggle-label::after {
		content: '\25B6\FE0E';
		position: absolute;
		right: 0;
		top: 0;
		font-size: var(--font-size--s);
		font-family: var(--font--title--family--small);
	}

	#helpfulthings #sidebar #mobile-sidebar-toggle:checked ~ .mobile-sidebar-toggle-label {
		border-bottom: none;
	}

	#helpfulthings #sidebar #mobile-sidebar-toggle:checked ~ .mobile-sidebar-toggle-label::after {
		content: '▼';
	}

	#helpfulthings #sidebar .sidebar-content {
		display: none;
	}

	#helpfulthings #sidebar #mobile-sidebar-toggle:checked ~ .sidebar-content {
		display: block;
	}

	/* Fixed bar - switch to column layout at mobile */
	.result-bar-fixed {
		flex-direction: column;
		padding: 0;
		gap: 0;
		max-height: 100vh;
		overflow-y: auto;
	}

	/* Toggle takes full width, sits at top */
	.result-bar-toggle {
		display: flex;
		justify-content: space-between;
		align-items: center;
		cursor: pointer;
		padding: var(--space--m) var(--space--2xs);
		width: 100%;
		font-family: var(--font--title--family--small);
		font-weight: 900;
		font-size: var(--font-size--s-m);
		text-transform: uppercase;
		letter-spacing: .2rem;
		color: var(--color--black);
	}

	.result-bar-toggle::after {
		content: '▼';
		font-size: var(--font-size--s);
	}

	.result-bar-fixed.collapsed .result-bar-toggle::after {
		content: '\25B6\FE0E';
	}

	/* Collapsed state - hide results */
	.result-bar-fixed.collapsed .result-bar-results {
		display: none;
	}

	/* Results container takes full width */
	.result-bar-results {
		width: 100%;
		padding: var(--space--m);
	}

	/* Stack result items vertically */
	.result-display-horizontal {
		flex-direction: column;
		flex-wrap: nowrap;
	}

	.result-display-horizontal .result-item,
	.result-display-horizontal .result-item-group {
		width: 100%;
		min-width: 100%;
	}

	.result-display.result-display-horizontal{
		flex-direction: column;
	}
	#email-helper .letter{
		padding: var(--space--l) var(--space--3xl) var(--space--xl);
		box-shadow: .25rem .25rem .25rem var(--color--main--medium);
	}
	.expenses-column-left{
		border-bottom: none;
		padding-bottom: 0;
	}

	#helpfulthings #sidebar ul{
		background-color: var(--color--main--medium);
		padding-top: var(--space--xxs);
		border-top: var(--border--thin);
	}

	#helpfulthings #sidebar ul li:last-child{
		border-bottom: none;
	}

	#helpfulthings #sidebar ul li ul{
		border-top: none;
	}

	#helpfulthings #sidebar a.draft {
		color: white !important;
	}

	#helpfulthings #sidebar ul li .sidebar-toggle-label h3{
		font-size: var(--font-size--s-m);
		line-height: 2;
		letter-spacing:.2rem;
		border-bottom: white solid .125rem;
		&::after{
			font-size: var(--font-size--s);
		}
	}

	#helpfulthings #sidebar ul li ul li{
		font-size: var(--font-size--m);
		line-height: 1.75;
		text-align:center;
		.sidebar-toggle-label{
			padding: var(--space--s) var(--space--3xl);
		}
		&.sidebar-subgroup {
			border-top: .125rem solid white;
		}
	}

	#helpfulthings #sidebar h2{
		display:none;
	}
}

/* ===== 480px ===== */
@media (max-width: 480px) {
	.modal-form .input-group {
		flex-direction: column;
	}

	.modal-form button[type="submit"] {
		width: 100%;
	}
}