/* ============================================================= SPANISH IMMERSION CR — Custom CSS Customizer ->Custom CSS/JS (on the LIVE site) Cleaned version of the CSS that was on staging. What changed and why is noted against each block. ============================================================= *//* --- Remove the theme's inner padding,so our full-width sections reach the edges. Kept exactly as it was. --- */#content-wrap{padding-top:0 !important;padding-left:0 !important;padding-right:0 !important;padding-bottom:0 !important}.content-area{padding-top:0 !important;padding-left:0 !important;padding-right:0 !important;padding-bottom:0 !important}/* --- Breathing room for a few theme areas. Kept. --- */#enrollment_content,.oceanwp-toolbar,.oceanwp-row{padding-right:30px !important;padding-left:30px !important}/* --- The page title band (blog posts,archives,and any page where the title is left switched on). CHANGED:was #177b57,the old green. Now the forest green from the palette,and the marigold accent underneath. --- */.page-header,.header_bar_init h1{background-color:#1B4D3E !important;border-bottom:3px solid #E9A227 !important;font-family:"Fraunces",Georgia,serif !important;font-size:34px !important;color:#F4F8F2 !important;text-align:center !important;padding:26px 16px !important;margin-bottom:0 !important}/* --- REMOVED,and why ------------------------------------------- .page-id-86 #wrap{background-color:#efefef}.page-id-86 .sd-sharing-enabled{background-color:#efefef}86 is the Contact page's ID on STAGING. On live that number belongs to a different page,so these rules would colour the wrong thing. The new Contact page sets its own colours anyway. .sd-sharing div,.sd-title{padding-left:75px}Spacing for the Jetpack share buttons,which are now switched off on pages. Harmless,but no longer doing anything. .woocommerce{padding ...}.product{padding ...}The shop is being retired. Add back only if you keep it. ----------------------------------------------------------------- *//* ============================================================= SPANISH IMMERSION CR — BLOG STYLING ADD THIS TO THE END of Customizer ->Custom CSS/JS. Do not delete what is already there — paste this underneath it. Styles two things:1. The blog listing page (/blog/) 2. Each individual post (e.g. /costa-rican-spanish-expressions/) Both are generated by WordPress,so they cannot be built as an HTML block like the other pages. CSS is the way in — and the upside is that every future post gets this look automatically,with nothing for you to paste. Palette,same as the rest of the site:ink #0E241E · forest #1B4D3E · mist #C9DDD3 · mist-pale #E7EFE9 paper #FBFCF8 · marigold #E9A227 · marigold-deep #B87A0E ============================================================= *//* ---------- 1. THE LISTING PAGE ---------------------------- *//* Give the list of posts a sensible width and some air. Without this the posts run edge to edge,because we stripped the theme's padding out for the full-width custom pages. */.blog .content-area,.archive .content-area,.single-post .content-area{padding:56px 24px 72px !important;max-width:1140px;margin:0 auto}/* Each post in the list becomes a card,like the cards elsewhere on the site:paper background,hairline border,square corners. */.blog .blog-entry.post,.archive .blog-entry.post{background:#FBFCF8;border:1px solid rgba(14,36,30,.14);border-radius:3px;padding:clamp(22px,2.6vw,32px);margin-bottom:26px;transition:border-color .18s ease,box-shadow .18s ease}.blog .blog-entry.post:hover,.archive .blog-entry.post:hover{border-color:#C9DDD3;box-shadow:0 2px 14px rgba(14,36,30,.06)}/* Post titles in Fraunces,like every other heading on the site. */.blog .blog-entry .entry-title,.archive .blog-entry .entry-title{font-family:"Fraunces",Georgia,serif !important;font-weight:600 !important;font-size:21px !important;line-height:1.2 !important;letter-spacing:-.3px;margin:0 0 12px !important;/* make sure nothing can sit on top of the heading */position:relative;z-index:2}.blog .blog-entry .entry-title a,.archive .blog-entry .entry-title a{color:#0E241E !important;text-decoration:none !important;border-bottom:0 !important}.blog .blog-entry .entry-title a:hover,.archive .blog-entry .entry-title a:hover{color:#1B4D3E !important}/* The date/author line:small,quiet,monospaced. Deliberately understated — with a handful of posts a year,the dates should not be the loudest thing on the page. */.blog .blog-entry .blog-entry-meta,.archive .blog-entry .blog-entry-meta,.blog .blog-entry .meta,.archive .blog-entry .meta{font-family:"IBM Plex Mono",ui-monospace,monospace !important;font-size:11.5px !important;letter-spacing:.6px;text-transform:uppercase;color:rgba(14,36,30,.5) !important;margin:0 0 14px !important}.blog .blog-entry .meta a,.archive .blog-entry .meta a{color:rgba(14,36,30,.5) !important}/* The excerpt. */.blog .blog-entry .blog-entry-summary,.archive .blog-entry .blog-entry-summary,.blog .blog-entry .entry-summary,.archive .blog-entry .entry-summary{font-family:"Instrument Sans",-apple-system,system-ui,sans-serif !important;font-size:16px !important;line-height:1.6 !important;color:rgba(14,36,30,.74) !important}/* "Read more" as a quiet marigold link,not a heavy button. */.blog .blog-entry-readmore a,.archive .blog-entry-readmore a,.blog .blog-entry .more-link,.archive .blog-entry .more-link{display:inline-block;font-family:"Instrument Sans",sans-serif !important;font-size:15px !important;font-weight:500 !important;color:#B87A0E !important;background:none !important;border:0 !important;border-bottom:1px solid #E9A227 !important;border-radius:0 !important;padding:0 0 2px !important;margin-top:14px}.blog .blog-entry-readmore a:hover,.archive .blog-entry-readmore a:hover{color:#0E241E !important;border-bottom-color:#0E241E !important}/* Featured images. NOTE:in OceanWP's grid layout the image sits AFTER the title in the markup,so it must NOT be pulled upwards - doing that drags it over the heading. Plain margins only. */.blog .blog-entry .thumbnail,.archive .blog-entry .thumbnail{margin:0 0 20px !important;border-radius:3px;overflow:hidden;display:block}.blog .blog-entry .thumbnail img,.archive .blog-entry .thumbnail img{width:100% !important;height:100% !important;aspect-ratio:16/10;object-fit:cover;display:block;border-radius:3px}/* Cards in a row should be the same height,with the "Continue reading" link settling at the bottom instead of floating mid-card. */.blog .blog-entry.post,.archive .blog-entry.post{display:flex;flex-direction:column;height:100%}/* Move the image to the TOP of the card. OceanWP puts it after the title,so with titles of different lengths the images in a row start at different heights and the grid looks ragged. Because the card is a flex column,order:-1 lifts the image above the title without touching the HTML - and unlike a negative margin it cannot overlap anything. */.blog .blog-entry .thumbnail,.archive .blog-entry .thumbnail{order:-1}.blog .blog-entry .blog-entry-summary,.archive .blog-entry .blog-entry-summary{flex:1 1 auto}/* ---------- 2. AN INDIVIDUAL POST -------------------------- *//* A comfortable reading column. Long lines are the single most common reason people give up on an article. */.single-post .entry-content,.single-post .entry-header,.single-post .entry-title{max-width:68ch;margin-left:auto;margin-right:auto}.single-post .entry-title{font-family:"Fraunces",Georgia,serif !important;font-weight:600 !important;font-size:clamp(30px,4vw,44px) !important;line-height:1.08 !important;letter-spacing:-.6px;color:#0E241E !important;margin-bottom:14px !important}.single-post .entry-content{font-family:"Instrument Sans",-apple-system,system-ui,sans-serif !important;font-size:18px !important;line-height:1.72 !important;color:#0E241E !important}.single-post .entry-content p{margin:0 0 1.15em !important}.single-post .entry-content h2,.single-post .entry-content h3{font-family:"Fraunces",Georgia,serif !important;font-weight:600 !important;color:#0E241E !important;line-height:1.15 !important;margin:1.8em 0 .5em !important}.single-post .entry-content h2{font-size:28px !important}.single-post .entry-content h3{font-size:21px !important}.single-post .entry-content a{color:#1B4D3E !important;border-bottom:1px solid #C9DDD3;text-decoration:none !important}.single-post .entry-content a:hover{border-bottom-color:#E9A227}.single-post .entry-content img{border-radius:3px;height:auto}/* Pull quotes get the marigold rule used elsewhere on the site. */.single-post .entry-content blockquote{border-left:3px solid #E9A227 !important;background:#E7EFE9;border-radius:3px;margin:1.6em 0 !important;padding:20px 24px !important;font-size:17px !important;color:rgba(14,36,30,.82) !important}/* The byline under the title. */.single-post .entry-meta,.single-post .meta{font-family:"IBM Plex Mono",ui-monospace,monospace !important;font-size:11.5px !important;letter-spacing:.6px;text-transform:uppercase;color:rgba(14,36,30,.5) !important;margin-bottom:30px !important}/* ---------- 3. PAGINATION ---------------------------------- */.blog .page-numbers,.archive .page-numbers{font-family:"IBM Plex Mono",monospace !important;font-size:13px !important;border:1px solid #C9DDD3 !important;background:#FBFCF8 !important;color:#1B4D3E !important;border-radius:2px !important}.blog .page-numbers.current,.archive .page-numbers.current{background:#E9A227 !important;border-color:#E9A227 !important;color:#0E241E !important}/* ---------- 4. PHONE --------------------------------------- */@media (max-width:782px){.blog .content-area,.archive .content-area,.single-post .content-area{padding:36px 16px 56px !important}.blog .blog-entry .entry-title,.archive .blog-entry .entry-title{font-size:20px !important}.single-post .entry-content{font-size:17px !important}}