/*
Theme Name: Presto Password
Text Domain: pp
*/

*
{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body
{
	font-family: 'Montserrat', sans-serif;
	background-color: #f8f9fa;
	color: #333333;
	line-height: 1.6;
}

h1, h2, h3, h4, h5, h6
{
	font-family: 'Playfair Display', serif;
	letter-spacing: .01rem;
}

input,
button
{
	font-family: inherit;
	font-size: 1rem;
}

.font-content
{
	font-size: .95rem;
}

.container
{
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
}

.site-main
{
	font-size: .95rem;
}

.mb-0-5
{
	margin-bottom: .5rem;
}

.mb-0-75
{
	margin-bottom: .75rem;
}

.mb-1
{
	margin-bottom: 1rem;
}

.pb-1
{
	padding-bottom: 1rem;
}

.mb-1-5
{
	margin-bottom: 1.5rem;
}

.pb-1-5
{
	padding-bottom: 1.5rem;
}

.mb-2
{
	margin-bottom: 2rem;
}

.mb-3
{
	margin-bottom: 3rem;
}

.mb-0-lc:last-child
{
	margin-bottom: 0;
}

.d-flex
{
	display: flex;
}

.d-flex-gap-0-5
{
	gap: .5rem;
}

.border-bottom
{
	border-bottom: 1px solid #e5e7eb;
}

/* Header */
.header
{
	background: white;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
	padding: 1rem 0;
	position: relative;
	z-index: 100;
}

body.home .header
{
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Mobile CTA Banner */
.mobile-cta-banner
{
	display: none;
}

.nav
{
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.logo
{
	font-size: 1.5rem;
	font-weight: bold;
	color: #333333;
	text-decoration: none;
	display: flex;
	align-items: center;
	gap: 0;
}

.logo svg
{
	height: 1.5rem;
	display: block;
	margin-left: .2rem;
	position: relative;
	top: -1px;
}

.nav-links
{
	display: flex;
	list-style: none;
	gap: 2rem;
}

.nav-links li
{
	position: relative;
}

.nav-links a
{
	text-decoration: none;
	color: #333333;
	font-weight: 600;
	transition: color 0.5s;
}

.nav-links a:hover
{
	color: #4285f4;
}

.nav-link-pg svg
{
	display: none;
}

.has-dropdown
{
	position: relative;
}

.dropdown-menu
{
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	background: white;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	border-radius: 8px;
	padding: 0.5rem 0;
	min-width: 200px;
	margin-top: 0;
	padding-top: 0.5rem;
	z-index: 1000;
	pointer-events: auto;
}

.dropdown-menu::before
{
	content: '';
	position: absolute;
	top: -0.5rem;
	left: 0;
	right: 0;
	height: 0.5rem;
	background: transparent;
}

.dropdown-menu li
{
	list-style: none;
	position: relative;
}

.dropdown-menu a
{
	display: block;
	padding: 0.75rem 1.25rem;
	color: #333333;
	text-decoration: none;
	transition: background 0.3s, color 0.3s;
	position: relative;
	z-index: 1001;
}

.dropdown-menu a:hover
{
	background: #f3f4f6;
	color: #4285f4;
}

.has-dropdown:hover .dropdown-menu
{
	display: block;
	pointer-events: auto;
}

.has-dropdown > a
{
	pointer-events: auto;
}

.login-btn
{
	background: #4285f4;
	color: white;
	padding: 0.5rem 1rem;
	text-decoration: none;
	border-radius: 4px;
	transition: background 0.3s;
}

.login-btn:hover
{
	background: #3367d6;
}

/* Hamburger Menu */
.hamburger
{
	display: none;
	flex-direction: column;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0.5rem;
	gap: 4px;
	z-index: 1001;
}

.hamburger span
{
	width: 25px;
	height: 3px;
	background: #333333;
	border-radius: 3px;
	transition: all 0.3s;
}

.hamburger.active span:nth-child(1)
{
	transform: rotate(45deg) translate(4px, 4px);
}

.hamburger.active span:nth-child(2)
{
	opacity: 0;
}

.hamburger.active span:nth-child(3)
{
	transform: rotate(-45deg) translate(6px, -6px);
}

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

/* Hero Section */
.hero
{
	margin-bottom: 3rem;
	background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);
	background-size: cover;
	background-position: center;
	color: white;
	padding: 4rem 0;
	text-align: left;
	position: relative;
}

.hero::before
{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(135deg, rgba(30, 58, 138, 0.85) 0%, rgba(59, 130, 246, 0.85) 100%);
	z-index: 1;
}

.hero .container
{
	position: relative;
	z-index: 2;
}

.hero-content
{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 3rem;
	align-items: stretch;
}

.hero-text h1
{
	font-size: 2.5rem;
	font-weight: 700;
	margin-bottom: 1.5rem;
	line-height: 1.2;
}

.hero-text p
{
	font-size: 1.1rem;
	margin-bottom: 2rem;
	opacity: 0.9;
}

.hero-buttons
{
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
}

.btn
{
	padding: 0.875rem 1.75rem;
	border-radius: 6px;
	text-decoration: none;
	font-weight: 600;
	display: inline-block;
	border: none;
}

.btn:hover
{
	cursor: pointer;
}

.btn-primary
{
	background: #4285f4;
	color: white;
}

.btn svg
{
	position: relative;
	top: 2px;
	height: 1rem;
}

/* Combined hover transform effect */
.btn:hover,
.btn-primary:hover,
.newsletter-btn:hover,
.cta-button:hover,
.comment-form .submit-button:hover,
.comment-form input[type="submit"]:hover
{
	transform: translateY(-2px);
}

.btn-primary:hover
{
	background: #3367d6;
}

.btn-outline
{
	background: transparent;
	color: white;
	border: 2px solid white;
}

.btn-outline:hover
{
	background: white;
	color: #1e3a8a;
}

.hero-visual
{
	background: rgba(255, 255, 255, 0.1);
	border-radius: 12px;
	padding: 2rem;
	backdrop-filter: blur(10px);
}

.hero-generator-tool
{
	background: rgba(255, 255, 255, 0.95);
	border-radius: 12px;
	padding: 1.5rem;
	color: #333333;
}

.hero-password-display
{
	background: white;
	border: 2px solid #e5e7eb;
	border-radius: 8px;
	padding: 1rem;
	margin-bottom: 1.5rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.hero-password-text
{
	font-family: 'Courier New', monospace;
	font-size: 1.1rem;
	font-weight: bold;
	color: #333333;
	flex: 1;
}

.hero-password-actions
{
	display: flex;
	gap: 0.5rem;
}

.hero-icon-btn
{
	background: none;
	border: none;
	padding: 0.5rem;
	cursor: pointer;
	border-radius: 4px;
	transition: background 0.3s;
}

.hero-icon-btn:hover
{
	background: #f3f4f6;
}

.hero-controls h3
{
	margin-bottom: 1rem;
	color: #333333;
	font-size: 1.1rem;
}

.hero-control-group
{
	margin-bottom: 1rem;
}

.hero-control-group label
{
	display: block;
	margin-bottom: 0.5rem;
	font-weight: 500;
	color: #333333;
	font-size: 0.9rem;
}

.hero-slider-container
{
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 0.75rem;
}

.hero-length-input
{
	width: 50px;
	padding: 0.4rem;
	border: 1px solid #d1d5db;
	border-radius: 4px;
	text-align: center;
	font-size: 0.9rem;
}

/* Combined with .slider */
.hero-slider
{
	flex: 1;
}

/* Combined with .checkbox-grid and .checkbox-item */
.hero-checkbox-item label
{
	font-size: 0.85rem;
	margin-bottom: 0;
}

.hero-radio-group
{
	display: flex;
	gap: 1rem;
	margin-bottom: 0.75rem;
}

.hero-radio-item
{
	display: flex;
	align-items: center;
	gap: 0.4rem;
}

.hero-radio-item input[type="radio"]
{
	accent-color: #4285f4;
}

.hero-radio-item label
{
	font-size: 0.85rem;
	margin-bottom: 0;
}

/* Combined with .generate-btn and .check-btn */
.hero-generate-btn
{
	margin-top: 0.5rem;
}

/* Blog Section */
.blog-section
{
	padding-bottom: 4rem;
	background: #f8f9fa;
}

body.archive .blog-section
{
	padding-bottom: 2rem;
}

.blog-section h2
{
	text-align: center;
	font-size: 2.2rem;
	color: #1e3a8a;
	margin-bottom: 1rem;
}

.blog-subtitle
{
	text-align: center;
	font-size: 1.1rem;
	color: #666666;
	max-width: 600px;
	margin: 0 auto 3rem auto;
}

.blog-grid
{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
	margin-top: 2rem;
}

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

.blog-card
{
	background: white;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
	transition: transform 0.3s, box-shadow 0.3s;
	position: relative;
}

.blog-card:hover
{
	transform: translateY(-4px);
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.blog-card-link
{
	display: block;
	text-decoration: none;
	color: inherit;
	height: 100%;
}

.blog-image
{
	height: 200px;
	background: linear-gradient(135deg, #4285f4 0%, #1e3a8a 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

.blog-placeholder
{
	font-size: 3rem;
	opacity: 0.9;
}

.blog-content
{
	padding: 1.5rem;
}

.blog-category
{
	display: inline-block;
	background: #e3f2fd;
	color: #1565c0;
	padding: 0.25rem 0.75rem;
	border-radius: 12px;
	font-size: 0.8rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-bottom: 1rem;
}

.blog-card h3
{
	font-size: 1.3rem;
	font-weight: 700;
	color: #1e3a8a;
	margin-bottom: 0.75rem;
	line-height: 1.3;
}

.blog-card p
{
	color: #666666;
	line-height: 1.6;
	margin-bottom: 0;
	font-size: .9rem;
}

.blog-meta
{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-top: 1rem;
	border-top: 1px solid #e5e7eb;
	font-size: 0.85rem;
	color: #888888;
}

.blog-date,
.blog-read-time
{
	font-weight: 700;
	font-size: .9rem;
}

.blog-content .blog-read-time
{
	font-size: 0.9rem;
	font-weight: 700;
	color: #888888;
	border-left: 1px solid #e5e7eb;
	padding-left: 1rem;
}

/* CTA Section */
.cta-section
{
	background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
	padding: 4rem 0;
	text-align: center;
}

.cta-section h2
{
	font-size: 2.5rem;
	color: #1e3a8a;
	margin-bottom: 2rem;
	font-weight: 700;
}

.cta-buttons
{
	display: flex;
	gap: 1rem;
	justify-content: center;
	margin-bottom: 1rem;
	flex-wrap: wrap;
}

.btn-outline-red
{
	background: transparent;
	color: #dc2626;
	border: 2px solid #dc2626;
}

.btn-outline-red:hover
{
	background: #dc2626;
	color: white;
}

.cta-disclaimer
{
	color: #666666;
	font-size: 0.9rem;
	margin-top: 1rem;
}

/* Footer */
.footer
{
	background: #000000;
	color: #ffffff;
	padding: 3rem 0 1rem 0;
}

.social-media
{
	display: flex;
	justify-content: center;
	gap: 1rem;
	margin-bottom: 3rem;
	padding-bottom: 2rem;
	border-bottom: 1px solid #333333;
}

.social-icon
{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: #333333;
	border-radius: 50%;
	color: #ffffff;
	transition: background 0.3s;
	text-decoration: none;
}

.social-icon:hover
{
	background: #4285f4;
}

.footer-links
{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2rem;
	margin-bottom: 2rem;
}

.footer-column h4
{
	color: #ffffff;
	font-size: 0.85rem;
	font-weight: 700;
	margin-bottom: 1rem;
	letter-spacing: 0.5px;
}

.footer-column ul
{
	list-style: none;
	padding: 0;
	margin: 0;
}

.footer-column li
{
	margin-bottom: 0.5rem;
}

.footer-column a
{
	color: #cccccc;
	text-decoration: none;
	font-size: 0.85rem;
	transition: color 0.3s;
}

.footer-column a:hover
{
	color: #4285f4;
}

.app-badges
{
	margin-top: 1rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.app-badge img
{
	height: 30px;
	width: auto;
}

.footer-company
{
	display: grid;
	grid-template-columns: 1fr;
	margin-bottom: 2rem;
	padding-top: 2rem;
	border-top: 1px solid #333333;
}

.footer-bottom
{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 2rem 0 1rem 0;
	border-top: 1px solid #333333;
	flex-wrap: wrap;
	gap: 1rem;
}

.language-selector select
{
	background: #333333;
	color: #ffffff;
	border: 1px solid #555555;
	padding: 0.5rem;
	border-radius: 4px;
	font-size: 0.85rem;
}

.footer-legal
{
	display: flex;
	flex-direction: column;
	gap: 1rem;
	align-items: center;
	width: 100%;
}

.legal-links
{
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
}

.legal-links a
{
	color: #cccccc;
	text-decoration: none;
	font-size: 0.8rem;
	transition: color 0.3s;
}

.legal-links a:hover
{
	color: #4285f4;
}

.copyright
{
	font-size: 0.8rem;
	color: #888888;
}

/* Hero Left - Featured Post Card */
.hero-left
{
	display: flex;
	align-items: center;
	width: 100%;
	height: 100%;
}

.featured-post-card
{
	background: transparent;
	border-radius: 12px;
	padding: 0;
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
}

.featured-badge
{
	display: inline-block;
	background: #ef4444;
	color: white;
	padding: 0.5rem 1rem;
	border-radius: 20px;
	font-weight: 600;
	font-size: 0.9rem;
	margin-bottom: 1rem;
}

.featured-category
{
	display: inline-block;
	background: #4169e1;
	color: white;
	padding: 0.25rem 0.75rem;
	border-radius: 10px;
	font-size: 0.8rem;
	font-weight: 600;
	text-transform: uppercase;
	margin: 0 0 1rem 0;
}

.featured-header .featured-category
{
	margin-bottom: 0;
}

.featured-post-card h1
{
	font-size: 2.5rem;
	font-weight: 500;
	margin-bottom: 1rem;
	line-height: 1.2;
	color: white;
}

.featured-excerpt
{
	line-height: 1.6;
	margin-bottom: 1.5rem;
	opacity: 0.9;
	color: white;
}

.featured-post-card .btn-primary,
.modal-content .btn-primary,
.error-404-content .btn-primary,
.btn-purple
{
	background: linear-gradient(135deg, #ec4899 0%, #8b5cf6 100%);
	color: #ffffff;
	width: auto;
}

/* Featured Tools Section */
.featured-tools
{
	background: rgba(255, 255, 255, 0.1);
	border-radius: 12px;
	padding: 1.5rem;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
}

.featured-tools-password-length
{
	margin-bottom: .5rem !important;
	font-weight: 600 !important;
}

.tab-buttons
{
	display: flex;
	gap: 0.5rem;
	margin-bottom: 1rem;
}

.tab-btn
{
	flex: 1;
	padding: 0.75rem;
	background: rgba(255, 255, 255, 0.2);
	border: none;
	color: white;
	border-radius: 8px;
	cursor: pointer;
	font-weight: 600;
	transition: all 0.3s;
}

.tab-btn.active
{
	background: white;
	color: #1e3a8a;
}

.tab-content
{
	display: none;
	background: white;
	border-radius: 12px;
	padding: 2rem;
	color: #333333;
	width: 100%;
	box-sizing: border-box;
	border: 1px solid #e5e7eb;
}

.tab-content.active
{
	display: block;
}

.password-display
{
	background: #f3f4f6;
	border: 2px solid #e5e7eb;
	border-radius: 8px;
	padding: .5rem .5rem .5rem 1rem;
	margin-bottom: 1rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.password-text
{
	font-family: 'Courier New', monospace;
	font-size: 1.1rem;
	font-weight: bold;
	color: #333333;
	flex: 1;
	word-break: break-all;
	overflow-wrap: break-word;
	min-width: 0;
}

.password-actions
{
	display: flex;
}

.password-advanced,
.password-advanced a
{
	text-align: center;
	font-size: .8rem;
	font-weight: 600;
	color: #666666;
}

.password-advanced svg
{
	position: relative;
	top: 8px;
	width: 1.5rem;
	fill: #f59e0b;
}

.icon-btn
{
	background: none;
	border: none;
	padding: 0.5rem;
	cursor: pointer;
	border-radius: 4px;
	transition: background 0.3s;
}

.icon-btn:hover
{
	background: #e5e7eb;
}

.icon-btn svg
{
	width: 1.75rem;
	fill: #929292;
}

.control-group
{
	margin-bottom: 1rem;
}

.control-group label
{
	display: block;
	font-weight: 500;
	font-size: 0.9rem;
	text-align: left;
}

.slider-container
{
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.strength-icon-container
{
	display: flex;
	align-items: center;
	justify-content: center;
}

.strength-icon
{
	width: 24px;
	height: 24px;
}

.strength-icon.weak
{
	color: #ef4444;
}

.strength-icon.medium
{
	color: #f59e0b;
}

.strength-icon.strong
{
	color: #10b981;
}

.length-input
{
	width: 50px;
	padding: 0.4rem;
	border: 1px solid #d1d5db;
	border-radius: 4px;
	text-align: center;
}

/* Combined slider styles */
.slider,
.hero-slider
{
	flex: 1;
	height: 4px;
	background: #e5e7eb;
	border-radius: 2px;
	outline: none;
	-webkit-appearance: none;
}

.slider::-webkit-slider-thumb,
.hero-slider::-webkit-slider-thumb
{
	-webkit-appearance: none;
	width: 16px;
	height: 16px;
	background: #4285f4;
	border-radius: 50%;
	cursor: pointer;
}

.slider::-moz-range-thumb,
.hero-slider::-moz-range-thumb
{
	width: 16px;
	height: 16px;
	background: #4285f4;
	border-radius: 50%;
	cursor: pointer;
	border: none;
}

.slider-weak
{
	background: #ef4444;
}

.slider-medium
{
	background: #f59e0b;
}

/* Combined checkbox styles */
.checkbox-grid,
.hero-checkbox-grid
{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.5rem;
}

.checkbox-item,
.hero-checkbox-item
{
	display: flex;
	align-items: center;
	gap: 0.4rem;
}

.checkbox-item input[type="checkbox"],
.hero-checkbox-item input[type="checkbox"]
{
	width: 16px;
	height: 16px;
	accent-color: #4285f4;
}

/* Combined button styles */
.generate-btn,
.check-btn,
.hero-generate-btn
{
	width: 100%;
	background: #4285f4;
	color: white;
	border: none;
	padding: 0.75rem;
	border-radius: 8px;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.3s;
}

.generate-btn,
.hero-generate-btn
{
	margin-top: 0.5rem;
}

.generate-btn:hover,
.check-btn:hover,
.hero-generate-btn:hover
{
	background: #3367d6;
}

/* Strength Checker Tab */
.strength-input
{
	width: 100%;
	padding: 0.75rem;
	border: 2px solid #e5e7eb;
	border-radius: 8px;
	font-size: 1rem;
	margin-bottom: 1rem;
}

.strength-meter
{
	height: 8px;
	background: #e5e7eb;
	border-radius: 4px;
	overflow: hidden;
	margin-bottom: 1rem;
}

.strength-fill
{
	height: 100%;
	transition: all 0.3s;
	border-radius: 4px;
}

.strength-feedback
{
	margin-bottom: .5rem;
	padding: 1rem;
	background: #f3f4f6;
	border-radius: 8px;
	font-size: 0.9rem;
}

.strength-feedback-list
{
	list-style: none;
	padding: 0;
	margin: .25rem 0 0 0;
}

.strength-feedback-list li
{
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.25rem 0;
	font-size: 0.9rem;
}

.strength-feedback-list li .strength-icon
{
	flex-shrink: 0;
}

/* Breach Checker Tab */
.breach-input
{
	width: 100%;
	padding: 0.75rem;
	border: 2px solid #e5e7eb;
	border-radius: 8px;
	font-size: 1rem;
	margin-bottom: 1rem;
}

.breach-notice
{
	display: flex;
	align-items: center;
	gap: 0.5rem;
	background: #f3f4f6;
	border-radius: 8px;
	padding: 0.75rem 1rem;
	margin-top: 1.25rem;
	font-size: 0.875rem;
	color: #6b7280;
	line-height: 1.4;
}

#breach-tab p
{
	margin-bottom: 1rem;
	font-size: .9rem;
	line-height: 1.35;
}

#breach-tab a
{
	color: inherit;
}

/* Specific styles for check-btn (extends combined button styles) */
.check-btn
{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
}

.check-btn svg
{
	width: 1rem;
	height: 1rem;
	fill: #ffffff;
}

/* Featured Section */
.featured-section
{
	padding-bottom: 3rem;
	background: #f8f9fa;
}

.section-header
{
	text-align: center;
	margin-bottom: 2rem;
}

.section-header h2
{
	font-size: 2rem;
	color: #1e3a8a;
	margin-bottom: 0.5rem;
}

.section-subtitle
{
	color: #666666;
	font-size: 1.1rem;
}

.featured-grid
{
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 2rem;
}

.featured-main-wrapper
{
	background: white;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	display: flex;
	flex-direction: column;
}

.featured-main
{
	text-decoration: none;
	color: inherit;
	transition: all 0.3s;
	display: block;
}

.featured-main:hover
{
	opacity: 0.95;
}

.featured-image
{
	height: 200px;
	background: linear-gradient(135deg, #4285f4 0%, #1e3a8a 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

.featured-placeholder
{
	font-size: 4rem;
	opacity: 0.9;
}

.featured-content
{
	padding: 2rem 2rem 1.5rem 2rem;
}

.featured-content h3
{
	font-size: 1.75rem;
	font-weight: 700;
	color: #1e3a8a;
	margin-bottom: 1rem;
	line-height: 1.3;
}

.featured-content .featured-excerpt
{
	color: #666666;
	margin-bottom: 1rem;
}

.featured-content .featured-category
{
	background: #e3f2fd;
	color: #1565c0;
}

.featured-content .featured-excerpt
{
	margin-bottom: 0;
}

.featured-header
{
	display: flex;
	align-items: center;
	gap: 1rem;
}

.featured-meta
{
	font-size: 0.9rem;
	font-weight: 700;
	color: #888888;
	border-left: 1px solid #e5e7eb;
	padding-left: 1rem;
}

.hero-left .featured-meta
{
	border-left: 1px solid #ffffff;
	color: #ffffff;
}

.author-info
{
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.author-avatar
{
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #4285f4;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	font-weight: bold;
}

.author-details
{
	font-size: 0.85rem;
}

.author-name
{
	font-weight: 600;
	color: #333333;
}

.post-date
{
	color: #888888;
}

.read-more
{
	background: #4285f4;
	color: white;
	padding: 0.75rem 1.5rem;
	border-radius: 6px;
	text-decoration: none;
	font-weight: 600;
	transition: all 0.3s;
}

.read-more:hover
{
	background: #3367d6;
	transform: translateX(5px);
}

.featured-sidebar
{
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

.sidebar-card
{
	background: white;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	transition: all 0.3s;
	text-decoration: none;
	color: inherit;
}

.sidebar-card:hover
{
	transform: translateY(-5px);
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.sidebar-card:first-child
{
	margin-top: 0;
}

.sidebar-image
{
	height: 135px;
	background: linear-gradient(135deg, #10b981 0%, #059669 100%);
	display: flex;
	align-items: center;
	justify-content: center;
}

.sidebar-placeholder
{
	font-size: 2.5rem;
	opacity: 0.9;
}

.sidebar-content
{
	padding: 1.25rem;
}

.sidebar-content h4
{
	font-size: 1.3rem;
	font-weight: 700;
	color: #1e3a8a;
	margin-bottom: 0.5rem;
	line-height: 1.3;
}

.sidebar-excerpt
{
	font-size: 0.85rem;
	color: #666666;
	line-height: 1.5;
	margin-bottom: 0;
	font-size: .9rem;
}

.sidebar-content .featured-category,
.blog-content .featured-category
{
	background: #e3f2fd;
	color: #1565c0;
}

.sidebar-meta
{
	font-size: 0.9rem;
	font-weight: 700;
	color: #888888;
	padding-top: 0.75rem;
	border-top: 1px solid #e5e7eb;
}

/* Newsletter */
.newsletter-section
{
	padding: 3rem 0;
	background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);
	color: white;
}

.newsletter-content
{
	max-width: 550px;
	margin: 0 auto;
	text-align: center;
}

.newsletter-content h2
{
	font-size: 2rem;
	margin-bottom: 1rem;
	font-weight: 500;
}

.newsletter-content p
{
	margin-bottom: 2rem;
	opacity: 0.9;
}

.newsletter-form
{
	display: flex;
	gap: 1rem;
	max-width: 500px;
	margin: 0 auto;
}

.newsletter-form .newsletter-error
{
	padding-top: .5rem;
}

.newsletter-form > div
{
	flex: 1;
	display: flex;
	flex-direction: column;
}

.newsletter-input
{
	flex: none;
	padding: 1rem;
	border: none;
	border-radius: 8px;
	font-size: 1rem;
}

.newsletter-error
{
	display: none;
	color: white;
	font-size: 0.8rem;
	margin: .15rem 0 .5rem 0 !important;
	position: relative;
	line-height: 1.5;
}

.newsletter-error svg
{
	color: #ffffff !important;
}

.newsletter-error span
{
	display: inline-block;
	position: relative;
	top: -8px;
}

.newsletter-btn
{
	padding: 1rem 2rem;
	background: white;
	color: #1e3a8a;
	border: none;
	border-radius: 8px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.3s;
	align-self: flex-start;
}

.newsletter-btn:hover
{
	box-shadow: 0 4px 12px rgba(255, 255, 255, 0.3);
}

.newsletter-disclaimer,
.newsletter-powered-by
{
	font-size: 0.85rem;
	margin-top: 1rem;
	margin-bottom: 0 !important;
}

.newsletter-powered-logo
{
	margin-top: 0.5rem;
	margin-bottom: 0 !important;
	font-size: 0.7rem;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
}

.newsletter-powered-logo span
{
	padding-top: 5px;
	color: #a3a7b4;
}

.newsletter-powered-logo img
{
	height: 20px;
	vertical-align: middle;
}

/* Modal */
.modal
{
	display: none;
	position: fixed;
	z-index: 10000;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgba(0, 0, 0, 0.6);
	align-items: center;
	justify-content: center;
	padding: 2rem 0;
}

.modal-content
{
	background-color: #fefefe;
	margin: auto;
	padding: 2.5rem;
	border-radius: 12px;
	max-width: 500px;
	width: 90%;
	position: relative;
	text-align: center;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.modal-close
{
	color: #aaaaaa;
	position: absolute;
	top: 1rem;
	right: 1.5rem;
	font-size: 2rem;
	font-weight: bold;
	cursor: pointer;
	transition: color 0.3s;
}

.modal-close:hover,
.modal-close:focus
{
	color: #000000;
}

.modal-icon
{
	width: 60px;
	height: 60px;
	background: #10b981;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 1.5rem auto;
	font-size: 2rem;
}

.modal-icon svg
{
	fill: #ffffff;
	width: 2rem;
}

.modal-content h3
{
	font-size: 1.4rem;
}

.modal-content > p
{
	color: #666666;
	margin-bottom: 1.5rem;
}

.modal-info
{
	background: #f8f9fa;
	border-radius: 8px;
	padding: 1.5rem;
	text-align: left;
	margin-bottom: 2rem;
}

.modal-info h4
{
	color: #666666;
	margin-bottom: 1rem;
	font-size: 1.2rem;
	text-align: center;
	font-family: inherit;
	border-bottom: 1px solid #e5e7eb;
	padding-bottom: 1rem;
	font-weight: 600;
}

.modal-info ul
{
	list-style: none;
	padding: 0;
	margin: 0 0 1rem 0;
}

.modal-info li
{
	padding-bottom: .5rem;
	font-size: .9rem;
	color: #333333;
}

.modal-info svg
{
	position: relative;
	top: 7px;
	width: 1.5rem;
	fill: #929292;
}

.modal-frequency
{
	color: #666666;
	font-size: 0.9rem;
	margin: 1rem 0 0 0;
	padding-top: 1rem;
	border-top: 1px solid #e5e7eb;
	text-align: center;
}

.modal-success,
.modal-error
{
	margin-bottom: 2rem;
}

.modal-breach
{
	max-width: 700px;
	padding: 2.5rem;
	text-align: center;
}

.modal-breach .modal-close
{
	z-index: 10;
}

.breach-modal-body h2
{
	font-family: inherit;
	font-size: 1.25rem;
	margin-bottom: .5rem;
	font-weight: 500;
}

.breach-subtitle
{
	font-size: 1rem;
	color: #666666;
	margin-bottom: 2rem;
	line-height: 1.6;
}

.breach-cta-box
{
	background: #f8f9fa;
	border-radius: 12px;
	padding: 2rem;
	text-align: center;
}

.breach-cta-box h3
{
	color: #333333;
	margin-bottom: .5rem;
	font-size: 1.4rem;
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
}

.breach-cta-box > p
{
	color: #666666;
	margin-bottom: 1rem;
	line-height: 1.6;
}

.breach-price
{
	font-size: 2rem;
	color: #10b981;
	font-weight: 700;
}

.breach-price-small
{
	font-size: 0.5em;
	color: #888888;
}

.breach-provided-logo
{
	margin-top: 0.5rem;
	margin-bottom: 0 !important;
	font-size: 0.7rem;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
}

.breach-provided-logo span
{
	padding-top: 5px;
	color: #a3a7b4;
}

.breach-price-note
{
	color: #888888;
	font-size: 0.9rem;
	margin-bottom: 1.5rem;
}

.breach-features
{
	margin-top: 1.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid #e5e7eb;
	text-align: left;
}

.breach-notice .breach-features
{
	margin-top: 0;
	padding: .5rem;
	border-top: none;
}

.breach-features ul
{
	list-style: none;
	padding: 0;
	margin: 0 0 1rem 0;
}

.breach-features li
{
	color: #666666;
	margin-bottom: 0.5rem;
	padding-left: 0;
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
}

.breach-features li::before
{
	content: '';
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	background-image: url('data:image/svg+xml;utf8,<svg fill="none" stroke="%2310b981" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="10" stroke-width="2"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4"/></svg>');
	background-size: contain;
	background-repeat: no-repeat;
	margin-top: 2px;
	position: relative;
	top: -3px;
}

.breach-summary-benefits
{
	font-weight: 600;
	font-size: .8rem;
	color: #999999;
}

/* Security Alerts Section */
.security-alerts
{
	background: white;
	border-radius: 12px;
	padding: 24px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
	margin-top: 2rem;
	margin-bottom: 0;
}

.featured-recent-security-alerts
{
	padding: 1.5rem 2rem 2rem 2rem;
	border-top: 1px solid #e2e8f0;
}

.alerts-header
{
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0 0 1rem 0;
}

.alerts-title
{
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 18px;
	font-weight: 700;
	color: #1e293b;
}

.shield-icon
{
	width: 20px;
	height: 20px;
	color: #b5b5b5;
	fill: #e2e8f0;
}

.live-badge
{
	font-size: 11px;
	color: #94a3b8;
	font-weight: 500;
}

.alerts-grid
{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-bottom: 0;
}

.alert-card
{
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	padding: 16px;
	transition: all 0.2s;
	cursor: pointer;
	text-decoration: none;
	color: inherit;
	display: block;
}

.alert-card:hover
{
	border-color: #3b82f6;
	box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}

.alert-header
{
	display: flex;
	align-items: center;
	margin-bottom: .75rem;
	gap: .5rem;
}

.severity-badge
{
	font-size: 10px;
	font-weight: 500;
	padding: 4px 10px 5px 10px;
	border-radius: 8px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.severity-text
{
	position: relative;
	top: -1px;
}

.severity-global,
.severity-global svg
{
	background: #EDE9FE;
	color: #6d28d9;
	fill: #6d28d9;
	border: 1px solid #DDD6FE;
}

.severity-user,
.severity-user svg
{
	background: #FCE7F3;
	color: #db2777;
	fill: #db2777;
	border: 1px solid #FBCFE8;
}

.severity-badge svg
{
	position: relative;
	top: 3px;
	height: 1rem;
	border: none !important;
}

.severity-critical,
.severity-critical svg
{
	background: #fef2f2;
	color: #991b1b;
	fill: #991b1b;
	border: 1px solid #fecaca;
}

.severity-high,
.severity-high svg
{
	background: #fff7ed;
	color: #c2410c;
	fill: #c2410c;
	border: 1px solid #fed7aa;
}

.severity-medium,
.severity-medium svg
{
	background: #fefce8;
	color: #a16207;
	fill: #a16207;
	border: 1px solid #fde68a;
}

.severity-low,
.severity-low svg
{
	background: #f0fdf4;
	color: #166534;
	fill: #166534;
	border: 1px solid #bbf7d0;
}

.severity-informational,
.severity-informational svg
{
	background: #eff6ff;
	color: #1e40af;
	fill: #1e40af;
	border: 1px solid #bfdbfe;
}

/* Severity level colors for security alerts */
.featured-category.severity-critical
{
	background: #fee2e2;
	color: #991b1b;
	border: 1px solid #fecaca;
}

.featured-category.severity-high
{
	background: #ffedd5;
	color: #9a3412;
	border: 1px solid #fed7aa;
}

.featured-category.severity-medium
{
	background: #fef3c7;
	color: #92400e;
	border: 1px solid #fde68a;
}

.featured-category.severity-low
{
	background: #dbeafe;
	color: #1e40af;
	border: 1px solid #bfdbfe;
}

.alert-icon
{
	width: 16px;
	height: 16px;
}

.alert-icon-critical
{
	stroke: #ef4444;
}

.alert-icon-high
{
	stroke: #f97316;
}

.alert-icon-medium
{
	stroke: #eab308;
}

.alert-icon-low
{
	stroke: #3b82f6;
}

.alert-title
{
	font-size: 14px;
	font-weight: 600;
	font-family: inherit;
	margin-bottom: 10px;
	line-height: 1.3;
}

.alert-description
{
	font-size: 12px;
	color: #64748b;
	line-height: 1.5;
	margin-bottom: 12px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.alert-footer
{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: 12px;
	border-top: 1px solid #f1f5f9;
}

.alert-date
{
	font-size: 11px;
	color: #94a3b8;
}

.alert-link
{
	font-size: 12px;
	color: #3b82f6;
	font-weight: 600;
	text-decoration: none;
}

.alert-link:hover
{
	color: #2563eb;
}

/* Single Post Page Styles */
.single .site-main .container,
.archive .site-main .container,
.category .site-main .container,
.tag .site-main .container,
.page-template-password-generator .site-main .container
{
	display: grid;
	grid-template-columns: 1fr 350px;
	gap: 2rem;
	padding-top: 2rem;
	padding-bottom: 2rem;
}

/* Page template - full width content without sidebar */
.page .site-main .container
{
	padding-top: 2rem;
	padding-bottom: 2rem;
}

.blog-main-content
{
	min-width: 0;
}

.page-main-content .blog-post-content
{
	font-size: 1rem;
	color: #000000;
	min-width: 0;
}

.blog-post-content article
{
	min-width: 0;
}

.page-main-content .blog-post-content ul
{
	margin: 0 0 1rem 2.5rem;
}

.page-main-content .blog-post-content a
{
	color: inherit;
}

.page-main-content .blog-post-content h3,
.page-main-content .blog-post-content h4
{
	margin-bottom: 1.5rem;
	
}

.page-main-content .blog-post-content h3
{
	font-size: 1.5rem;
}

.page-main-content .blog-post-content h4
{
	font-size: 1.3rem;
}

.category-badge
{
	display: inline-block;
	padding: 0.4rem 1rem;
	background: linear-gradient(135deg, #ec4899, #f97316);
	color: white;
	border-radius: 10px;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	text-decoration: none;
	transition: all 0.3s;
}

.blog-post-title
{
	font-size: 2.2rem;
	color: #1a1a1a;
	line-height: 1.2;
}

.blog-post-meta
{
	display: flex;
	gap: 1.5rem;
	color: #888888;
	font-size: 0.9rem;
	margin-bottom: 2rem;
	padding-bottom: 1.5rem;
	border-bottom: 2px solid #f0f0f0;
	flex-wrap: wrap;
}

.blog-featured-image
{
	width: 100%;
	max-height: 350px;
	border-radius: 12px;
	overflow: hidden;
}

.blog-featured-image img
{
	width: 100%;
	height: 100%;
	max-height: 350px;
	display: block;
	object-fit: cover;
	object-position: bottom;
}

.blog-sidebar
{
	position: sticky;
	top: 2rem;
	height: fit-content;
}

.sidebar-section
{
	background: #ffffff;
	border-radius: 12px;
	padding: 2rem;
	margin-bottom: 2rem;
	border: 1px solid #e5e7eb;
}

.sidebar-section:last-child
{
	margin-bottom: 0;
}

.sidebar-section h3
{
	font-size: 1.25rem;
	margin-bottom: 1rem;
	padding-bottom: 1rem;
	color: #1a1a1a;
	border-bottom: 1px solid #e5e7eb;
}

.sidebar-section h3 svg
{
	height: 1.5rem;
	position: relative;
	top: 2px;
	margin-right: .25rem;
	fill: #F59E0B;
}

.sidebar-section ol,
.sidebar-section ul
{
	font-size: .9rem;
}

.sidebar-section ol li,
.sidebar-section ul li
{
	font-weight: 500;
	line-height: 1.8;
}

.sidebar-section ol li a,
.sidebar-section ul li a
{
	font-weight: normal;
	color: inherit;
}

.sidebar-section ol ul li
{
	list-style-type: disc;
}

.recent-post-item
{
	padding: 0 0 1rem 0;
	margin-bottom: 1rem;
	border-bottom: 1px solid #e5e7eb;
}

.recent-post-item:last-child
{
	border-bottom: none;
	padding-bottom: 0;
	margin-bottom: 0;
}

.recent-post-item h4
{
	font-size: 1rem;
	margin-bottom: 0.5rem;
	line-height: 1.4;
}

.recent-post-item h4 a
{
	color: #333333;
	text-decoration: none;
	transition: color 0.3s;
	font-weight: 400;
	font-size: .9rem;
	font-family: 'Montserrat', sans-serif;
}

.recent-post-item h4 a:hover
{
	color: #4169e1;
}

.recent-post-item .recent-post-meta
{
	font-size: 0.85rem;
	color: #888888;
}

.tag-item
{
	display: inline-block;
	padding: 0.5rem 1rem;
	background: white;
	border: 2px solid #e5e7eb;
	border-radius: 20px;
	font-size: 0.85rem;
	margin: 0.25rem;
	transition: all 0.3s;
	cursor: pointer;
	text-decoration: none;
	color: #333333;
}

.tag-item:hover
{
	border-color: #4169e1;
	color: #4169e1;
}

.cta-box
{
	background: linear-gradient(135deg, #4169e1, #8b5cf6);
	color: white;
	padding: 2rem;
	border-radius: 12px;
	text-align: center;
}

.cta-box h3
{
	margin-bottom: 1rem;
	font-size: 1.25rem;
	color: white;
}

.cta-box p
{
	margin-bottom: 1.5rem;
	opacity: 0.9;
}

.cta-button,
.article-cta .wp-element-button
{
	background: white;
	color: #4169e1;
	padding: 0.75rem 2rem;
	border-radius: 8px;
	border: none;
	font-weight: 600;
	cursor: pointer;
	transition: transform 0.3s;
	text-decoration: none;
	display: inline-block;
}

.article-cta .wp-element-button
{
	background: #ffcc7e;
	color: #000000;
}

/* Hover effect combined above */

/* Newsletter Sidebar */
.newsletter-sidebar
{
	background: linear-gradient(to bottom right, #fffbeb, #ffedd5);
	border: 1px solid #F59E0B;
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.newsletter-sidebar h3
{
	border-bottom: none;
	padding-bottom: 0;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0.75rem;
}

.newsletter-sidebar h3 svg
{
	width: 20px;
	height: 20px;
	fill: currentColor;
	flex-shrink: 0;
}

.newsletter-sidebar p
{
	font-size: 0.875rem;
	color: #4b5563;
	margin-bottom: 1rem;
}

.newsletter-sidebar .newsletter-form
{
	display: block;
}

.newsletter-sidebar .newsletter-input
{
	width: 100%;
	padding: 0.5rem 1rem;
	font-size: 0.875rem;
	border: 1px solid #d1d5db;
	border-radius: 8px;
	margin-bottom: 1rem;
	box-sizing: border-box;
}

.newsletter-sidebar .newsletter-input:focus
{
	outline: none;
	border-color: #4169E1;
	box-shadow: 0 0 0 3px rgba(65, 105, 225, 0.1);
}

.newsletter-sidebar .newsletter-error
{
	display: none;
	color: #991b1b;
	font-size: 0.75rem;
	margin: -0.5rem 0 0.75rem 0 !important;
	line-height: 1.5;
}

.newsletter-sidebar .newsletter-error svg
{
	width: 14px;
	height: 14px;
	stroke: #991b1b;
	float: left;
	margin-right: 5px;
	margin-top: -6px;
}

.newsletter-sidebar .newsletter-error span
{
	display: block;
	overflow: hidden;
}

.newsletter-sidebar .btn
{
	width: 100%;
	padding-top: .6rem;
	padding-bottom: .6rem;
}

.post-navigation
{
	margin-top: 2rem;
}

.post-navigation .nav-links
{
	display: flex;
	justify-content: space-between;
	gap: 2rem;
	align-items: stretch;
}

.post-navigation .nav-previous,
.post-navigation .nav-next
{
	flex: 1;
	max-width: 50%;
	display: flex;
}

.post-navigation a
{
	display: flex;
	flex-direction: column;
	padding: 1rem 1.5rem;
	background: #fef3e2;
	border-radius: 8px;
	text-decoration: none;
	color: #333333;
	font-weight: 600;
	transition: all 0.3s;
	border: 1px solid #e5e7eb;
	width: 100%;
}

.post-navigation a:hover
{
	background: linear-gradient(135deg, #4169e1, #8b5cf6);
	color: white;
	border-color: transparent;
}

.post-navigation .nav-subtitle
{
	font-weight: 400;
	font-size: 0.9rem;
	margin-top: 0.5rem;
	opacity: 0.8;
}

.post-navigation .nav-next
{
	text-align: right;
}

#comments
{
	margin-top: 2rem;
	padding-top: 2rem;
	border-top: 2px solid #f0f0f0;
}

.blog-comments-section h2
{
	font-size: 2rem;
	margin-bottom: 2rem;
	color: #1a1a1a;
}

.blog-comments-section h3
{
	margin-bottom: 1.5rem;
	color: #1a1a1a;
}

.comment-form
{
	background: #ffffff;
	padding: 2rem;
	border-radius: 12px;
	border: 1px solid #e5e7eb;
}

.comment-form .form-group
{
	margin-bottom: 1rem;
}

.comment-form label
{
	display: block;
	margin-bottom: 0.5rem;
	font-weight: 600;
	color: #333333;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea
{
	width: 100%;
	padding: 0.75rem;
	border: 2px solid #e5e7eb;
	border-radius: 8px;
	font-family: inherit;
	font-size: 1rem;
	transition: border-color 0.3s;
}

.comment-form input:focus,
.comment-form textarea:focus
{
	outline: none;
	border-color: #4169e1;
}

.comment-form textarea
{
	min-height: 120px;
	resize: vertical;
}

.comment-form .form-row
{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}

.comment-form .checkbox-group
{
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 1.5rem;
}

.comment-form .checkbox-group input[type="checkbox"]
{
	width: auto;
}

.comment-form .checkbox-group label
{
	font-weight: 400;
	margin: 0;
}

.comment-form .submit-button,
.comment-form input[type="submit"]
{
	background: linear-gradient(135deg, #4169e1, #8b5cf6);
	color: white;
	padding: 0.875rem 2.5rem;
	border: none;
	border-radius: 8px;
	font-weight: 600;
	font-size: 1rem;
	cursor: pointer;
	transition: transform 0.3s;
}

/* Hover effect combined above */

.comment-list
{
	list-style: none;
	padding: 0;
	margin: 0;
}

.comment-list .comment
{
	padding: 1.5rem;
	background: white;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	margin-bottom: 1.5rem;
}

.comment-list .comment-body-wrapper
{
	display: flex;
	flex-direction: column;
}

.comment-list .comment-header
{
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: 1rem;
}

.comment-list .comment-avatar
{
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: linear-gradient(135deg, #ec4899, #8b5cf6);
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	font-weight: 700;
	font-size: 1.1rem;
}

.comment-list .comment-author-info
{
	flex: 1;
}

.comment-list .comment-author-info h4
{
	font-size: 1rem;
	color: #1a1a1a;
	margin-bottom: 0.25rem;
}

.comment-list .comment-date
{
	font-size: 0.85rem;
	color: #888888;
}

.comment-list .comment-body
{
	color: #444444;
	line-height: 1.6;
	margin-bottom: 1rem;
}

.comment-list .comment-body p:last-child
{
	margin-bottom: 0;
}

.comment-list .reply
{
	margin-top: 0.5rem;
}

.comment-list .reply a
{
	color: #4169e1;
	text-decoration: none;
	font-size: 0.9rem;
	font-weight: 600;
	transition: color 0.3s;
}

.comment-list .reply a:hover
{
	color: #3367d6;
}

.comment-list .children
{
	list-style: none;
	padding-left: 3rem;
	margin-top: 1.5rem;
}

.comment-list .comment-respond
{
	margin-top: 1.5rem;
	margin-bottom: 1.5rem;
}

.comment-notes
{
	margin-bottom: 1.5rem;
}

.comment-reply-title
{
	display: flex;
	gap: 1rem;
	align-items: center;
}

.comment-reply-title a
{
	color: inherit;
}

/* Article Callout */
.article-callout
{
	border-radius: 12px;
	border-top-left-radius: 0;
	overflow: hidden;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
	background: #f9fafb;
	border: 1px solid #e5e7eb;
	margin-bottom: 2rem !important;
	position: relative;
	padding-left: 1px;
}

.article-callout::before
{
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 1px;
	background: linear-gradient(to bottom, #4169e1 0%, #ec4899 33%, #8b5cf6 66%, #f59e0b 100%);
}

.article-callout-header
{
	background: #f5f3ff;
	margin-bottom: 1.5rem;
	padding: 1.25rem 1.5rem;
	border-bottom: 1px solid #e5e7eb;
	position: relative;
}

.article-callout-header::before
{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(to right, #4169e1 0%, #ec4899 33%, #8b5cf6 66%, #f59e0b 100%);
}

.article-callout-header h4,
.article-callout-header p
{
	margin-bottom: 0;
	font-family: inherit;
	color: inherit;
}

.article-callout-header a
{
	text-decoration: none;
	color: inherit;
}

.article-callout-header ~ *
{
	margin-bottom: 1.5rem;
	padding: 0 1.5rem;
}

.article-callout ul,
.article-callout ol
{
	margin: 0 1.5rem 1.5rem;
	padding: 1rem 1rem 1rem 2rem;
	background: rgb(254, 243, 226);
	border: 1px solid rgb(229, 231, 235);
	border-radius: 8px;
	font-size: .9rem;
}

/* Unordered lists - bullets */
.article-callout ul li:nth-child(4n+1)::marker
{
	color: #4169e1;
}

.article-callout ul li:nth-child(4n+2)::marker
{
	color: #ec4899;
}

.article-callout ul li:nth-child(4n+3)::marker
{
	color: #8b5cf6;
}

.article-callout ul li:nth-child(4n+4)::marker
{
	color: #f59e0b;
}

/* Ordered lists - numbers */
.article-callout ol li:nth-child(4n+1)::marker
{
	color: #4169e1;
}

.article-callout ol li:nth-child(4n+2)::marker
{
	color: #ec4899;
}

.article-callout ol li:nth-child(4n+3)::marker
{
	color: #8b5cf6;
}

.article-callout ol li:nth-child(4n+4)::marker
{
	color: #f59e0b;
}

.article-callout .wp-block-button
{
	flex-basis: 100%;
	text-align: center;
	background: #f5f3ff;
	font-weight: 700;
	border-radius: 8px;
	padding: 1rem;
	border: 1px solid #e5e7eb;
}

/* Index Page Specific Styles */
.breach-result-hidden
{
	margin-top: 1rem;
	display: none;
}

.sidebar-image-red
{
	background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

/* 404 Page */
.error-404-content
{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 60vh;
	text-align: center;
}

.error-404-content h1
{
	font-size: 8rem;
	font-weight: 700;
	color: #1a1a1a;
	margin-bottom: 2rem;
	line-height: 1;
}

.error-404-content .btn
{
	margin-top: 1rem;
}

article
{
	overflow: hidden;
	line-height: 1.8;
}

article,
article a
{
	font-size: 1rem;
	color: #000000;
}

article h2,
article h2 a,
article h3,
article h3 a,
article h4,
article h4 a,
article h5,
article h5 a,
article h6,
article h6 a
{
	margin-bottom: 1.5rem;
	color: #1e3a8a;
}

article ol,
article ul
{
	margin: 0 0 1.5rem 2.5rem;
}

article :is(ul, ol) :is(ul, ol)
{
	margin-bottom: 0;
}

article p
{
	margin-bottom: 1.5rem;
}

.article-index
{
	margin-bottom: 1.5rem;
	padding: 1.5rem 2rem 2rem 2rem;
	background: #f1f1f1;
	border-radius: 5px;
}

.article-index h2
{
	margin-bottom: .5rem;
}

.article-index ol,
.article-index ul
{
	margin: 0 0 0 1.2rem;
}

.article-button
{
	margin-bottom: 1.5rem !important;
}

.article-button a
{
	color: #fff;
}

.article-button svg
{
	padding-left: .5rem;
	fill: #fff;
}

.article-cta
{
	display: flex;
	flex-direction: column;
	padding: 1rem 1.5rem 1.5rem 1.5rem;
	background: #fef3e2;
	border-radius: 8px;
	text-decoration: none;
	color: #333333;
	font-weight: 600;
	transition: all 0.3s;
	border: 1px solid #e5e7eb;
	width: 100%;
	margin-bottom: 1.5rem;
}

.article-cta h3
{
	margin-bottom: .75rem;
	padding-bottom: .75rem;
	font-size: 1.25rem;
	color: #000000;
	border-bottom: 1px solid #e5e7eb;
}

.article-cta p
{
	margin-bottom: .75rem;
	font-weight: normal;
}

/* ===========================================
   Password Generator Full Page Styles
   =========================================== */

.generator-section
{
	overflow: hidden;
}

.page-title
{
	font-size: 36px;
	font-weight: 700;
	color: #1f2937;
	margin-bottom: 10px;
}

.page-subtitle
{
	color: #6b7280;
	font-size: 16px;
	line-height: 1.6;
	margin-bottom: 1.25rem;
}

/* Tabs */
.tabs
{
	display: flex;
	gap: 10px;
	margin-bottom: 30px;
	border-bottom: 2px solid #e5e7eb;
}

.tab
{
	padding: 12px 24px;
	background: none;
	border: none;
	color: #6b7280;
	font-size: 15px;
	font-weight: 500;
	cursor: pointer;
	border-bottom: 3px solid transparent;
	margin-bottom: -2px;
	transition: all 0.3s;
}

.tab:hover
{
	color: #3b82f6;
}

.tab.active
{
	color: #3b82f6;
	border-bottom-color: #3b82f6;
}

/* Password Type Toggle */
.password-type-toggle
{
	display: flex;
	gap: 10px;
	margin-bottom: 20px;
	background: #f3f4f6;
	padding: 4px;
	border-radius: 8px;
}

.type-btn
{
	flex: 1;
	padding: 10px 20px;
	background: none;
	border: none;
	color: #6b7280;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	border-radius: 6px;
	transition: all 0.3s;
}

.type-btn:hover
{
	color: #1f2937;
}

.type-btn.active
{
	background: white;
	color: #3b82f6;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Radio Group */
.radio-group
{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
}

.radio-item
{
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	border-radius: 6px;
	transition: background 0.3s;
}

.radio-item input[type="radio"]
{
	cursor: pointer;
	accent-color: #3b82f6;
}

.radio-item span
{
	font-size: 14px;
	color: #374151;
}

/* Bulk Generation */
.bulk-generation
{
	margin-top: 15px;
}

.bulk-controls
{
	display: flex;
	gap: 10px;
}

.bulk-input
{
	padding: 10px 15px;
	border: 2px solid #e5e7eb;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 600;
}

.bulk-input:focus
{
	outline: none;
	border-color: #3b82f6;
}

.btn-secondary-alt
{
	flex: 1;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: white;
	border: none;
	padding: 10px 20px;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: transform 0.3s, box-shadow 0.3s;
}

.btn-secondary-alt:hover
{
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

#multiplePasswordsContainer
{
	margin-top: 1.5rem;
}

.multiple-passwords-header
{
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 15px;
	padding-bottom: 10px;
	border-bottom: 2px solid #e5e7eb;
}

.passwords-count
{
	font-size: 14px;
	font-weight: 600;
	color: #374151;
}

.btn-copy-all
{
	background: #3b82f6;
	color: white;
	border: none;
	padding: 6px 16px;
	border-radius: 6px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.3s;
}

.btn-copy-all:hover
{
	background: #2563eb;
}

.multiple-passwords-list
{
	max-height: 400px;
	overflow-y: auto;
	background: #f9fafb;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	padding: 15px;
}

.password-item
{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 15px;
	background: white;
	border: 1px solid #e5e7eb;
	border-radius: 6px;
	margin-bottom: 10px;
	transition: all 0.3s;
}

.password-item:hover
{
	border-color: #3b82f6;
	box-shadow: 0 2px 4px rgba(59, 130, 246, 0.1);
}

.password-item:last-child
{
	margin-bottom: 0;
}

.password-item-text
{
	font-family: 'Courier New', monospace;
	font-size: 14px;
	color: #1f2937;
	font-weight: 600;
	flex: 1;
	word-break: break-all;
}

.password-item-actions
{
	display: flex;
	gap: 5px;
	margin-left: 15px;
}

.icon-btn-small
{
	background: none;
	border: none;
	color: #6b7280;
	cursor: pointer;
	padding: 6px;
	border-radius: 4px;
	transition: all 0.3s;
	display: flex;
	align-items: center;
	justify-content: center;
}

.icon-btn-small:hover
{
	background: #e5e7eb;
	color: #1f2937;
}

/* Scrollbar styling */
.multiple-passwords-list::-webkit-scrollbar
{
	width: 8px;
}

.multiple-passwords-list::-webkit-scrollbar-track
{
	background: #f3f4f6;
	border-radius: 4px;
}

.multiple-passwords-list::-webkit-scrollbar-thumb
{
	background: #d1d5db;
	border-radius: 4px;
}

.multiple-passwords-list::-webkit-scrollbar-thumb:hover
{
	background: #9ca3af;
}

/* Password Settings */
#passphraseSettings
{
	margin-bottom: 1.5rem;
}

.settings-label
{
	display: block;
	font-size: 14px;
	font-weight: 600;
	color: #374151;
	margin-bottom: 10px;
}

.slider-container
{
	display: flex;
	align-items: center;
	gap: 15px;
}

.slider-value
{
	min-width: 40px;
	text-align: center;
	font-weight: 600;
	color: #1f2937;
}

/* Checkboxes */
.checkbox-group
{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: .5rem;
}

.checkbox-item
{
	display: flex;
	align-items: center;
}

.checkbox-item input[type="checkbox"]
{
	width: 18px;
	height: 18px;
	cursor: pointer;
	accent-color: #3b82f6;
}

.checkbox-item label
{
	font-size: 14px;
	color: #374151;
	cursor: pointer;
}

/* Buttons */
.btn-primary
{
	width: 100%;
	background: #3b82f6;
	color: white;
	border: none;
	padding: 14px 24px;
	border-radius: 8px;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.3s;
}

/* Strength Check Tab */
.input-field
{
	width: 100%;
	padding: 12px 16px;
	border: 2px solid #e5e7eb;
	border-radius: 8px;
	font-size: 16px;
	margin-bottom: 20px;
}

.input-field:focus
{
	outline: none;
	border-color: #3b82f6;
}

.strength-result
{
	background: #f9fafb;
	border-radius: 8px;
	padding: 20px;
	margin-bottom: 20px;
}

.strength-score
{
	font-size: 1.2rem;
	font-weight: 600;
}

.strength-score.strong
{
	color: #10b981;
}

.strength-score.medium
{
	color: #f59e0b;
}

.strength-score.weak
{
	color: #ef4444;
}

.strength-details
{
	list-style: none;
	margin-top: 15px;
}

.strength-details li
{
	padding: 0 0 .5rem 0;
	color: #4b5563;
	display: flex;
	font-size: .9rem;
	align-items: center;
	gap: .4rem;
}

/* Breach Check Tab */
.breach-info
{
	background: #fef3c7;
	border-left: 4px solid #f59e0b;
	padding: 15px;
	border-radius: 4px;
	margin-bottom: 20px;
	font-size: 14px;
	color: #92400e;
}

.breach-result
{
	background: #f9fafb;
	border-radius: 8px;
	padding: 20px;
	text-align: center;
}

.breach-status
{
	font-size: 20px;
	font-weight: 600;
	margin-bottom: 10px;
}

.breach-status.safe
{
	color: #10b981;
}

.breach-status.danger
{
	color: #ef4444;
}

/* CODE */

/* Code block styling */
code {
	display: block;
	background: #1e1e1e;
	color: #d4d4d4;
	padding: 20px;
	padding-top: 26px;
	padding-right: 50px; /* Space for copy button */
	border-radius: 8px;
	overflow-x: auto;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	position: relative;
	font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
	font-size: 0.9em;
	line-height: 1.6;
}

/* Colorful top bar */
code::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 6px;
	background: linear-gradient(90deg, #4169E1 0%, #EC4899 33%, #8B5CF6 66%, #F59E0B 100%);
	border-radius: 8px 8px 0 0;
}

/* Copy button */
.copy-button {
	position: absolute;
	top: 24px;
	right: 22px;
	background: linear-gradient(135deg, #4169E1, #8B5CF6);
	border: none;
	color: white;
	padding: 6px 12px;
	border-radius: 8px;
	cursor: pointer;
	font-size: .8rem;
	font-weight: 600;
	transition: all 0.3s ease;
	display: flex;
	align-items: center;
	z-index: 10;
}

.copy-button:hover {
	background: linear-gradient(135deg, #5179f1, #9b6cff);
	box-shadow: 0 4px 8px rgba(65, 105, 225, 0.3);
	transform: translateY(-1px);
}

.copy-button:active {
	transform: translateY(0);
}

.copy-button.copied {
	background: linear-gradient(135deg, #8B5CF6, #EC4899);
}

/* Copy icon SVG */
.copy-icon {
	width: 14px;
	height: 14px;
}

/* Syntax highlighting (optional) */
code .keyword { color: #EC4899; font-weight: 600; }
code .string { color: #F59E0B; }
code .function { color: #4169E1; }
code .comment { color: #6c757d; font-style: italic; }
code .variable { color: #8B5CF6; }
code .number { color: #F59E0B; }

/* ===========================================
   RESPONSIVE MEDIA QUERIES
   =========================================== */

/* Desktop Breakpoint - 991px */
@media (max-width: 991px)
{
	.header
	{
		padding: .75rem 0;
	}

	.logo
	{
		font-size: 1.25rem;
	}

	/* Mobile CTA Banner */
	.mobile-cta-banner
	{
		display: block;
		background: linear-gradient(135deg, #4169e1, #8b5cf6);
		padding: .5rem 0;
	}

	.mobile-cta-content
	{
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		flex-wrap: wrap;
	}

	.mobile-cta-content span
	{
		color: white;
		font-size: 1rem;
		line-height: 1.4;
		flex: 1;
		min-width: 200px;
	}

	.mobile-cta-button
	{
		background: white;
		color: #4169e1;
		padding: 0.25rem .75rem;
		border-radius: 6px;
		text-decoration: none;
		font-weight: 600;
		font-size: 0.875rem;
		white-space: nowrap;
		transition: transform 0.2s, box-shadow 0.2s;
	}

	.mobile-cta-button:hover
	{
		transform: translateY(-2px);
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	}

	/* Navigation */
	.hamburger
	{
		display: flex;
	}

	.nav-menu
	{
		position: fixed;
		top: 57px;
		right: -100%;
		width: 280px;
		height: calc(100vh - 57px);
		background: white;
		box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
		transition: right 0.3s ease;
		flex-direction: column;
		align-items: flex-start;
		padding: 1rem;
		gap: 0;
		overflow-y: auto;
		z-index: 1000;
	}

	.nav-menu.active
	{
		right: 0;
	}

	.nav-links
	{
		flex-direction: column;
		width: 100%;
		gap: 0;
		margin-bottom: 2rem;
	}

	.nav-links li
	{
		width: 100%;
		border-bottom: 1px solid #f3f4f6;
	}

	.nav-links a
	{
		display: block;
		padding: 1rem;
		width: 100%;
	}
	
	.post-navigation .nav-subtitle
	{
		display: block;
	}

	.dropdown-menu
	{
		position: static;
		box-shadow: none;
		margin-top: 0;
		background: #f8f9fa;
		border-radius: 0;
		padding: 0;
	}

	.dropdown-menu li
	{
		border-bottom: none;
	}

	.dropdown-menu a
	{
		padding: 0.75rem 1rem;
	}

	.has-dropdown:hover .dropdown-menu
	{
		display: none;
	}

	.has-dropdown.active .dropdown-menu
	{
		display: block;
	}

	.login-btn
	{
		width: 100%;
		text-align: center;
	}
	
	.hero
	{
		margin-bottom: 2rem;
		padding-top: 2rem;
		padding-bottom: 2rem;
	}

	/* Layout */
	.single .site-main .container,
	.archive .site-main .container,
	.category .site-main .container,
	.tag .site-main .container
	{
		grid-template-columns: 1fr;
		gap: 2rem;
	}

	.blog-sidebar
	{
		position: static;
	}

	/* Password Generator */
	.password-generator-full
	{
		grid-template-columns: 1fr;
	}

	.checkbox-group
	{
		grid-template-columns: 1fr;
	}
	
	.blog-comments-section h2
	{
		font-size: 1.3rem;
	}
	
	.comment-form
	{
		padding: 1.5rem;
	}
	
	.site-main .container
	{
		padding-top: 1.25rem !important;
	}
	
	.nav-link-pg
	{
		border-bottom: none;
	}
	
	.nav-link-pg a
	{
		padding: 0.875rem 1.75rem;
		border-radius: 6px;
		text-decoration: none;
		font-weight: 600;
		display: inline-block;
		border: none;
		background: linear-gradient(135deg, #ec4899 0%, #8b5cf6 100%);
		color: #ffffff;
		width: auto;
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
	}
	
	.nav-link-pg svg
	{
		display: inline-block;
		position: relative;
		top: 2px;
		height: 1rem;
		fill: #fff;
	}
	
	.blog-grid
	{
		margin-top: 1.5rem;
	}
}

/* Tablet Breakpoint - 768px */
@media (max-width: 768px)
{
	/* Navigation */
	.hamburger
	{
		display: flex;
	}
	
	.dropdown-menu
	{
		position: static;
		box-shadow: none;
		margin-top: 0;
		background: #f8f9fa;
		border-radius: 0;
		padding: 0;
	}
	
	.login-btn
	{
		width: 100%;
		text-align: center;
	}
	
	/* Hero Section */
	.hero
	{
		margin-bottom: 2rem;
		padding: 3rem 0;
	}
	
	.hero-content
	{
		grid-template-columns: 1fr;
		text-align: center;
		display: flex;
		flex-direction: column;
		align-items: stretch;
	}

	.hero-left
	{
		height: auto;
	}

	.featured-tools
	{
		height: auto;
	}
	
	.hero-text h1
	{
		font-size: 2rem;
	}
	
	.hero-buttons
	{
		justify-content: center;
	}
	
	.featured-post-card
	{
		align-items: center;
	}
	
	.featured-post-card h1
	{
		font-size: 1.5rem;
	}
	
	.featured-excerpt
	{
		font-size: 1rem;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
	
	/* Featured Section */
	.featured-grid
	{
		grid-template-columns: 1fr;
	}
	
	.featured-main
	{
		margin-bottom: 1.5rem;
	}
	
	.featured-content h3
	{
		margin-bottom: 1rem;
	}
	
	.featured-meta
	{
		margin-top: 1rem;
	}
	
	.featured-header .featured-meta
	{
		margin-top: 0;
	}
	
	.featured-sidebar
	{
		gap: 1.5rem;
	}
	
	/* Generator Section */
	.generator h2
	{
		font-size: 1.8rem;
	}
	
	.generator-tool
	{
		margin: 0 1rem;
		padding: 1.5rem;
	}
	
	/* Blog Section */
	.blog-grid
	{
		grid-template-columns: repeat(2, 1fr);
		gap: 1.5rem;
	}
	
	.blog-section
	{
		padding: 3rem 0;
		padding-top: 0;
	}
	
	.blog-section h2,
	.newsletter-content h2
	{
		font-size: 1.5rem;
	}
	
	.blog-post-title
	{
		font-size: 1.5rem;
	}
	
	/* CTA Section */
	.cta-section h2
	{
		font-size: 2rem;
	}
	
	.cta-buttons
	{
		flex-direction: column;
		align-items: center;
	}
	
	/* Footer */
	.footer-links
	{
		grid-template-columns: repeat(2, 1fr);
		gap: 2rem;
	}
	
	.footer-bottom
	{
		flex-direction: column;
		text-align: center;
	}
	
	.footer-legal
	{
		align-items: center;
	}
	
	.legal-links
	{
		justify-content: center;
	}
	
	/* Post Navigation */
	.post-navigation .nav-links
	{
		flex-direction: column;
		gap: 1rem;
	}
	
	.post-navigation .nav-previous,
	.post-navigation .nav-next
	{
		max-width: 100%;
	}
	
	/* Comments */
	.comment-form .form-row
	{
		grid-template-columns: 1fr;
	}
	
	.comment-list .children
	{
		padding-left: 1rem;
	}
	
	/* 404 Page */
	.error-404-content h1
	{
		font-size: 6rem;
	}
	
	/* Password Generator */
	.generator-section
	{
		padding: 0;
	}
	
	.page-title
	{
		font-size: 28px;
	}
	
	.radio-group
	{
		grid-template-columns: 1fr;
	}
	
	article h2,
	.featured-content h3
	{
		font-size: 1.3rem;
	}
	
	.password-display
	{
		text-align: left;
	}
	
	.article-index
	{
		padding: 1rem 1.5rem 1.5rem 1.5rem;
	}
	
	.comment-form .form-row
	{
		gap: 0;
	}
	
	.featured-post-card .btn-primary
	{
		padding: .5rem 1rem;
	}
	
	.generator-section .page-subtitle
	{
		margin-bottom: .5rem;
	}
	
	.generator-section .tabs
	{
		margin-bottom: 1rem;
	}
	
	:where(.wp-block-columns.is-layout-flex)
	{
		gap: 0;
	}
	
	.blog-content
	{
		padding: 1.25rem;
	}
}

/* Mobile Breakpoint - 576px */
@media (max-width: 576px)
{
	.blog-grid,
	body.archive .blog-grid
	{
		grid-template-columns: repeat(1, 1fr);
	}
	
	.error-404-content h1
	{
		font-size: 4rem;
	}
	
	.featured-tools
	{
		padding: 0;
		background: none;
	}
	
	.tab-content,
	.featured-content,
	.featured-recent-security-alerts
	{
		padding: 1.25rem;
	}
	
	.featured-content
	{
		padding-bottom: 0;
	}

	.alerts-grid
	{
		grid-template-columns: 1fr;
	}
	
	.tab-btn
	{
		padding: .5rem .75rem;
	}
}

/* Small Mobile Breakpoint - 480px */
@media (max-width: 480px)
{
	.container
	{
		padding: 0 15px;
	}
	
	.hero
	{
		padding: 2rem 0;
	}
	
	.hero-text h1
	{
		font-size: 1.75rem;
	}
	
	.hero-buttons
	{
		flex-direction: column;
	}
	
	.hero-password-display
	{
		flex-direction: column;
		gap: 1rem;
		text-align: center;
	}
	
	.cta-section h2
	{
		font-size: 1.75rem;
	}
	
	.footer-links
	{
		grid-template-columns: 1fr;
		gap: 2rem;
		text-align: center;
	}
	
	.social-media
	{
		flex-wrap: wrap;
		justify-content: center;
	}
	
	.legal-links
	{
		flex-direction: column;
		text-align: center;
		gap: 0.5rem;
	}
}