/*
Theme Name: Iced Cookies
Theme URI: https://example.com/
Author: Steph
Description: One-page block theme for Iced Cookies by Steph: hero, My Story, Cookie Collections, contact form and footer. Every section is editable in the Site Editor.
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
Version: 1.1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: iced-cookies
*/

/* ---------- Page scaffolding ---------- */
html { scroll-behavior: smooth; }
.wp-site-blocks > * + * { margin-block-start: 0; }
.ic-main { margin-block: 0; }
.ic-main > * + * { margin-block-start: 0; }
[id] { scroll-margin-top: 90px; }
.wp-block-image img { display: block; }

/* ---------- Header ---------- */
.ic-site-header {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 50;
	background: var(--wp--preset--color--white);
	border-bottom: 1px solid var(--wp--preset--color--line);
}
.ic-header { padding-block: 12px; }
.ic-header-inner { gap: 16px; }
.ic-brand { gap: 10px !important; align-items: center; }
.ic-brand .ic-brand-logo { margin: 0; }
.ic-brand .ic-brand-logo img { width: 52px; height: 52px; object-fit: contain; }
.ic-brand-text > * + * { margin-block-start: 0; }
.ic-brand-name {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 900;
	font-size: 1.375rem;
	line-height: 1;
	color: var(--wp--preset--color--ink);
	letter-spacing: -0.01em;
}
.ic-brand-sub {
	font-size: 0.5625rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	line-height: 1;
	margin-top: 6px !important;
	color: var(--wp--preset--color--primary);
}
.ic-header-nav { gap: 28px; align-items: center; }
.ic-nav { font-size: 0.875rem; gap: 28px; }
.ic-nav a { color: var(--wp--preset--color--text); text-decoration: none; }
.ic-nav a:hover { color: var(--wp--preset--color--primary); }
.ic-order-button .wp-block-button__link { padding: 10px 20px; }
.ic-order-button .wp-block-button__link::before {
	content: "";
	display: inline-block;
	width: 15px;
	height: 15px;
	margin-right: 8px;
	vertical-align: -2px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.7 13.4a2 2 0 0 0 2 1.6h9.7a2 2 0 0 0 2-1.6L23 6H6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.7 13.4a2 2 0 0 0 2 1.6h9.7a2 2 0 0 0 2-1.6L23 6H6'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- Buttons ---------- */
.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--primary);
	border: 1.5px solid var(--wp--preset--color--primary);
	padding: 12px 25px;
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--wp--preset--color--peach);
}

/* ---------- Shared bits ---------- */
.ic-lead { font-size: 1.0625rem; }
.ic-icon { margin: 0; flex-shrink: 0; }
.ic-icon img { width: 44px; height: 44px; }
.ic-feature { gap: 16px !important; align-items: flex-start; }
.ic-feature-text > * + * { margin-block-start: 2px; }
.ic-feature-text h3 {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.4;
	margin: 0;
}
.ic-feature-text p { font-size: 0.875rem; color: var(--wp--preset--color--muted); }

/* ---------- Hero ---------- */
.ic-hero {
	background: linear-gradient(180deg, var(--wp--preset--color--cream) 0%, var(--wp--preset--color--white) 100%);
	padding-block: clamp(48px, 7vw, 80px);
}
.ic-hero-columns { gap: clamp(32px, 5vw, 64px); }
.ic-hero-title { line-height: 1.08; }
.ic-hero-title mark { display: block; }
.ic-hero-title em {
	font-family: var(--wp--preset--font-family--script);
	font-style: normal;
	font-weight: 600;
	font-size: 1.3em;
	line-height: 0.8;
	display: inline-block;
	transform: rotate(-6deg) translateY(4px);
	margin-left: 0.08em;
}
.ic-hero .ic-lead { margin-top: 22px; max-width: 30em; }
.ic-hero-buttons { margin-top: 30px; gap: 14px; }
.ic-hero-photo { margin: 0; }
.ic-hero-photo img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 22px;
	box-shadow: 0 24px 50px -18px rgba(120, 60, 10, 0.35);
}

/* ---------- My Story ---------- */
.ic-story {
	background: linear-gradient(180deg, var(--wp--preset--color--white) 0%, var(--wp--preset--color--cream) 100%);
	padding-block: 64px 96px;
}
.ic-story-columns { gap: clamp(32px, 5vw, 56px); }
.ic-story-photo { margin: 0; }
.ic-story-photo img {
	width: 100%;
	aspect-ratio: 534 / 863;
	object-fit: cover;
	border-radius: 22px;
	box-shadow: 0 20px 40px -18px rgba(40, 20, 0, 0.45);
}
.ic-story h2 { font-size: 2.125rem; margin-bottom: 4px; }
.ic-story strong { color: var(--wp--preset--color--primary); font-weight: 600; }
.ic-story .wp-block-column > p { max-width: 34em; }
.ic-features { gap: 22px; margin-top: 36px !important; }

