/*!
Theme Name: Packlim Canada
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.1.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: packlim-canada
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

Packlim Canada is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

@font-face {
	font-family: "Open Sans";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("assets/fonts/open-sans-latin.woff2") format("woff2");
}
@font-face {
	font-family: "Open Sans";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("assets/fonts/open-sans-latin.woff2") format("woff2");
}
@font-face {
	font-family: "Open Sans";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("assets/fonts/open-sans-latin.woff2") format("woff2");
}
@font-face {
	font-family: "Open Sans";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("assets/fonts/open-sans-latin.woff2") format("woff2");
}

@font-face {
	font-family: "Jost";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("assets/fonts/jost-latin.woff2") format("woff2");
}
@font-face {
	font-family: "Jost";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("assets/fonts/jost-latin.woff2") format("woff2");
}
@font-face {
	font-family: "Jost";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("assets/fonts/jost-latin.woff2") format("woff2");
}
@font-face {
	font-family: "Jost";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("assets/fonts/jost-latin.woff2") format("woff2");
}

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
	 ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
}

/* Sections
	 ========================================================================== */

/**
 * Remove the margin in all browsers.
 */
body {
	margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
	display: block;
}

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/

/* Header logo sizing (fallback if Tailwind not built) */
.site-header .custom-logo-link {
	display: inline-flex;
	align-items: center;
	min-height: 2.5rem;
}
.site-header .custom-logo {
	max-height: 48px; /* adjust as needed */
	width: auto;
	height: auto;
}

/* Footer logo sizing */
.site-footer .custom-logo-link,
.site-footer .custom-logo {
	display: inline-block;
}
.site-footer .custom-logo {
	max-width: 140px;
}

/* Mega menu layout (CSS-only, no Tailwind needed) */
.mega-menu {
	min-width: 260px;
	max-width: 760px;
	padding: 24px;
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 13px 35px -12px rgba(35, 35, 35, 0.15);
}
.mega-menu__columns {
	display: flex;
	gap: 32px;
	align-items: flex-start;
}
.mega-menu__columns--3 .mega-menu__col--wide {
	flex: 2;
}
.mega-menu__col {
	flex: 1;
}
.mega-menu__col--highlight {
	background: rgba(0, 0, 0, 0.03);
	border-radius: 14px;
	padding: 20px 22px;
}
.mega-menu__heading {
	margin: 0 0 8px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(0, 0, 0, 0.7);
}
.mega-menu__text {
	margin: 0 0 14px;
	font-size: 14px;
	color: rgba(0, 0, 0, 0.65);
}
.mega-menu__links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	grid-row-gap: 4px;
}
.mega-menu__links--two-col {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-column-gap: 8px;
}
.mega-menu__links a {
	display: block;
	padding: 6px 10px;
	border-radius: 999px;
	font-size: 14px;
	color: #000;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.mega-menu__links a:hover {
	background-color: rgba(27, 111, 88, 0.08);
	color: #1b6f58;
}

/* Reviews swiper: hide arrows on mobile (fallback if Tailwind not loaded) */
.reviews-section .reviews-arrow {
	display: none !important;
}
@media (min-width: 768px) {
	.reviews-section .reviews-arrow {
		display: flex !important;
	}
}

/* Blog swiper: hide arrows on mobile (fallback if Tailwind not loaded) */
.blog-section .blog-arrow {
	display: none !important;
}
@media (min-width: 768px) {
	.blog-section .blog-arrow {
		display: block !important;
	}
}
.mega-menu__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 6px;
}
.mega-menu__actions--stacked {
	flex-direction: column;
	align-items: stretch;
}
.mega-menu__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 8px 18px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	border: 2px solid transparent;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.mega-menu__btn--primary {
	background-color: #1b6f58;
	color: #fff;
	border-color: #1b6f58;
}
.mega-menu__btn--primary:hover {
	background-color: #155a47;
	border-color: #155a47;
}
.mega-menu__btn--secondary {
	background-color: #fff;
	color: #000;
	border-color: rgba(0, 0, 0, 0.08);
}
.mega-menu__btn--secondary:hover {
	background-color: rgba(0, 0, 0, 0.04);
	color: #1b6f58;
	border-color: rgba(0, 0, 0, 0.14);
}

/* Main header layout (independent of Tailwind build) */
.theme-main-menu .inner-content {
	max-width: 1320px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 1rem;
	padding-right: 1rem;
}
.main-menu-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}
.main-menu-logo {
	display: flex;
	align-items: center;
}
.main-menu-nav {
	flex: 1 1 auto;
	display: flex;
	justify-content: center;
}
.main-menu-nav > ul {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}
.main-menu-actions {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-left: auto;
}
@media (min-width: 1025px) {
	.main-menu-nav {
		justify-content: flex-start;
		margin-left: 3rem;
	}
}

/* (All Tailwind utility classes now come from output.css; no local duplicates here) */

/* Header layout tweaks so mega menu + nav align nicely */
.site-header .theme-main-menu .inner-content {
	max-width: 1320px;
	margin: 0 auto;
	padding-left: 1rem;
	padding-right: 1rem;
}
@media (min-width: 1025px) {
	.site-header nav[aria-label="Main navigation"] {
		margin-left: 3rem; /* override header:ml-[140px] which is too large */
	}
}

/*--------------------------------------------------------------
# WooCommerce overrides (scoped)
--------------------------------------------------------------*/
/*
WooCommerce ships a global rule:
.woocommerce img, .woocommerce-page img { height: auto; max-width: 100%; }

For our custom product gallery layout we control sizing with utility classes
(w-full, aspect-square, object-cover), so we scope-override the Woo rule
inside the gallery only.
*/
.woocommerce .single-product-gallery img,
.woocommerce-page .single-product-gallery img {
	max-width: none !important;
	height: auto !important;
}

/*--------------------------------------------------------------
# Packlim form submit spinner
--------------------------------------------------------------*/
.packlim-form-spinner {
	display: inline-block;
	width: 1rem;
	height: 1rem;
	margin-right: 0.5rem;
	vertical-align: middle;
	border: 2px solid currentColor;
	border-top-color: transparent;
	border-radius: 50%;
	animation: packlim-form-spin 0.7s linear infinite;
}
@keyframes packlim-form-spin {
	to {
		transform: rotate(360deg);
	}
}

/*--------------------------------------------------------------
# Layouts
--------------------------------------------------------------*/