/*
Theme Name: Ollie Child
Theme URI: https://olliewp.com
Description: A child theme for the Ollie WordPress block theme. Custom patterns, templates, and typography live here so they survive Ollie updates.
Author: Next.io
Template: ollie
Version: 1.0.5
Text Domain: ollie-child
*/

/* Add any custom CSS overrides below. Most styling for a block theme
   should go through theme.json (typography, color, spacing) rather
   than plain CSS, but this file is here if you need it. */

/* CSS Reset
---------------------------------------------------------------------------- */

#nav-3 {
    margin-block-start: 0 !important;
}

*,
*::before,
*::after {
	box-sizing: inherit;
}

html {
	box-sizing: border-box;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
}

b,
strong {
	font-weight: var(--wp--custom--font-weight--semi-bold);
}

ol,
ul {
	padding: 0;
}

ol:where(:not([class*="wp-block"])),
ol:where(.wp-block-list),
ul:where(:not([class*="wp-block"])),
ul:where(.wp-block-list) {
	padding-inline-start: var(--wp--preset--spacing--medium);
}

div[class*="wp-block-"] figcaption {
	color: var(--wp--preset--color--secondary);
	font-size: var(--wp--preset--font-size--x-small);
	margin-bottom: 0;
	margin-top: 20px;
	text-align: center;
}

img,
figure {
	max-width: 100%;
	height: auto;
}

/* Temporary fix for text-decoration-thickness in Firefox */
@-moz-document url-prefix() {
	a {
		text-decoration-thickness: .1rem !important;
	}
}

/* Standardize form styling
--------------------------------------------- */

input,
button,
textarea,
select {
	font: inherit;
}

input[type="button"],
input[type="email"],
input[type="search"],
input[type="submit"],
input[type="text"],
textarea {
	-webkit-appearance: none;
	appearance: none;
}

input:not([type="submit"]):not([type="radio"]),
select,
textarea,
.wp-block-post-comments-form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.wp-block-post-comments-form textarea {
	color: var(--wp--preset--color--main);
	border-radius: 5px;
	border: solid 1px color-mix(in srgb, var(--wp--preset--color--tertiary) 100%, var(--wp--preset--color--main) 20%);
	padding: .5em 1em;
	font-size: var(--wp--preset--font-size--small);
	background-color: #fff;
	box-shadow: 
		0 1px 2px rgba(0, 0, 0, 0.02),
		0 0.5px 1px rgba(0, 0, 0, 0.04);
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible {
	outline-color: var(--wp--preset--color--main);
	outline-offset: 1px;
}

input[type="checkbox"],
input[type="image"],
input[type="radio"] {
	width: auto;
}

select {
	-webkit-appearance: none;
	appearance: none;
	background: var(--wp--preset--color--base) url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXItY2hldnJvbi1kb3duIj48cG9seWxpbmUgcG9pbnRzPSI2IDkgMTIgMTUgMTggOSI+PC9wb2x5bGluZT48L3N2Zz4=) no-repeat;
    background-size: 16px;
    background-position: calc(100% - 12px) 50%;
	padding-right: 2.2em;
}

label {
	width: 100%;
	display: block;
}

::placeholder {
	color: var(--wp--preset--color--secondary);
	opacity: 0.75;
}

/* Helper styles
---------------------------------------------------------------------------- */

a.more-link {
	display: block;
}

/* Inline code */
*:not(.wp-block-code) > code {
	background-color: var(--wp--preset--color--tertiary);
	padding: 3px 5px;
	position: relative;
	border-radius: 3px;
}

.wp-block-categories {
	position: relative;
}

/* Remove margin on term description on archive pages */
.wp-block-term-description p:last-child {
	margin-bottom: 0;
}

/* Remove last separator on post list */
.remove-border-and-padding .wp-block-post-template li:last-child .wp-block-separator {
	display: none;
}

/* Hide post meta div if no tags assigned */
.single .wp-block-group:has(> .post-meta:empty) {
	display: none;
}

.wp-block-group:empty:has(+ .comment-respond) {
	display: none;
}

.row-logos > figure {
	flex-shrink: 1 !important;
}

/* Sticky header */

body:not(.wp-admin) header:has(>.is-position-sticky) {
	position: sticky;
	top: calc( 0px + var( --wp-admin--admin-bar--height, 0px ) );
	z-index: 100;
}

/* Account for admin bar on mobile */

@media (max-width: 600px) {
	header:has(>.is-position-sticky) {
		top: 0;
	}
}

