/*
Theme Name: OceanWP Child
Theme URI: https://oceanwp.org/
Description: Child theme for OceanWP used by the Sekolah Pribadi Depok site. Holds custom styles and scripts so they survive parent theme updates.
Author: Sekolah Pribadi Depok
Template: oceanwp
Version: 1.0.0
Text Domain: oceanwp-child
*/

/* Site-wide custom styles go here.
   Feature-specific styles live in assets/css/ and are enqueued from functions.php. */

/* ---------------------------------------------------------------
   Footer: undo "Hide On Mobile" on the link columns.

   The footer (Elementor Theme Builder, post 69, shared by every page - see
   CLAUDE.md) has its content row set up as 4 columns: logo, then three link
   groups (About, Community, Programs). Three of those four carry Elementor's
   own .elementor-hidden-mobile class - a per-column "Hide On Mobile" toggle
   set inside the Elementor editor itself, nothing to do with this theme's
   files - so mobile visitors got only the logo and nothing else.

   Overridden here rather than by editing _elementor_data directly, for the
   same reason the header gaps are (see language-switch.js / mobile-nav.js):
   Elementor rewrites its stored document wholesale on every Update, which
   has caused this project real data loss before. This is a pure CSS
   override of Elementor's own responsive-visibility output, so there is
   nothing in the database to touch. Matches Elementor's own hidden-mobile
   breakpoint (max-width: 767px) and needs !important to beat its
   !important. Elementor's own column-stacking rule (not ours) is what makes
   each of these fill 100% width once visible, same as the logo column
   already did. */
@media only screen and (max-width: 767px) {
	footer.elementor-location-footer .elementor-hidden-mobile {
		display: flex !important;
	}

	/* The three link columns are narrow at this width (they share the row
	   with the logo column, unchanged from Elementor's own layout) - two
	   follow-on problems from that, both from Elementor's own base styles:
	   overflow-wrap: break-word mid-word-breaks "Community" into "Communit"
	   / "y" once it doesn't fit, and the heading's default size is sized for
	   a full-width column, not a ~110px one. Smaller text plus keep-all
	   wrapping (break at the space in "Digital Classroom", never mid-word)
	   fixes both without changing the 3-column layout itself. */
	footer.elementor-location-footer .elementor-heading-title {
		/* !important: Elementor generates a per-widget rule keyed to that
		   widget's own element id (e.g. .elementor-element-72c9531b
		   .elementor-heading-title), which outweighs a plain class selector
		   here regardless of source order. */
		font-size: 15px !important;
		overflow-wrap: normal;
		word-break: keep-all;
	}

	/* Logo column ran the full site logo (198px) at the same size as
	   desktop, oversized next to the now-visible link columns beside it. */
	footer.elementor-location-footer .elementor-widget-theme-site-logo img {
		max-width: 140px;
		height: auto;
	}
}

/* ---------------------------------------------------------------
   Page canvas.

   body is the only thing painting a background on interior pages -
   #outer-wrap, #wrap and #main are all transparent - so this one rule
   tints every Elementor-authored page. A full page of pure #fff is
   tiring to read against for any length of time; this steps a few
   percent down to a soft cool grey while leaving cards, panels and
   other raised white surfaces to lift off it.

   Raw hex rather than a token: the design system's custom properties
   are scoped to #homepage-custom so they can't leak into Elementor
   pages, so they aren't in scope here. This value is the same
   --color-surface-page that assets/css/homepage.css defines, and the
   two are meant to stay in step - change both, or the homepage and
   the rest of the site drift apart.
   --------------------------------------------------------------- */
body {
	background-color: #f2f5f9;
}

/* Swap the site's font (set site-wide via the Elementor kit as Montserrat)
   for Inter. !important because the kit prints these same custom properties
   unprefixed on .elementor-kit-8 with no !important of its own - this beats
   it regardless of stylesheet load order. */
:root {
	--e-global-typography-primary-font-family: 'Inter', sans-serif !important;
	--e-global-typography-secondary-font-family: 'Inter', sans-serif !important;
	--e-global-typography-text-font-family: 'Inter', sans-serif !important;
	--e-global-typography-accent-font-family: 'Inter', sans-serif !important;
}

/* The header's nav-menu widget hardcodes "Montserrat" directly (not via
   the kit variables above) on this specific Elementor instance, so it
   needs its own override. */
#site-header .elementor-nav-menu .elementor-item,
#site-header .elementor-nav-menu--dropdown .elementor-item,
#site-header .elementor-nav-menu--dropdown .elementor-sub-item {
	font-family: 'Inter', sans-serif !important;
	letter-spacing: 0.2px !important;
}

/* Kit hardcodes generous 33px/16px item padding on this nav-menu instance -
   tighten the gap between items and the bar's overall height. */