/* ---------- Cookie Collections ---------- */
.ic-collections {
	background: linear-gradient(180deg, #FBF7EE 0%, var(--wp--preset--color--butter) 100%);
	padding-block: 88px 72px;
}
.ic-section-head { margin-bottom: 44px; }
.ic-section-head > * + * { margin-block-start: 14px; }
.ic-grid { gap: 32px; }
.ic-card {
	background: var(--wp--preset--color--white);
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 8px 24px -12px rgba(60, 40, 10, 0.25);
	gap: 0 !important;
	align-items: stretch !important;
	transition: transform 0.2s, box-shadow 0.2s;
}
.ic-card:hover { transform: translateY(-4px); box-shadow: 0 16px 32px -14px rgba(60, 40, 10, 0.35); }
.ic-card-photo { margin: 0; width: 100%; }
.ic-card-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.ic-card-body { padding: 22px 24px 24px; gap: 10px !important; flex: 1; align-items: stretch !important; }
.ic-card-top { gap: 12px; align-items: baseline !important; }
.ic-card-top h3 { font-family: var(--wp--preset--font-family--body); font-size: 1.0625rem; font-weight: 600; line-height: 1.3; margin: 0; }
.ic-price {
	font-weight: 700;
	font-size: 1.125rem;
	color: var(--wp--preset--color--primary);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.ic-card-desc { font-size: 0.875rem; color: var(--wp--preset--color--muted); flex: 1; }
.add-to-order { margin-top: 8px !important; }
.add-to-order .wp-block-button { width: 100%; }
.add-to-order .wp-block-button__link { display: block; width: 100%; text-align: center; padding: 12px; box-sizing: border-box; }
.ic-fine { font-size: 0.875rem; color: var(--wp--preset--color--muted); margin-top: 48px !important; }

/* ---------- Contact ---------- */
.ic-contact { padding-block: 88px 120px; }
.ic-contact-intro { margin-bottom: 64px; gap: 48px; }
.ic-contact-intro h2 { margin-bottom: 14px; }
.ic-contact-intro .ic-lead { max-width: 26em; }
.ic-badge img { width: 240px; max-width: 70vw; }
.ic-contact-body { gap: 48px; }
.ic-form-column > p:empty { display: none; }
.ic-info-title { font-family: var(--wp--preset--font-family--display); font-size: 1.5rem; margin-bottom: 26px; }
.ic-info { gap: 22px; }
.ic-info-label { font-weight: 500; color: var(--wp--preset--color--ink); }
.ic-info .ic-feature-text p:not(.ic-info-label) { font-size: 0.875rem; color: var(--wp--preset--color--muted); }
.ic-custom-orders {
	margin-top: 36px !important;
	background: var(--wp--preset--color--butter);
	border: 1px solid #F5E6C4;
	border-radius: 16px;
	padding: 24px;
}
.ic-custom-orders > * + * { margin-block-start: 8px; }
.ic-custom-orders .ic-info-label { font-weight: 600; }
.ic-custom-orders p:not(.ic-info-label) { font-size: 0.875rem; }

/* Contact form */
.ic-form { display: grid; gap: 22px; }
.ic-field label { display: block; font-size: 0.8125rem; font-weight: 500; color: var(--wp--preset--color--ink); margin-bottom: 8px; }
.ic-field input,
.ic-field textarea {
	width: 100%;
	box-sizing: border-box;
	font: 400 0.9375rem/1.5 var(--wp--preset--font-family--body);
	color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 10px;
	padding: 12px 16px;
}
.ic-field textarea { min-height: 150px; resize: vertical; }
.ic-field input::placeholder,
.ic-field textarea::placeholder { color: #A8A29E; }
.ic-field input:focus,
.ic-field textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 0 0 3px var(--wp--preset--color--peach);
}
.ic-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ic-submit { width: 100%; border: 0; cursor: pointer; padding: 15px !important; }
.ic-form-note { border-radius: 10px; padding: 12px 16px; font-size: 0.875rem; background: var(--wp--preset--color--peach); color: var(--wp--preset--color--primary-dark); }
.ic-form-note--yes { background: #DCFCE7; color: #166534; }

/* ---------- Footer ---------- */
.ic-footer {
	background: var(--wp--preset--color--navy);
	color: #CBD5E1;
	font-size: 0.875rem;
	padding-block: 56px 0;
}
.ic-footer-columns { gap: 40px; }
.ic-footer .ic-brand-name { color: var(--wp--preset--color--white); font-size: 1.125rem; }
.ic-footer .ic-brand-logo img { width: 44px; height: 44px; }
.ic-footer h4 {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--wp--preset--color--white);
	margin: 0 0 18px;
}
.ic-plain-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.ic-footer a { color: inherit; text-decoration: none; }
.ic-footer a:hover { color: var(--wp--preset--color--white); }
.ic-social { margin-top: 24px !important; gap: 12px; }
.ic-social .wp-social-link { background: var(--wp--preset--color--primary) !important; color: var(--wp--preset--color--white) !important; }
.ic-copyright {
	border-top: 1px solid #1F2937;
	margin-top: 36px !important;
	padding-block: 24px;
	font-size: 0.8125rem;
	color: #94A3B8;
}

/* ---------- About page ---------- */
.ic-about-content { margin-block: 0; }
.ic-about-content > * + * { margin-block-start: 0; }
.ic-about-hero {
	background: linear-gradient(180deg, var(--wp--preset--color--cream) 0%, var(--wp--preset--color--white) 100%);
	padding-block: clamp(48px, 7vw, 88px);
}
.ic-about-hero-columns { gap: clamp(40px, 6vw, 80px); }
.ic-about-photo-column { position: relative; }
.ic-about-photo { margin: 0; }
.ic-about-photo img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: 22px;
	border: 6px solid var(--wp--preset--color--white);
	box-shadow: 0 24px 50px -18px rgba(120, 60, 10, 0.35);
}
.ic-about-tag {
	position: absolute;
	right: -18px;
	bottom: -22px;
	gap: 12px !important;
	align-items: center;
	background: var(--wp--preset--color--white);
	border-radius: 14px;
	padding: 12px 18px 12px 12px;
	box-shadow: 0 12px 28px -10px rgba(60, 40, 10, 0.3);
	margin: 0 !important;
}
.ic-about-tag-logo { margin: 0; }
.ic-about-tag-logo img { width: 40px; height: 40px; }
.ic-about-tag-text > * + * { margin-block-start: 0; }
.ic-about-tag-title { font-weight: 600; font-size: 0.875rem; color: var(--wp--preset--color--ink); line-height: 1.3; }
.ic-about-tag-sub { font-size: 0.75rem; color: var(--wp--preset--color--muted); line-height: 1.3; }
.ic-pill {
	display: inline-block;
	background: var(--wp--preset--color--peach);
	color: var(--wp--preset--color--primary-dark);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	border-radius: 999px;
	padding: 6px 14px;
}
.ic-about-title { line-height: 1.1; margin-top: 18px !important; }
.ic-about-title mark { display: block; margin-top: 6px; }
.ic-hero-title mark,
.ic-about-title mark { background: transparent; color: var(--wp--preset--color--primary); }
.ic-about-hero .ic-lead { margin-top: 22px !important; max-width: 32em; }
.ic-signature {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: 28px !important;
	font-family: var(--wp--preset--font-family--script);
	font-weight: 600;
	font-size: 2.25rem;
	line-height: 1;
	color: var(--wp--preset--color--ink);
}
.ic-signature::before {
	content: "";
	width: 48px;
	height: 1.5px;
	background: var(--wp--preset--color--primary);
}

.ic-passion { padding-block: clamp(64px, 8vw, 104px); }
.ic-passion > * + * { margin-block-start: 1.25rem; }
.ic-passion .ic-passion-icon { margin-bottom: 4px; }
.ic-passion .ic-passion-icon img { width: 56px; height: 56px; }
.ic-passion h2 { margin-bottom: 1.25rem; }
.ic-passion p { font-size: 1.0625rem; line-height: 1.75; }

.ic-journey {
	background: linear-gradient(180deg, #FBF7EE 0%, var(--wp--preset--color--butter) 100%);
	padding-block: clamp(64px, 8vw, 96px);
}
.ic-journey-grid { grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)) !important; }
.ic-step {
	background: var(--wp--preset--color--white);
	border-radius: 16px;
	padding: 24px;
	box-shadow: 0 8px 24px -12px rgba(60, 40, 10, 0.25);
}
.ic-step > * + * { margin-block-start: 10px; }
.ic-step-top { align-items: center !important; margin-bottom: 14px; }
.ic-step-when {
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--wp--preset--color--primary);
	border: 1px solid var(--wp--preset--color--peach);
	border-radius: 999px;
	padding: 4px 12px;
	white-space: nowrap;
}
.ic-step h3 { font-size: 1.1875rem; margin: 0; }

.ic-cta {
	background: var(--wp--preset--color--peach);
	padding-block: clamp(64px, 8vw, 96px);
}
.ic-cta > * + * { margin-block-start: 16px; }
.ic-cta-buttons { margin-top: 32px !important; gap: 14px; }
.ic-cta .is-style-outline > .wp-block-button__link { background: var(--wp--preset--color--white); }

/* ---------- Other pages ---------- */
.ic-page { padding-block: 64px 96px; }

/* ---------- Small screens ---------- */
@media (max-width: 781px) {
	.ic-contact-intro { text-align: center; }
	.ic-contact-intro .ic-lead { margin-inline: auto; }
	.ic-story-photo img { aspect-ratio: 4 / 3; }
	.ic-about-photo-column { max-width: 460px; margin-inline: auto; width: 100%; }
	.ic-about-tag { right: 12px; }
}
@media (max-width: 600px) {
	.ic-brand-name { font-size: 1.1875rem; }
	.ic-header .ic-brand-logo img { width: 42px; height: 42px; }
	.ic-header-nav { gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.ic-card { transition: none; }
	.ic-card:hover { transform: none; }
}