/* Partial sticky header: when one row inside the header is sticky, dissolve
   the header wrappers so that row can stick on its own while rows above
   scroll away. Wrapper styling won't render while dissolved. */

body:not(.wp-admin) header.wp-block-template-part:has(> .wp-block-group > .is-position-sticky):not(:has(> .is-position-sticky)),
body:not(.wp-admin) header.wp-block-template-part:has(> .wp-block-group > .is-position-sticky):not(:has(> .is-position-sticky)) > .wp-block-group {
	display: contents;
}

/* Cancel alignfull negative margins — the dissolved wrapper's compensating
   padding no longer renders. */

body:not(.wp-admin) header.wp-block-template-part:has(> .wp-block-group > .is-position-sticky):not(:has(> .is-position-sticky)) > .wp-block-group > .alignfull {
	margin-left: 0;
	margin-right: 0;
}

body:not(.wp-admin) header.wp-block-template-part:has(> .wp-block-group > .is-position-sticky) .is-position-sticky {
	z-index: 100;
}

/* Mobile helper classes */

@media (max-width: 781px) {
	.ollie-hide-on-mobile {
		display: none;
	}

	.ollie-unstick-mobile {
		position: static;
	}

	header:has(>.ollie-unstick-mobile) {
		position: static;
	}
}

/* Table
--------------------------------------------- */

.wp-block-table table {
	background: var(--wp--preset--color--base);
	border-radius: 5px;
	border: solid 1px var(--wp--preset--color--border-light);
	font-size: var(--wp--preset--font-size--x-small);
}
.wp-block-table.is-style-stripes {
	border-bottom: none;
}

.wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
	background-color: var(--wp--preset--color--tertiary);
}

.wp-block-table td, 
.wp-block-table th,
.wp-block-table thead {
	border: none;
	border-bottom: solid 1px color-mix(in srgb, var(--wp--preset--color--border-light) 50%, var(--wp--preset--color--base) 5%);
}

.wp-block-table th,
.wp-block-table tfoot {
	text-align: left;
	background-color: color-mix(in srgb, var(--wp--preset--color--tertiary) 75%, var(--wp--preset--color--base) 5%);
}

.wp-block-table td, 
.wp-block-table th {
	padding: .8em 1em;
}

.wp-block-table tfoot {
	border-top: solid 1px var(--wp--preset--color--border-light);
}

.wp-block-table tfoot td {
	border-bottom: none;
}
/* =========================================================================
   NEXT.io LATAM – Ollie child theme overrides
   1) Numbered "Must Reads" list (add class `nx-numbered` to the Query Loop)
   2) Homepage horizontal-overflow fixes (phones / tablets)
   ========================================================================= */


/* -------------------------------------------------------------------------
   1) NUMBERED POST LIST  —  usage:
      Select the Query Loop block (or its Post Template) → Advanced →
      Additional CSS class(es) → nx-numbered
   Colours use the theme tokens, so they follow light AND dark mode
   (dark mode inverts <main> with the inverted token set, so
   --primary renders yellow in both themes).
   ------------------------------------------------------------------------- */

.nx-numbered .wp-block-post-template,
.wp-block-post-template.nx-numbered {
  counter-reset: nx-post;
}

.nx-numbered .wp-block-post-template > li,
.wp-block-post-template.nx-numbered > li {
  counter-increment: nx-post;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  column-gap: clamp(0.75rem, 0.5rem + 1vw, 1.25rem);
  align-items: start;
  min-width: 0;
}

/* top separator line spans the full card width */
.nx-numbered .wp-block-post-template > li > hr,
.wp-block-post-template.nx-numbered > li > hr {
  grid-column: 1 / -1;
  grid-row: 1;
  width: 100%;
}

/* the number: 01, 02, 03 … */
.nx-numbered .wp-block-post-template > li::before,
.wp-block-post-template.nx-numbered > li::before {
  content: counter(nx-post, decimal-leading-zero); /* use `decimal` for 1, 2, 3 */
  grid-column: 1;
  grid-row: 2;
  min-width: 2ch;
  padding-top: var(--wp--preset--spacing--small, 1rem);
  font-family: var(--wp--preset--font-family--inter, inherit);
  font-size: clamp(2rem, 1.55rem + 1.6vw, 3.25rem); /* ≈ 2× the title */
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--wp--preset--color--primary);
  -webkit-text-stroke: 0; /* no outline around the numbers */
  user-select: none;
}