#site-header .elementor-nav-menu--main .elementor-item {
	padding-left: 22px !important;
	padding-right: 22px !important;
	padding-top: 8px !important;
	padding-bottom: 8px !important;
}

/* Center the menu items within their column instead of hugging its left
   edge next to the logo. The <ul> itself shrinks to its content width, so
   centering it needs auto margins on the <ul>, not just justify-content
   (which only affects how its own items sit inside its own, already-tight,
   width). */
#site-header .elementor-nav-menu--layout-horizontal .elementor-nav-menu {
	justify-content: center;
	margin-inline-start: auto;
	margin-inline-end: auto;
}

/* ---------------------------------------------------------------
   Header size, site-wide.
   The empty top bar and the kit's generous section/logo sizing used to
   only get tightened on the front page (bundled with the transparent-
   header treatment in assets/css/transparent-header.css), so every other
   page rendered a visibly taller header. Top bar has no content on any
   page, so it's safe to hide everywhere; the compact padding/logo size
   is now the one header size used everywhere, and transparent-header.css
   only adds the front-page-only floating/color behaviour on top of it.
   --------------------------------------------------------------- */

#top-bar-wrap {
	display: none;
}

#site-header .elementor-section {
	padding-top: 8px;
	padding-bottom: 8px;
}

#site-header .elementor-element-populated {
	margin-top: 0;
	margin-bottom: 0;
}

#site-header .elementor-widget-image img {
	max-height: 44px;
	width: auto;
	/* Position, not just size: this was previously bundled into the
	   front-page-only transparent-header.css alongside the colour-swap
	   logic, so every other page rendered the logo 72px further left and
	   6px lower than the homepage. Same bug class as the top-bar/padding
	   fix above - anything about how the header looks belongs here so
	   every page matches; transparent-header.css should only ever add
	   front-page-only floating/colour behaviour on top of it. */
	margin-left: 72px;
	margin-top: -6px;
}

@media only screen and (max-width: 767px) {
	#site-header .elementor-widget-image img {
		max-height: 42px;
		/* The 72px/-6px nudge above positions the logo against the desktop
		   nav row. The mobile header is a different Elementor section with
		   its own two-column layout, where that nudge just shoves the logo
		   off its own column and toward the middle of a 390px screen. */
		margin-left: 0;
		margin-top: 0;
	}
}

/* ---------------------------------------------------------------
   ID/EN language switch, inserted next to the Admission button by
   assets/js/language-switch.js (DOM insertion only - Elementor's own
   header data is never edited; see the docblock above
   oceanwp_child_current_lang() in functions.php for the full picture).
   --------------------------------------------------------------- */

/* .btn-admission is this column's own existing class (not one this
   project added) - a reliable, already-unique hook to lay the inserted
   switch and the button out side by side without touching Elementor's
   column/section structure itself. */
#site-header .elementor-column.btn-admission .elementor-widget-wrap {
	display: flex;
	/* Elementor's own default for a populated widget-wrap is
	   flex-direction: column (it's built to stack multiple widgets in one
	   column vertically) - display:flex alone inherits that, which is
	   exactly what put the switch above the button instead of beside it. */
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
}

#site-header .hp-lang-switch {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	/* Pulls the switch away from the Admission button so it centres in the
	   gap between the last nav item (Careers/Karier) and the button,
	   instead of sitting flush against the button's left edge. Measured
	   directly against the rendered gap, not guessed. */
	margin-right: 63px;
	border: 1.5px solid rgba(24, 168, 250, 0.35);
	border-radius: 999px;
	padding: 2px;
	gap: 2px;
}

#site-header .hp-lang-btn {
	display: inline-block;
	border: 0;
	background: transparent;
	color: #5a6472;
	font-family: 'Inter', sans-serif;
	font-weight: 700;
	font-size: 11px;
	letter-spacing: 0.4px;
	line-height: 1;
	padding: 6px 10px;
	border-radius: 999px;
	cursor: pointer;
	transition: background-color 200ms ease, color 200ms ease;
}

#site-header .hp-lang-btn:hover {
	color: #18a8fa;
}

#site-header .hp-lang-btn.is-active {
	background: #18a8fa;
	color: #fff;
}

#site-header .hp-lang-btn.is-active:hover {
	color: #fff;
}

#site-header .hp-lang-btn:focus-visible {
	outline: 2px solid #18a8fa;
	outline-offset: 2px;
}

/* This column is already hidden below tablet width (elementor-hidden-tablet
   on its parent section, same as the rest of the desktop nav row) - the
   mobile header is a separate Elementor section with its own structure and
   no equivalent slot, so the switch simply isn't shown there yet rather than
   being wedged in somewhere that fights the mobile layout. */
@media only screen and (max-width: 767px) {
	#site-header .hp-lang-switch {
		display: none;
	}
}

