/*
Theme Name: IPFA
Theme URI: https://example.com/ipfa
Author: IPFA
Author URI: https://example.com/
Description: Editorial theme for the International Pickle Founders Association — a fictional demonstration site. Ships the full IPFA layout, auto-installs its pages and two sample articles on activation, and keeps every block editable in the free Elementor page builder.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ipfa
Tags: blog, editorial, one-column, two-columns, custom-menu, custom-logo, featured-images, threaded-comments, translation-ready

The design styles live in assets/design.css; this file carries the theme header
plus the WordPress and Elementor integration layer.
*/

/* -------------------------------------------------------------------------
   WordPress core classes
   ------------------------------------------------------------------------- */

.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.screen-reader-text:focus {
	background: var(--cream);
	clip-path: none;
	color: var(--forest);
	display: block;
	font-size: 13px;
	font-weight: 700;
	height: auto;
	left: 6px;
	line-height: normal;
	padding: 15px 23px;
	text-decoration: none;
	top: 6px;
	width: auto;
	z-index: 100000;
}

.alignleft {
	float: left;
	margin: 6px 28px 22px 0;
}

.alignright {
	float: right;
	margin: 6px 0 22px 28px;
}

.aligncenter {
	clear: both;
	display: block;
	margin: 22px auto;
}

.alignwide,
.alignfull {
	margin: 32px 0;
	max-width: 100%;
}

.wp-caption {
	margin-bottom: 22px;
	max-width: 100%;
}

.wp-caption-text,
.wp-element-caption,
figcaption {
	color: var(--muted);
	font-size: 12px;
	letter-spacing: 0.03em;
	margin-top: 10px;
	text-align: center;
}

.sticky .post-card-content h3:after {
	color: var(--gold);
	content: " ★";
}

/* No rules for `.gallery` here: the design already owns that class for its
   photo grid, so styling it for WordPress's core gallery would change the
   Brine Academy layout. */

/* A logo set in Customize > Site Identity replaces the theme's square emblem.
   The design sizes that emblem 58x58 (47x47 on mobile); a custom logo is any
   shape, so match the height and let the width follow, rather than squashing
   it into a square. */
.brand img.custom-logo {
	height: 58px;
	max-width: 240px;
	object-fit: contain;
	width: auto;
}

/* The design marks .brand flex-shrink:0, which is safe for its own fixed-size
   square emblem but not for a wide wordmark: below roughly 1080px the header
   runs out of room and the logo would push it past the viewport. Where a
   custom logo is in use, cap its width and let the lockup compress instead.
   The body class keeps all of this off the default layout. */
@media (max-width: 1080px) {
	.brand img.custom-logo {
		max-width: 150px;
	}

	.ipfa-has-logo .brand {
		flex-shrink: 1;
		min-width: 0;
	}

	/* min-width on the flex item, max-width on the line that carries the
	   design's fixed 220px/165px cap. */
	.ipfa-has-logo .brand-text {
		min-width: 0;
	}

	.ipfa-has-logo .brand-text small {
		max-width: 100%;
	}
}

@media (max-width: 750px) {
	.brand img.custom-logo {
		height: 47px;
		max-width: 34vw;
	}
}

/* The sticky header must clear the admin bar for logged-in editors. */
.admin-bar .header {
	top: 32px;
}

.admin-bar .article-sidebar {
	top: 142px;
}

@media screen and (max-width: 782px) {
	.admin-bar .header {
		top: 46px;
	}
}

@media (max-width: 750px) {
	.admin-bar .nav-links {
		top: 73px;
	}
}

/* -------------------------------------------------------------------------
   Post content: inherits the editorial article styles
   ------------------------------------------------------------------------- */

.article-content > *:first-child {
	margin-top: 0;
}

.article-content ul,
.article-content ol {
	color: var(--muted);
	margin: 0 0 23px;
	padding-left: 22px;
}

.article-content li {
	padding: 5px 0;
}

.article-content img,
.article-content iframe {
	height: auto;
	margin: 28px 0;
	max-width: 100%;
}

.article-content a:not(.btn):not(.text-link) {
	border-bottom: 1px solid var(--gold);
	color: var(--forest);
}

.article-content a:not(.btn):not(.text-link):hover {
	color: var(--olive);
}

.article-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	margin-top: 22px;
}

.article-tags a {
	background: #ede2c4;
	color: #586138;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.12em;
	padding: 7px 12px;
	text-transform: uppercase;
}

.article-tags a:hover {
	background: var(--gold);
	color: #1a2b1b;
}

/* -------------------------------------------------------------------------
   Pagination, search, comments and the empty state
   ------------------------------------------------------------------------- */

.pagination {
	border-top: 1px solid var(--line);
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	justify-content: center;
	margin-top: 55px;
	padding-top: 38px;
}

