/*
Theme Name:     Kadence CCGI Resource Hub
Theme URI:      n/a
Template:       kadence
Author:         KWALL
Author URI:     https://www.kwallcompany.com
Description:    Enhanced by KWALL
Version:        1.0
License:        GNU General Public License v3.0 (or later)
License URI:    https://www.gnu.org/licenses/gpl-3.0.html
*/



:root {
  --accorbis-font-family-primary: 'Lato', sans-serif;
  --accorbis-font-family-heading: 'Manuale', serif;
  --accorbis-font-family-accent: 'Roboto', sans-serif;

  --accorbis-color-primary-1: #002F63; /* Palette 7 */
  --accorbis-color-primary-2: #5FAAF2; /* Palette 2 */
  --accorbis-color-primary-3: #E7AF5B; /* Palette 1 */

  --accorbis-color-secondary-1: #00234A; /* Palette 8 */
  --accorbis-color-secondary-2: #60B48A;
  --accorbis-color-secondary-3: #D63D3D;
  --accorbis-color-secondary-4: #704087;
  --accorbis-color-secondary-5: #B94890;
  --accorbis-color-secondary-6: #905341;
  --accorbis-color-secondary-7: #D98042;

  --accorbis-color-neutral-1: #231F20;
  --accorbis-color-neutral-2: #B2C2D0; /* Palette 6 */
  --accorbis-color-neutral-3: #616C75; /* Palette 5 */
  --accorbis-color-neutral-4: #F4F6F8;
  --accorbis-color-off-white: #FEFDFA; /* Palette 3 */

  --accorbis-color-black: #000000; /* Palette 4 */
  --accorbis-color-white: #FFFFFF; /* Palette 9 */
}

/*
 * Site-wide decoration-mark.png watermark: applied to "#inner-wrap" (the
 * parent Kadence theme's own universal wrapper spanning from right after
 * the header down to right before the footer — includes both the Page
 * Hero and #main), rather than "#main > div" alone. #main's own box ends
 * well above the actual bottom of the page's white area (there's ~180px of
 * trailing space that belongs to #inner-wrap, not #main), so a
 * bottom-right background on #main > div landed visibly short of the true
 * bottom-right corner. #inner-wrap's bottom edge is confirmed flush with
 * .site-footer's top, so this is the correct anchor for true bottom-right.
 * This is still pure CSS — #inner-wrap is core theme markup on every page,
 * not something either child theme templates itself.
 *
 * Anchored bottom-right at the asset's natural 542x475 size, hidden below
 * this theme's existing max-width:1024px tablet/mobile breakpoint (matching
 * header.css/footer.css) since Figma's watermark treatment is desktop-only.
 *
 * This used to be scoped to just the Contact Us "Three Ways to Get Help"
 * row via that Row Layout block's own background-image attribute (in that
 * page's post_content); it's been removed from that block in favor of this
 * global rule.
 *
 * The Parent Resources page keeps its OWN separate watermark
 * (.ccgi-parent-tutorials-watermark-row, further below) — a different
 * export cropped/tinted for its blue section background — so it's excluded
 * here rather than layering a second mark on that page.
 */
#inner-wrap {
	background-image: url("/wp-content/themes/kadence-ccgi-resourcehub/assets/images/shared/decoration-mark.png");
	background-repeat: no-repeat;
	background-position: bottom right;
}
.page-id-8830 #inner-wrap {
	background-image: none !important;
}
@media (max-width: 1024px) {
	#inner-wrap {
		background-image: none !important;
	}
}