/* ---------------------------------------------------------------
   Mobile header navigation, inserted into the mobile header section's
   empty menu column by assets/js/mobile-nav.js - see that file for why
   the menu is built there instead of in the Elementor header template.

   No media query wraps any of this: the whole section it lives in is
   elementor-hidden-desktop, so the markup only exists below tablet
   width in the first place.

   Colours are the raw hex already established for header chrome in this
   file and in transparent-header.css (#18a8fa brand blue, #1f2124
   dropdown text, #5a6472 muted) rather than the design-system tokens -
   those are scoped to #homepage-custom and aren't defined site-wide.
   --------------------------------------------------------------- */

/* Positioning context for the panel, added from JS so nothing here has to
   guess at Elementor's generated section classes. */
#site-header .hp-mnav-host {
	position: relative;
}

#site-header .hp-mnav-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	/* Pushes the burger to the far edge of its column, opposite the logo. */
	margin-left: auto;
	/* 44px: the WCAG 2.2 AA target-size minimum, met by the button box
	   rather than by the 24px bars drawn inside it. */
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	color: #1f2124;
	cursor: pointer;
}

/* Three bars from one element: the middle bar is the element itself and the
   outer two are its pseudo-elements, so the close state is just a matter of
   rotating two of them and hiding the third. */
#site-header .hp-mnav-bars {
	position: relative;
}

#site-header .hp-mnav-bars,
#site-header .hp-mnav-bars::before,
#site-header .hp-mnav-bars::after {
	display: block;
	width: 24px;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	transition: transform 200ms ease, background-color 200ms ease;
}

#site-header .hp-mnav-bars::before,
#site-header .hp-mnav-bars::after {
	content: '';
	position: absolute;
	left: 0;
}

#site-header .hp-mnav-bars::before {
	top: -7px;
}

#site-header .hp-mnav-bars::after {
	top: 7px;
}

#site-header .hp-mnav-toggle.is-open .hp-mnav-bars {
	background: transparent;
}

#site-header .hp-mnav-toggle.is-open .hp-mnav-bars::before {
	transform: translateY(7px) rotate(45deg);
}

#site-header .hp-mnav-toggle.is-open .hp-mnav-bars::after {
	transform: translateY(-7px) rotate(-45deg);
}

#site-header .hp-mnav-toggle:focus-visible {
	outline: 2px solid #18a8fa;
	outline-offset: 2px;
	border-radius: 6px;
}

#site-header .hp-mnav-panel {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	/* Above the hero video and its overlay, which the front-page header
	   floats over. */
	z-index: 999;
	/* 72px is this header's own height; the panel scrolls internally rather
	   than running off the bottom of a short screen. */
	max-height: calc(100vh - 72px);
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 8px 0 12px;
	background: #fff;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}

/* The panel is a flex/block context of its own, so the [hidden] attribute
   needs backing up the same way Elementor's own hidden utilities do. */
#site-header .hp-mnav-panel[hidden] {
	display: none;
}

#site-header .hp-mnav-list,
#site-header .hp-mnav-sublist {
	margin: 0;
	padding: 0;
	list-style: none;
}

#site-header .hp-mnav-link,
#site-header .hp-mnav-group {
	display: block;
	font-family: 'Inter', sans-serif;
	line-height: 1.3;
	text-decoration: none;
}

#site-header .hp-mnav-link {
	padding: 13px 24px;
	color: #1f2124;
	font-size: 15px;
	font-weight: 500;
}

#site-header .hp-mnav-link:hover,
#site-header .hp-mnav-link:focus {
	background: rgba(0, 0, 0, 0.05);
	color: #1f2124;
}

/* Parent items that only ever opened a submenu on desktop hover: rendered as
   a section label rather than a dead "#" link, so every tappable row in the
   panel actually goes somewhere. */
#site-header .hp-mnav-group {
	padding: 14px 24px 4px;
	color: #5a6472;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.6px;
	text-transform: uppercase;
}

#site-header .hp-mnav-link--sub {
	padding-left: 40px;
	color: #5a6472;
	font-weight: 400;
}

/* Second instance of the ID/EN switch, built by mobile-nav.js reusing
   language-switch.js's own switcher. That file's desktop copy is hidden
   below 767px (its column has no mobile equivalent) - the extra
   .hp-mnav-lang ancestor here outweighs that rule's specificity, so this
   instance stays visible without touching the desktop one's media query. */
#site-header .hp-mnav-lang {
	margin-top: 8px;
	padding: 16px 24px 4px;
	border-top: 1px solid rgba(0, 0, 0, 0.08);
}

#site-header .hp-mnav-lang .hp-lang-switch {
	display: inline-flex;
	margin-right: 0;
}

@media (prefers-reduced-motion: reduce) {
	#site-header .hp-mnav-bars,
	#site-header .hp-mnav-bars::before,
	#site-header .hp-mnav-bars::after {
		transition: none;
	}
}