/* ============================================================= 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}}/* ============================================================= SPANISH IMMERSION CR — BREVO FORM:DATE PICKER + CHECKBOX FIX Version 2 — 2026-09-29 PASTE THIS AT THE BOTTOM OF:WordPress → Appearance → Customize → Additional CSS IF YOU ALREADY PASTED VERSION 1:delete that whole block first,then paste this one. Version 1 did nothing. WHY VERSION 1 FAILED — worth recording:Every rule was written as "#sicr-bform .flatpickr-...",i.e. "the calendar INSIDE the form". But the calendar is not inside the form. Brevo's date picker attaches the calendar to the very bottom of the page,outside the form entirely,so it can float above everything. Scoping the rules to the form meant none of them ever matched. The calendar rules below are therefore unscoped. That is safe here:this calendar is the only one on the whole site. WHAT IS ACTUALLY BROKEN:The calendar has a small month dropdown inside it. The theme was forcing every <select>on the page to a tall form-field height,which makes a browser render a dropdown as an expanded scrolling list instead. That tall white column with the blue stripe sitting on top of the dates IS the month dropdown,stretched open. ============================================================= *//* ---------- 1. THE CALENDAR (NOT scoped to the form) ---------- */.flatpickr-calendar{width:auto !important;background:#FFFFFF !important;border:1px solid rgba(14,36,30,.18) !important;border-radius:4px !important;box-shadow:0 8px 28px rgba(14,36,30,.18) !important;padding:0 !important;overflow:visible !important;z-index:99999 !important;font-family:"Instrument Sans",-apple-system,system-ui,sans-serif !important}/* --- THE ACTUAL BUG:the month dropdown rendered as a list --- */.flatpickr-calendar select,.flatpickr-monthDropdown-months,select.flatpickr-monthDropdown-months{-webkit-appearance:menulist !important;-moz-appearance:menulist !important;appearance:menulist !important;display:inline-block !important;position:static !important;float:none !important;width:auto !important;min-width:0 !important;max-width:none !important;height:26px !important;min-height:0 !important;max-height:26px !important;padding:0 2px !important;margin:0 !important;border:0 !important;border-radius:0 !important;outline:none !important;background:transparent !important;background-image:none !important;box-shadow:none !important;overflow:hidden !important;vertical-align:middle !important;font-family:inherit !important;font-size:15px !important;font-weight:600 !important;line-height:26px !important;color:#0E241E !important}.flatpickr-monthDropdown-months .flatpickr-monthDropdown-month{background:#FFFFFF !important;color:#0E241E !important;padding:2px !important}/* header row:arrows + month + year */.flatpickr-months{display:flex !important;align-items:center !important;height:auto !important;padding:8px 4px !important;background:transparent !important}.flatpickr-month{height:32px !important;background:transparent !important;color:#0E241E !important;overflow:visible !important}.flatpickr-current-month{display:flex !important;align-items:center !important;justify-content:center !important;gap:6px !important;position:static !important;width:100% !important;height:32px !important;padding:0 !important;font-size:15px !important;font-weight:600 !important;line-height:32px !important;color:#0E241E !important}/* the year box */.flatpickr-calendar .numInputWrapper{width:56px !important;height:26px !important;display:inline-flex !important;align-items:center !important;background:transparent !important}.flatpickr-calendar input,.flatpickr-calendar input.numInput,.flatpickr-calendar input.cur-year{display:inline-block !important;width:100% !important;height:26px !important;min-height:0 !important;max-height:26px !important;padding:0 !important;margin:0 !important;border:0 !important;border-radius:0 !important;background:transparent !important;box-shadow:none !important;font-family:inherit !important;font-size:15px !important;font-weight:600 !important;line-height:26px !important;color:#0E241E !important;text-align:left !important}.flatpickr-calendar .numInputWrapper span{width:12px !important;border:0 !important;background:transparent !important}.flatpickr-calendar .numInputWrapper span:after{border-width:3px !important}/* previous / next month arrows */.flatpickr-prev-month,.flatpickr-next-month{padding:7px 10px !important;height:32px !important;fill:#1B4D3E !important}.flatpickr-prev-month svg,.flatpickr-next-month svg{width:13px !important;height:13px !important;fill:#1B4D3E !important}/* weekday header row */.flatpickr-weekdays{height:26px !important;background:transparent !important}span.flatpickr-weekday{font-family:inherit !important;font-size:11.5px !important;font-weight:600 !important;letter-spacing:.04em !important;color:rgba(14,36,30,.5) !important;background:transparent !important}/* the grid of days */.flatpickr-days,.flatpickr-calendar .dayContainer{width:307.875px !important;min-width:307.875px !important;max-width:307.875px !important}.flatpickr-day{font-family:inherit !important;font-size:14px !important;height:38px !important;line-height:38px !important;max-width:39px !important;border-radius:3px !important;color:#0E241E !important}.flatpickr-day:hover{background:#E7EFE9 !important;border-color:#E7EFE9 !important}.flatpickr-day.today{border-color:#1B4D3E !important}.flatpickr-day.selected,.flatpickr-day.selected:hover{background:#E9A227 !important;border-color:#E9A227 !important;color:#0E241E !important;font-weight:600 !important}.flatpickr-day.prevMonthDay,.flatpickr-day.nextMonthDay,.flatpickr-day.flatpickr-disabled{color:rgba(14,36,30,.28) !important}/* ---------- 2. THE CONSENT CHECKBOX OVERLAP ---------- These ones DO stay scoped — the checkbox really is inside the form. */#sicr-bform .sib-optin label,#sicr-bform .sib-optin .entry__choice label{display:flex !important;align-items:flex-start !important;gap:11px !important;cursor:pointer !important;font-family:"Instrument Sans",-apple-system,system-ui,sans-serif !important;font-size:15px !important;line-height:1.45 !important;color:rgba(14,36,30,.8) !important}#sicr-bform .sib-optin label p,#sicr-bform .sib-optin label span:not(.checkbox){margin:0 !important;line-height:1.45 !important}#sicr-bform .sib-optin .checkbox{position:relative !important;float:none !important;flex:0 0 18px !important;margin:2px 0 0 0 !important}