/*
 * "Arrow link" pattern (Parent Resources page and reused elsewhere): a
 * kadence/singlebtn styled as a plain text link via the "Outline" inherit
 * style, then stripped down to a borderless/lowercase text link. Do NOT use
 * the block's own per-block "Additional CSS" / "Letter Case" panel controls
 * for this — they wrote an unstable "style" attribute onto the block (its
 * serialized shape changed between saves: an object with numeric-character
 * keys, then a plain array), which made the block's rendered output flip
 * between correct and broken on different page loads. Overridden entirely
 * here instead, scoped to the block's own "ccgi-arrow-link" Additional CSS
 * CLASS (a plain string attribute — stable, unlike the "style" attribute).
 * The icon wrapper needs explicit sizing too: the button's global outline
 * style computes .kb-svg-icon-wrap's box from padding/font-size, so once
 * padding is zeroed here the icon collapses to 0x0 without it. The <svg>
 * itself also needs `display: block`: as a default inline element it sits on
 * the text baseline with room left below for a descender, which pushed it
 * ~7px lower than its own 14x14 wrapper box — confirmed via getBoundingClientRect
 * showing the rendered svg's top/bottom offset from .kb-svg-icon-wrap's.
 *
 * Same global "Outline" style bleed-through hits typography too: the block's
 * own typography attribute (14px, Poppins, 600 weight — matching Figma's
 * "Button/Arrow Link" component exactly) is overridden by Kadence Blocks
 * Pro's ".kb-button:not(.kb-btn-global-inherit)" rule, which forces
 * font-size:1.125rem (18px) and pulls in whatever the theme's global button
 * font is (Lato 900) instead — confirmed via computed style on all three
 * "ccgi-arrow-link" instances on this page (Translation Options, Tutorials,
 * Digital Resources), all rendering 18px/Lato/900 instead of the intended
 * 14px/Poppins/600. Poppins 600 is already loaded on this page (used by the
 * infobox titles), so it's safe to reuse here without adding a new font load.
 */
.ccgi-arrow-link {
	text-transform: none !important;
	border: none !important;
	padding: 0 !important;
	width: fit-content !important;
	justify-content: flex-start !important;
	color: #2577bd !important;
	font-family: 'Poppins', sans-serif !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	line-height: normal !important;
}
.ccgi-arrow-link:hover {
	color: #1c5482 !important;
}
.ccgi-arrow-link .kb-svg-icon-wrap {
	width: 14px !important;
	height: 14px !important;
	flex-shrink: 0 !important;
}
.ccgi-arrow-link .kb-svg-icon-wrap svg {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	fill: currentColor !important;
}

/*
 * Parent Resources page: the "Parent Tools Tutorials" mockup screenshot
 * needs a drop shadow per Figma (0px 6px 16px rgba(4,31,61,0.06)) that
 * core/image has no built-in attribute for. It also rendered at its full
 * natural size (1738x1002), overflowing the row/viewport to the right: the
 * image's own `max-width: 100%` only resolves against its containing
 * block's width, but that containing block — the kadence/column flex item —
 * had no `min-width: 0`, so it never shrank below the image's intrinsic
 * content size in the first place. Fixing just the image alone is a no-op
 * without also unlocking the flex item it sits inside.
 *
 * Scoped via the row's own "ccgi-parent-tutorials-watermark-row" className
 * rather than a className on the image block itself: core/image's className
 * was silently dropped the same way kadence/column's was (see the topic-card
 * comment further down) the first time this page got re-saved through the
 * real editor — this image is the only one in that row, so the row-level
 * class is enough to target it precisely.
 */
.ccgi-parent-tutorials-watermark-row .wp-block-kadence-column {
	min-width: 0;
}
.ccgi-parent-tutorials-watermark-row .wp-block-image img {
	max-width: 100%;
	height: auto;
	box-shadow: 0px 6px 16px 0px rgba(4, 31, 61, 0.06);
}

/*
 * Parent Resources page: "Tutorials by Topic" card grid. Kadence's own
 * column borderWidth/borderColor/borderRadius attributes rendered with no
 * visible border, background, or shadow at all (a single-sided 4px border
 * without an explicit border-style seems to be dropped entirely by
 * Kadence's generated CSS) — styled directly here instead.
 *
 * Do NOT scope this to a custom "className" attribute on the column: that
 * was tried first, but kadence/column doesn't have className in its
 * supported attribute schema, so the very next real editor save (e.g. to
 * fix something else on the same page) silently strips it on
 * re-serialization. Kadence's own auto-generated `kadence-column{uniqueID}`
 * class is part of the block's core rendering instead, not an
 * editor-editable attribute, so it can't be dropped the same way.
 */