/* post content sits to the right of the number */
.nx-numbered .wp-block-post-template > li > :not(hr),
.wp-block-post-template.nx-numbered > li > :not(hr) {
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
}

/* smartphones: slightly smaller number, tighter gap */
@media (max-width: 555px) {
  .nx-numbered .wp-block-post-template > li,
  .wp-block-post-template.nx-numbered > li {
    column-gap: 0.75rem;
  }
  .nx-numbered .wp-block-post-template > li::before,
  .wp-block-post-template.nx-numbered > li::before {
    font-size: 2.25rem;
  }
}


/* -------------------------------------------------------------------------
   2) OVERFLOW FIXES
   ------------------------------------------------------------------------- */

/* Your suggested breakpoints (kept), with minmax(0,1fr) instead of 1fr –
   plain 1fr can't shrink below its content and causes the blow-out. */
@media (max-width: 915px) {
  .ollie-grid-8 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 673px) {
  .ollie-grid-8 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
  .ollie-grid-8 > * { grid-column: span 1 !important; grid-row: span 1 !important; }
}

/* Same fix for EVERY Ollie grid (ollie-grid-N numbers are auto-generated
   and can change when blocks are reordered, so don't rely on them only). */
@media (max-width: 915px) {
  [class*="ollie-grid-"].is-layout-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 673px) {
  [class*="ollie-grid-"].is-layout-grid { grid-template-columns: minmax(0, 1fr) !important; }
  [class*="ollie-grid-"].is-layout-grid > * { grid-column: span 1 !important; grid-row: span 1 !important; }
}

.wp-block-post-template.is-layout-grid { min-width: 0; }
.wp-block-post-template.is-layout-grid > * { min-width: 0; }
.wp-block-post-template img { max-width: 100%; height: auto; }

/* Card meta rows (Category · Market / Author · read time) are "nowrap" –
   let them wrap and let long words/titles break. */
.wp-block-post-template .is-nowrap { flex-wrap: wrap; row-gap: 0.25em; }
.wp-block-post-template .is-nowrap > * { min-width: 0; }
.wp-block-post-template .wp-block-post-title { overflow-wrap: break-word; }

/* Vertical (stacked) groups: children may never be wider than the group.
   This is what let "Latest News" grow past the screen on phones. */
.wp-site-blocks .is-layout-flex.is-vertical > * {
  min-width: 0;
  max-width: 100%;
}

/* Phones: "No wrap" rows inside page content (section headers like
   "Latest News … View all", the BR/MX/CO/PE country pills,
   "Brazil + description" with a fixed 350px width) must wrap. */
@media (max-width: 673px) {
  .wp-site-blocks main .is-nowrap {
    flex-wrap: wrap;
    row-gap: 0.5rem;
  }
  .wp-site-blocks main .is-nowrap > * {
    min-width: 0;
    max-width: 100%;
  }
}

/* Safety net: never allow sideways page scroll on small screens */
@media (max-width: 915px) {
  html, body { overflow-x: clip; }
}

/* 1px bottom border on scrollspy bar */

.np-scrollspy-nav {
    border-bottom: 1px solid #414144;
    height: auto;
}

/* -------------------------------------------------------------------------
   3) KEEP A SECTION LIGHT IN DARK MODE  —  usage:
      Select the section's Group block → Advanced →
      Additional CSS class(es) → nx-keep-light
   ------------------------------------------------------------------------- */

html.nxdm-dark .wp-site-blocks > :not(header.wp-block-template-part, footer.wp-block-template-part) .nx-keep-light {
  filter: invert(1);

  /* light-theme colour tokens */
  --wp--preset--color--primary: #ffcf33;
  --wp--preset--color--primary-accent: #f2f0e9;
  --wp--preset--color--primary-alt: #e9d596;
  --wp--preset--color--primary-alt-accent: #453c21;
  --wp--preset--color--main: #222222;
  --wp--preset--color--main-accent: #ded9c9;
  --wp--preset--color--base: #ffffff;
  --wp--preset--color--secondary: #6d623b;
  --wp--preset--color--tertiary: #f8f8f7;
  --wp--preset--color--border-light: #e3e0d9;
  --wp--preset--color--border-dark: #665c3d;

  color: var(--wp--preset--color--main);
}

/* images, videos and embeds inside the section stay as they are */
html.nxdm-dark .wp-site-blocks > :not(header.wp-block-template-part, footer.wp-block-template-part) .nx-keep-light :is(img, picture, video, iframe, embed, object, [style*="background-image"], .wp-block-cover__image-background) {
  filter: none !important;
}