/* ================================================================ Single post page CSS Scoped under body.ac-single-page to beat Soledad's specificity. Injected into via wp_head in single.php. ================================================================ */ /* ── Page layout ─────────────────────────────────── */ body.single .ac-single { padding-bottom: var(--space-12) !important; } body.single .ac-single__page { max-width: 780px !important; margin-inline: auto !important; padding-inline: var(--gutter) !important; padding-top: var(--space-2) !important; float: none !important; width: 100% !important; } /* Kill Soledad's container/sidebar wrappers on single */ body.single .penci-single-wrapper, body.single .penci-single-block, body.single .container-single, body.single #main, body.single .theiaStickySidebar { all: unset !important; display: block !important; } /* ── Breadcrumb ───────────────────────────────────── */ body.single .ac-single__page .ac-breadcrumb { background: transparent !important; border: none !important; padding-inline: 0 !important; padding-block: var(--space-4) var(--space-2) !important; } body.single .ac-single__page .ac-breadcrumb__inner { padding: 0 !important; } /* ── Post header ──────────────────────────────────── */ body.single .ac-single__header { padding-bottom: var(--space-6) !important; border-bottom: 1px solid var(--color-border) !important; margin-bottom: var(--space-6) !important; } body.single .ac-single__title { font-family: var(--font-display) !important; font-size: clamp(1.75rem, 4vw, 2.5rem) !important; font-weight: 800 !important; color: var(--color-ink) !important; line-height: 1.15 !important; margin-bottom: var(--space-4) !important; } body.single .ac-single__meta { display: flex !important; align-items: center !important; gap: var(--space-3) !important; font-family: var(--font-ui) !important; font-size: var(--text-sm) !important; color: var(--color-muted) !important; flex-wrap: wrap !important; } body.single .ac-single__meta-author a { color: var(--color-red) !important; font-weight: 600 !important; text-decoration: none !important; } body.single .ac-single__meta-sep { color: var(--color-border) !important; } /* ── Featured image ───────────────────────────────── */ body.single .ac-single__featured-image { margin-bottom: var(--space-8) !important; display: block !important; } body.single .ac-single__featured-image img { width: 100% !important; aspect-ratio: 16 / 9 !important; object-fit: cover !important; display: block !important; border-radius: var(--radius-lg) !important; height: auto !important; max-width: 100% !important; } /* ── WPRM Jump to Recipe ──────────────────────────── */ .wprm-jump-to-recipe-shortcode, .wprm-jump-to-recipe-shortcode:visited, .wprm-jump-to-recipe-container a, a.wprm-jump-to-recipe { display: inline-flex !important; align-items: center !important; gap: var(--space-2) !important; font-family: var(--font-ui) !important; font-size: var(--text-sm) !important; font-weight: 700 !important; color: var(--color-white) !important; background: var(--color-red) !important; border: none !important; border-radius: var(--radius-full) !important; padding: var(--space-2) var(--space-5) !important; text-decoration: none !important; cursor: pointer !important; margin-bottom: var(--space-6) !important; } .wprm-jump-to-recipe-shortcode:hover { background: var(--color-red-dark) !important; color: var(--color-white) !important; } /* ── Body typography ──────────────────────────────── */ body.single .post-entry { font-family: var(--font-body) !important; font-size: var(--text-md) !important; line-height: var(--leading-relaxed) !important; color: var(--color-body) !important; } body.single .post-entry p { margin-bottom: var(--space-5) !important; font-size: var(--text-md) !important; line-height: var(--leading-relaxed) !important; } body.single .post-entry h2 { font-family: var(--font-display) !important; font-size: var(--text-2xl) !important; font-weight: 700 !important; color: var(--color-ink) !important; margin-top: var(--space-10) !important; margin-bottom: var(--space-4) !important; } body.single .post-entry h3 { font-family: var(--font-display) !important; font-size: var(--text-xl) !important; font-weight: 700 !important; color: var(--color-ink) !important; margin-top: var(--space-8) !important; margin-bottom: var(--space-3) !important; } body.single .post-entry ul { padding-left: var(--space-6) !important; margin-bottom: var(--space-5) !important; } body.single .post-entry ul li { list-style: square !important; font-size: var(--text-md) !important; line-height: var(--leading-relaxed) !important; margin-bottom: var(--space-2) !important; } body.single .post-entry ol { padding-left: var(--space-6) !important; margin-bottom: var(--space-5) !important; } body.single .post-entry ol li { list-style: decimal !important; font-size: var(--text-md) !important; line-height: var(--leading-relaxed) !important; margin-bottom: var(--space-3) !important; } body.single .post-entry img { width: 100% !important; height: auto !important; border-radius: var(--radius-md) !important; margin-block: var(--space-6) !important; display: block !important; } body.single .post-entry a { color: var(--color-red) !important; text-decoration: none !important; } body.single .post-entry blockquote { border-left: 4px solid var(--color-red) !important; margin-inline: 0 !important; padding: var(--space-4) var(--space-6) !important; background: var(--color-bg-alt) !important; border-radius: 0 var(--radius-md) var(--radius-md) 0 !important; font-style: italic !important; color: var(--color-muted) !important; margin-bottom: var(--space-5) !important; } /* ── Old recipe styling ───────────────────────────── */ body.single .ac-single__old-wrap { background: var(--color-white) !important; border: 2px solid var(--color-border) !important; border-radius: var(--radius-lg) !important; padding: var(--space-8) !important; margin-block: var(--space-4) var(--space-10) !important; box-shadow: var(--shadow-md) !important; } .old-recipe-content p:has(> strong:first-child:last-child), .old-recipe-content p:has(> b:first-child:last-child) { font-family: var(--font-display) !important; font-size: var(--text-xl) !important; font-weight: 700 !important; color: var(--color-ink) !important; margin-top: var(--space-8) !important; margin-bottom: var(--space-3) !important; padding-bottom: var(--space-2) !important; border-bottom: 2px solid var(--color-border) !important; } .old-recipe-content ol { padding-left: 0 !important; counter-reset: old-step !important; list-style: none !important; } .old-recipe-content ol li { counter-increment: old-step !important; position: relative !important; padding: var(--space-3) var(--space-3) var(--space-3) 3rem !important; border-bottom: 1px solid var(--color-border) !important; } .old-recipe-content ol li::before { content: counter(old-step) !important; position: absolute !important; left: 0 !important; top: var(--space-3) !important; width: 26px !important; height: 26px !important; background: var(--color-red) !important; color: #fff !important; border-radius: 50% !important; font-family: var(--font-ui) !important; font-size: var(--text-xs) !important; font-weight: 700 !important; display: flex !important; align-items: center !important; justify-content: center !important; } /* ── Newsletter ───────────────────────────────────── */ body.single .ac-single__newsletter { background: var(--color-red-light) !important; border: 1px solid rgba(200,49,42,.15) !important; border-radius: var(--radius-lg) !important; padding: var(--space-8) var(--space-10) !important; margin-block: var(--space-10) !important; text-align: center !important; clear: both !important; } body.single .ac-single__newsletter h3 { font-family: var(--font-display) !important; font-size: var(--text-xl) !important; font-weight: 700 !important; color: var(--color-ink) !important; margin-bottom: var(--space-2) !important; } body.single .ac-single__newsletter > p { font-family: var(--font-ui) !important; font-size: var(--text-sm) !important; color: var(--color-muted) !important; margin-bottom: var(--space-5) !important; } /* FluentForm inside newsletter — center the form elements */ body.single .ac-single__newsletter .ff-el-group { margin-bottom: var(--space-3) !important; text-align: left !important; max-width: 420px !important; margin-inline: auto !important; } body.single .ac-single__newsletter .ff-el-input--label label { font-family: var(--font-ui) !important; font-size: var(--text-sm) !important; font-weight: 600 !important; color: var(--color-ink) !important; } body.single .ac-single__newsletter .ff-el-form-control { width: 100% !important; padding: var(--space-3) var(--space-4) !important; border: 1.5px solid var(--color-border) !important; border-radius: var(--radius-md) !important; font-family: var(--font-ui) !important; font-size: var(--text-sm) !important; background: var(--color-white) !important; color: var(--color-ink) !important; } body.single .ac-single__newsletter .ff-el-form-control:focus { border-color: var(--color-red) !important; outline: none !important; } body.single .ac-single__newsletter .ff_submit_btn_container { text-align: center !important; } body.single .ac-single__newsletter .ff_submit_btn_container .ff-btn, body.single .ac-single__newsletter .ff_submit_btn_container button { padding: var(--space-3) var(--space-8) !important; background: var(--color-red) !important; color: #fff !important; font-family: var(--font-ui) !important; font-weight: 700 !important; font-size: var(--text-sm) !important; border: none !important; border-radius: var(--radius-full) !important; cursor: pointer !important; letter-spacing: .04em !important; text-transform: uppercase !important; } body.single .ac-single__newsletter .ff_submit_btn_container .ff-btn:hover, body.single .ac-single__newsletter .ff_submit_btn_container button:hover { background: var(--color-red-dark) !important; } /* ── Author bio ───────────────────────────────────── */ body.single .ac-single__author-bio { display: flex !important; gap: var(--space-5) !important; align-items: flex-start !important; padding: var(--space-6) !important; background: var(--color-bg-alt) !important; border-radius: var(--radius-lg) !important; margin-block: var(--space-8) !important; border: 1px solid var(--color-border) !important; } body.single .ac-single__author-bio .ac-single__author-avatar { width: 64px !important; height: 64px !important; min-width: 64px !important; border-radius: 50% !important; flex-shrink: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; background: #c8312a !important; color: #ffffff !important; font-family: 'Playfair Display', Georgia, serif !important; font-size: 1.625rem !important; font-weight: 700 !important; line-height: 1 !important; overflow: hidden !important; position: relative !important; } /* Hide gravatar img if WordPress/Soledad injects one */ body.single .ac-single__author-bio .ac-single__author-avatar img { position: absolute !important; opacity: 0 !important; width: 0 !important; height: 0 !important; pointer-events: none !important; } body.single .ac-single__author-name { font-family: var(--font-display) !important; font-size: var(--text-lg) !important; font-weight: 700 !important; color: var(--color-ink) !important; margin-bottom: var(--space-2) !important; } body.single .ac-single__author-desc { font-size: var(--text-sm) !important; color: var(--color-muted) !important; line-height: var(--leading-relaxed) !important; margin-bottom: 0 !important; } /* ── Related section ──────────────────────────────── */ .ac-related { background: var(--color-bg-alt) !important; border-top: 1px solid var(--color-border) !important; padding-block: var(--space-12) !important; margin-top: var(--space-10) !important; clear: both !important; } .ac-related__inner { max-width: 1100px !important; margin-inline: auto !important; padding-inline: var(--gutter) !important; } .ac-related__title { font-family: var(--font-display) !important; font-size: var(--text-xl) !important; font-weight: 700 !important; color: var(--color-ink) !important; text-align: center !important; margin-bottom: var(--space-8) !important; } .ac-related__grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: var(--space-6) !important; } .ac-related-card { display: block !important; text-decoration: none !important; border-radius: var(--radius-lg) !important; overflow: hidden !important; background: var(--color-white) !important; border: 1px solid var(--color-border) !important; } .ac-related-card__img-wrap { aspect-ratio: 4 / 3 !important; overflow: hidden !important; background: var(--color-bg-alt) !important; /* Explicit height fallback for browsers/contexts where aspect-ratio doesn't establish height on its own (fixes empty placeholder on desktop) */ min-height: 180px !important; position: relative !important; } .ac-related-card__img-wrap img { width: 100% !important; height: 100% !important; object-fit: cover !important; } .ac-related-card__title { font-family: var(--font-display) !important; font-size: var(--text-base) !important; font-weight: 700 !important; color: var(--color-ink) !important; padding: var(--space-4) !important; line-height: var(--leading-snug) !important; text-align: center !important; } /* ── Video / iframe responsive wrapper ───────────── */ body.single .post-entry iframe, body.single .post-entry embed, body.single .post-entry object { max-width: 100% !important; width: 100% !important; } /* Responsive video wrapper — WPRM outputs video in .wprm-recipe-video-container */ body.single .wprm-recipe-video-container, body.single .wprm-recipe-video, body.single .video-container { position: relative !important; width: 100% !important; padding-bottom: 56.25% !important; /* 16:9 */ height: 0 !important; overflow: hidden !important; margin-block: 1.5rem !important; } body.single .wprm-recipe-video-container iframe, body.single .wprm-recipe-video iframe, body.single .video-container iframe { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; border: none !important; } /* ── Responsive ──────────────────────────────────── */ @media (max-width: 640px) { body.single .ac-single__old-wrap { padding: var(--space-5) !important; } body.single .ac-single__newsletter { padding: var(--space-5) !important; } body.single .ac-single__author-bio { flex-direction: column !important; } .ac-related__grid { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 400px) { .ac-related__grid { grid-template-columns: 1fr !important; } } /* ================================================================ SOLEDAD CONTAINER RESET — single post page Soledad wraps content in .penci-single-wrapper > .penci-single-block > .container-single > #main > .theiaStickySidebar. These interfere with our narrow 780px column layout. Reset them all. ================================================================ */ body.single .penci-single-wrapper { max-width: none !important; width: 100% !important; margin: 0 !important; padding: 0 !important; float: none !important; background: none !important; } body.single .penci-single-block { max-width: none !important; width: 100% !important; margin: 0 !important; padding: 0 !important; float: none !important; } body.single .container-single, body.single .container.container-single { max-width: none !important; width: 100% !important; padding: 0 !important; margin: 0 !important; display: block !important; float: none !important; } body.single #main { width: 100% !important; max-width: none !important; float: none !important; padding: 0 !important; margin: 0 !important; } body.single .theiaStickySidebar { width: 100% !important; float: none !important; padding: 0 !important; transform: none !important; position: static !important; } /* Hide Soledad sidebar on single posts — we have no sidebar */ body.single .penci-layout-sidebar, body.single #sidebar, body.single .penci-single-sidebar { display: none !important; } /* Soledad breadcrumb — hide theirs, show ours */ body.single .penci-breadcrumb.single-breadcrumb { display: none !important; } /* Soledad post header elements — hide theirs */ body.single .penci-post-header, body.single .entry-header.penci-post-header { display: none !important; } /* Soledad related posts section — hide theirs, show ours */ body.single .penci-related-posts, body.single .penci-related-posts-wrap { display: none !important; } /* Soledad author box — hide theirs, show ours */ body.single .penci-author-box, body.single .author-box-wrap, body.single .penci-author-wrap, body.single .author-info, body.single .post-author, body.single .entry-author { display: none !important; } /* Soledad social share — hide */ body.single .penci-post-socialshare, body.single .penci-post-prev-next { display: none !important; } /* Soledad comments wrapper — keep but reset padding */ body.single #comments { padding: 0 !important; max-width: 780px !important; margin-inline: auto !important; padding-inline: var(--gutter) !important; }