.kadence-column8830_pr0003-02,
.kadence-column8830_pr0003-04,
.kadence-column8830_pr0003-06,
.kadence-column8830_pr0003-08,
.kadence-column8830_pr0003-10 {
	background: #ffffff;
	border-radius: 14px;
	border-top: 4px solid;
	box-shadow: 0px 1px 1px rgba(4, 31, 61, 0.04), 0px 6px 8px rgba(4, 31, 61, 0.06);
	overflow: hidden;
}
.kadence-column8830_pr0003-02 { border-top-color: #00a49a; }
.kadence-column8830_pr0003-04 { border-top-color: #2577bd; }
.kadence-column8830_pr0003-06 { border-top-color: #f27124; }
.kadence-column8830_pr0003-08 { border-top-color: #977ec2; }
.kadence-column8830_pr0003-10 { border-top-color: #ffdf3c; }

/*
 * Parent Resources page: container max-width. Only the "About Parent
 * Accounts" column (8830_pr0001-01) was built with Kadence's
 * "maxWidth":[1200,"",""] attribute (matching the Contact Us page's own
 * top-level column and the Page Hero's 1200px/16px convention documented in
 * page-hero.css). The other four sections were left as plain top-level
 * rowlayout/column/heading blocks, which Kadence renders edge-to-edge with
 * no width cap at all — confirmed live via getBoundingClientRect (each one
 * spanned the full viewport instead of the 1200px content column). Rather
 * than hand-edit those blocks' JSON attributes again (this page's markup has
 * already gone through several rounds of Gutenberg "invalid content"
 * reconciliation — see the topic-card comment below), this constrains them
 * with CSS instead, scoped per-section.
 *
 * "Parent Tools Tutorials" is the one exception: per Figma, its light-blue
 * background band is intentionally full-bleed edge-to-edge (unlike Contact
 * Us's own watermark row, whose decorative image is small and confined
 * within the 1200px box). So only its *inner* .kt-row-column-wrap is capped
 * here — the row element itself keeps spanning the full viewport for the
 * background.
 */
.ccgi-parent-tutorials-watermark-row > .kt-row-column-wrap {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 16px;
	padding-right: 16px;
	box-sizing: border-box;
}

/*
 * "CaliforniaColleges.edu Tutorials by Topic" is a bare core/heading block,
 * a direct child of .entry-content (not wrapped in any column) — it's the
 * only such bare top-level heading on this page, so this direct-child
 * selector stays scoped to just it without needing a custom className.
 */
/*
 * "About Parent Accounts" section (the page's first content block, directly
 * below the Page Hero): this column had zero top/bottom padding at all, so
 * its heading sat flush against the hero above and its arrow-link button sat
 * flush against the "Parent Tools Tutorials" row below. Figma's desktop
 * frame (node 94:4530) measures 274px tall for 146px of content, i.e. 64px
 * top + 64px bottom — the same 64px section-padding convention already used
 * elsewhere on this page. Mobile (node 532:3796) measures 333px for 301px of
 * content, i.e. 32px top + 32px bottom — half the desktop value, matching
 * the existing 767px breakpoint convention used elsewhere in this file.
 *
 * Left/right: this block's own Kadence-generated "kadenceBlockCSS" attribute
 * is malformed in the raw post_content — literal "n" characters where actual
 * newlines belong ("selector {npadding-left: 16px; padding-right: 16px;n}")
 * — which breaks the "padding-left" declaration (merges into "{npadding-left"
 * and gets dropped) while "padding-right: 16px" still parses fine. Live DOM
 * confirmed this exact asymmetry: 0px left / 16px right at every breakpoint,
 * so the heading and body copy sit flush against the left edge (most visible
 * on mobile, where the column spans the full viewport). Figma's mobile frame
 * confirms 16px on both sides (content x=16, width=358 inside a 390px
 * frame), matching the same 16px convention already used sitewide. Overriding
 * both properties explicitly here rather than trying to fix the malformed
 * attribute string, consistent with this page's established practice of
 * patching via CSS instead of re-touching this page's block markup.
 */
.kadence-column8830_pr0001-01 {
	padding-top: 64px;
	padding-bottom: 64px;
	padding-left: 16px;
	padding-right: 16px;
}
@media (max-width: 767px) {
	.kadence-column8830_pr0001-01 {
		padding-top: 32px;
		padding-bottom: 32px;
	}
}

.entry-content > h2.wp-block-heading {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 16px;
	padding-right: 16px;
	box-sizing: border-box;
}

.kb-row-layout-id8830_pr0003-01 > .kt-row-column-wrap {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 16px;
	padding-right: 16px;
	box-sizing: border-box;
}

/*
 * Also carries the "Other Resources" heading's top spacing: this column had
 * no top padding at all, so the heading sat flush against the bottom of the
 * "Tutorials by Topic" card grid above it. Figma shows a 64px gap (matching
 * the sitewide "64" section top-padding convention already used on Contact
 * Us's own top-level column).
 *
 * Bottom: this column (the last content block on the page) also had zero
 * bottom padding, so it butted directly against the footer with no gap at
 * all — confirmed live (0px computed padding-bottom, 0px gap to the footer)
 * at both desktop and mobile. Figma's desktop frame ("Other Resources"
 * section, node 96:199) measures 387px tall for 323px of content, i.e. the
 * same 64px used above for the top, so it's applied here uniformly (no
 * breakpoint override) to match.
 */
.kadence-column8830_pr0004-01 {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	padding-top: 64px;
	padding-bottom: 64px;
	padding-left: 16px;
	padding-right: 16px;
	box-sizing: border-box;
}

/*
 * "Parent Tools Tutorials" row: Kadence renders its two columns as CSS grid
 * items (.kt-row-column-wrap is display:grid), which stretches both columns
 * to the same height as the taller one (the mockup image) — but the text
 * content inside the shorter text column was left top-aligned within that
 * stretched cell, instead of vertically centered against the image per
 * Figma. Centering the column's own inner wrapper with flexbox (rather than
 * changing the grid's align-items, which would un-stretch both columns and
 * affect the image column too) targets just the text side.
 */
.kadence-column8830_pr0002-02 > .kt-inside-inner-col {
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 100%;
}

/*
 * Parent Resources page: the watermark behind "Parent Tools Tutorials" uses
 * its own export ("shared/decoration-mark-transparent.png" — a variant of
 * Contact Us's "decoration-mark.png" with its own transparent-background
 * crop), not Contact Us's own file directly — those are two different Figma
 * layers (node 96:476 here vs. 114:2484 on Contact Us), each already
 * cropped/positioned for its own page, not two copies of the same file. Per
 * Figma dev-mode's own
 * generated code for node 96:476, the watermark is really a 542x475
 * clip-window (offset -83px/12px from the row's own top-left) showing the
 * left ~35% of a much wider full-color logo lockup at 5% opacity — this
 * export instead flattens that clip+opacity down to a single 459x448 PNG
 * (tight-cropped to its own visible pixels, hence the size difference from
 * the 542x475 clip-window), which is why the position stays -83px/12px
 * (the crop's left/top edges coincide with the artwork's own, per Figma)
 * while the size shrinks to match the trimmed asset.
 */
.ccgi-parent-tutorials-watermark-row {
	background-image: url("/wp-content/themes/kadence-ccgi-resourcehub/assets/images/shared/decoration-mark-transparent.png") !important;
	background-size: 459px 448px !important;
	background-position: -83px 12px !important;
	background-repeat: no-repeat !important;
}
@media (max-width: 767px) {
	/*
	 * Mobile Figma frame ("Brand-Watermark", node 532:3805) scales the same
	 * clip-window to 280x245.39 at offset -40px/19px (~52% of desktop) —
	 * scaled proportionally here to 237x231 to match the trimmed asset.
	 */
	.ccgi-parent-tutorials-watermark-row {
		background-size: 237px 231px !important;
		background-position: -40px 19px !important;
	}
}

/*
 * Parent Resources page: "Other Resources" section has a horizontal divider
 * between the two items on mobile only (absent on desktop) per Figma.
 * Scoped via the row's own "ccgi-other-resources-row" className (rowlayout
 * supports className properly, unlike kadence/column — see the topic-card
 * comment above) and Kadence's own row-wrap markup structure, targeting the
 * second column by position rather than a per-column class.
 */
@media (max-width: 767px) {
	.ccgi-other-resources-row .kt-row-column-wrap > .wp-block-kadence-column:nth-child(2) {
		border-top: 1px solid #f1f3f5;
		padding-top: 24px;
		margin-top: 8px;
	}
}

/*
 * "Other Resources" section: the "Tutorials"/"Digital Resources" arrow-links
 * are a separate kadence/singlebtn block stacked below each infobox, so they
 * sit flush against the column's own left edge instead of inheriting the
 * infobox's icon+text flex layout. On desktop/tablet, Figma indents the link
 * to align with the infobox's heading/paragraph text column (confirmed live:
 * that text column sits 129px in from the column edge — the icon circle's
 * width plus its gap to the text — while the link sat at 0). On mobile,
 * Figma's own mockup shows the link flush-left instead (matching the icon,
 * not the text), so this only applies above the section's existing 767px
 * mobile breakpoint (see the divider rule above).
 */
@media (min-width: 768px) {
	.ccgi-other-resources-row .ccgi-arrow-link {
		margin-left: 129px;
	}
}