.pagination .page-numbers {
	border: 1px solid var(--line);
	color: var(--forest);
	display: inline-flex;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	min-height: 44px;
	min-width: 44px;
	align-items: center;
	justify-content: center;
	padding: 0 14px;
	transition: 0.2s;
}

.pagination .page-numbers:hover,
.pagination .page-numbers.current {
	background: var(--forest);
	border-color: var(--forest);
	color: #fff;
}

.search-form {
	display: flex;
	gap: 10px;
	margin-top: 25px;
	max-width: 480px;
}

.search-form input[type="search"] {
	background: #fcfaf5;
	border: 1px solid #ddd7c9;
	flex: 1;
	min-width: 0;
	outline-color: var(--olive);
	padding: 13px 15px;
}

.no-results {
	border: 1px solid var(--line);
	background: #fff;
	padding: 45px;
	text-align: center;
}

.comments-area {
	border-top: 1px solid var(--line);
	margin-top: 55px;
	padding-top: 45px;
}

.comments-area h2 {
	font-size: clamp(28px, 3vw, 38px);
}

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

.comment-list ol.children {
	list-style: none;
	padding-left: 28px;
}

.comment-body {
	border-bottom: 1px solid var(--line);
	padding: 22px 0;
}

.comment-meta {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 11px;
	margin-bottom: 11px;
}

.comment-meta img {
	border-radius: 50%;
}

.comment-author {
	font-family: "Playfair Display", Georgia, serif;
	font-size: 19px;
}

.comment-metadata,
.comment-metadata a {
	color: var(--muted);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.comment-respond {
	background: #f3eddc;
	border: 1px solid var(--line);
	padding: 32px;
}

.comment-form label {
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.11em;
	margin-bottom: 7px;
	text-transform: uppercase;
}

.comment-form input:not([type="submit"]):not([type="checkbox"]),
.comment-form textarea {
	background: #fcfaf5;
	border: 1px solid #ddd7c9;
	margin-bottom: 18px;
	outline-color: var(--olive);
	padding: 13px 15px;
	width: 100%;
}

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

/* The comment submit button carries `btn btn-green` (see comments.php), so the
   design's own button rules style it; it needs nothing of its own here. */

/* -------------------------------------------------------------------------
   Contact form states (progressively enhanced by assets/script.js)
   ------------------------------------------------------------------------- */

.ipfa-hp {
	left: -9999px;
	position: absolute;
}

.success.is-error {
	color: #9a2f2f;
}

#contact-form.is-sending button[type="submit"] {
	opacity: 0.6;
	pointer-events: none;
}

/* -------------------------------------------------------------------------
   Elementor integration

   Every design block is one full-width container with a single widget. These
   rules strip Elementor's own spacing and width constraints from those blocks
   so the supplied stylesheet alone controls the layout, on the front end and
   inside the editor canvas.
   ------------------------------------------------------------------------- */

.ipfa-block,
.ipfa-block > .e-con-inner {
	--padding-top: 0;
	--padding-right: 0;
	--padding-bottom: 0;
	--padding-left: 0;
	--margin-top: 0;
	--margin-right: 0;
	--margin-bottom: 0;
	--margin-left: 0;
	--gap: 0;
	--row-gap: 0;
	--column-gap: 0;
	max-width: 100%;
	width: 100%;
}

.ipfa-block > .elementor-element,
.ipfa-block > .e-con-inner > .elementor-element {
	width: 100%;
}

.ipfa-block .elementor-widget-container,
.ipfa-block .elementor-widget-html,
.ipfa-block .elementor-widget-shortcode,
.ipfa-block .elementor-shortcode {
	margin: 0;
	padding: 0;
}

/* Legacy section/column markup, in case a block is converted in the editor. */
.ipfa-block.elementor-section > .elementor-container {
	max-width: 100%;
}

.ipfa-block .elementor-column > .elementor-widget-wrap {
	padding: 0;
}

/* Elementor's frontend reset is

       .elementor img { border:none; border-radius:0; box-shadow:none;
                        height:auto; max-width:100% }

   which has exactly the same specificity as the design's own image rules and
   loads after them, so inside a builder page it silently flattens every image
   the design gives a height, a radius or a shadow — the hero photo stops being
   cropped, article and card images collapse to their natural ratio.

   These rules restore the design's values at a specificity that reset cannot
   reach. The values mirror assets/design.css; change them together.
   `.tall-image` is not listed because it already carries !important. */

.elementor .hero-photo img,
.elementor .post-card-image img,
.elementor .gallery img {
	height: 100%;
}

.elementor .certificate img {
	height: 75px;
}

.elementor .article-figure img {
	height: clamp(300px, 39vw, 545px);
}

.elementor .visual img {
	border-radius: 2px;
	box-shadow: 0 20px 48px rgba(18, 31, 21, 0.14);
	height: 460px;
}

@media (max-width: 750px) {
	.elementor .visual img {
		height: 370px;
	}
}