/*
Theme Name: Etch Child Theme
Theme URI: https://etchwp.com/
Author: Digital Gravy
Author URI: https://digitalgravy.co
Description: This theme is a child theme for Etch theme
Requires at least: 6.9
Tested up to: 6.9
Requires PHP: 8.0
Version: 1.1.1778055675
License: GPL v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.txt
Template: etch-theme
Text Domain: etch-child-theme
Tags: Etch, Block Authoring
*/

/* ============================================================
   O'Brien Energy — Homepage Styles (generated by agentic builder)
   Imported: 2026-05-06
   ============================================================ */

@font-face {
  font-family: 'Acumin Pro';
  src: url('https://mainwp.wearemyooz.com/wp-content/uploads/2026/03/AcuminPro-Regular.woff2') format('woff2'),
       url('https://mainwp.wearemyooz.com/wp-content/uploads/2026/03/AcuminPro-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --design-width:  1440;
  --fluid: calc(100vw / 1440);

  --sidebar-width:     calc(260 * var(--fluid));
  --max-content-width: 1440px;
  --min-content-width: 320px;
  --section-pad-x:     calc(80 * var(--fluid));

  --space-4:   calc(4  * var(--fluid));
  --space-8:   calc(8  * var(--fluid));
  --space-12:  calc(12 * var(--fluid));
  --space-16:  calc(16 * var(--fluid));
  --space-24:  calc(24 * var(--fluid));
  --space-32:  calc(32 * var(--fluid));
  --space-48:  calc(48 * var(--fluid));
  --space-64:  calc(64 * var(--fluid));
  --space-96:  calc(96 * var(--fluid));

  --font-h1:    calc(56 * var(--fluid));
  --font-h2:    calc(48 * var(--fluid));
  --font-h3:    calc(32 * var(--fluid));
  --font-sub:   calc(20 * var(--fluid));
  --font-body:  calc(16 * var(--fluid));
  --font-xs:    calc(12 * var(--fluid));

  --leading-tight:  1.1;
  --leading-snug:   1.3;
  --leading-normal: 1.5;

  --tracking-tight: -0.02em;
  --tracking-wide:   0.04em;

  --font-sans: 'Acumin Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;

  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  --Charcoal:   #262626;
  --White:      #FDFDFD;
  --Red:        #FF0048;
  --Grey:       #C4C4C4;
  --Black:      #000000;
  --Light-Grey: #EBEBEB;

  /* ─── Legacy aliases (DEPRECATED) ─── */
  --Black-old:   #EBEBEB;  /* was --Black before naming fix */
  --Light-Grey-old: #000000; /* was --Light-Grey before naming fix */
  --Grey-old:    #ffffff;  /* was --Grey before naming fix */

  --color-text:       var(--Charcoal);
  --color-text-muted: var(--Grey);
  --color-bg:         var(--White);
  --color-surface:    var(--Charcoal);
  --color-border:     var(--Grey);

  --radius-sm:   calc(4  * var(--fluid));
  --radius-md:   calc(8  * var(--fluid));
  --radius-xl:   calc(24 * var(--fluid));
  --radius-full: 9999px;

  --z-header:  50;
  --z-sidebar: 60;

  --transition-fast:   150ms ease;
  --transition-normal: 250ms ease;

  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.10);
  --shadow-lg: 0 10px 32px rgba(0, 0, 0, 0.12);
}

@media (max-width: 1024px) {
  :root {
    --fluid: 1px;

    --font-h1: clamp(32px, 8vw, 56px);
    --font-h2: clamp(28px, 6vw, 48px);
    --font-h3: clamp(22px, 4vw, 32px);
    --font-sub: clamp(16px, 3vw, 20px);

    --section-pad-x: 24px;
    --space-64: 32px;
    --space-96: 48px;
    --space-48: 24px;

    --sidebar-width: 0px;
  }
}

/* ─── Reset ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-family: var(--font-sans);
  font-size: var(--font-body);
  color: var(--color-text);
  background-color: var(--color-bg);
}

body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img, picture { display: block; max-width: 100%; }
video, canvas { display: block; max-width: 100%; }
input, textarea, select { font: inherit; }
h1, h2, h3 { overflow-wrap: break-word; text-wrap: balance; }
h4, h5, h6 { overflow-wrap: break-word; text-wrap: balance; }
/* ============================================================
  O'Brien Energy — Homepage: Page-Level Custom CSS
  Paste into: Bricks > Page Settings > Custom CSS
  Last updated: 2026-05-05
  ============================================================ */

/* ── CSS Variable Fix (corrected naming from global CSS) ──── */
/*
  Global CSS has inverted color names (legacy bug).
  These overrides set the correct values at page scope.
*/
:root {
  --Grey:       #C4C4C4;
  --Black:      #000000;
  --Light-Grey: #EBEBEB;
  --color-text-muted: var(--Grey);
  --color-surface:    var(--Charcoal);
  --color-border:     var(--Grey);
  --font-sm:    calc(14 * var(--fluid));
}

@media (max-width: 1024px) {
  :root { --font-sm: clamp(12px, 3vw, 14px); }
}


/* ── SplitType: hide text before JS splits it ──────────────── */
[text-split] {
  opacity: 0;
}

/* Allow visibility in Bricks editor (not frontend) */
body:not(.bricks-is-frontend) [text-split] {
  opacity: 1 !important;
}


/* ── section-03-product: Swiper pagination — jh3y grow style ── */
/* EDIT: ganti blok pagination lama dengan ini */
.ob-products__pagination .swiper-pagination-bullet {
  flex: 1;
  width: 8px;
  height: 8px;
  border-radius: 100px;
  background: var(--Grey);
  opacity: 1;
  margin: 0;
  transition: flex 0.2s ease-out, background 0.2s ease-out;
  cursor: pointer;
}

.ob-products__pagination .swiper-pagination-bullet-active {
  flex: 4;
  background: var(--Charcoal);
}


/* ============================================================
   O'Brien Energy — Custom CSS Overrides
   ============================================================ */

/* ============================================================
  O'Brien Energy — Homepage: Page-Level Custom CSS
  Paste into: Bricks > Page Settings > Custom CSS
  Last updated: 2026-05-05
  ============================================================ */

/* ── CSS Variable Fix (corrected naming from global CSS) ──── */
/*
  Global CSS has inverted color names (legacy bug).
  These overrides set the correct values at page scope.
*/
:root {
  --Grey:       #C4C4C4;
  --Black:      #000000;
  --Light-Grey: #EBEBEB;
  --color-text-muted: var(--Grey);
  --color-surface:    var(--Charcoal);
  --color-border:     var(--Grey);
  --font-sm:    calc(14 * var(--fluid));
}

@media (max-width: 1024px) {
  :root { --font-sm: clamp(12px, 3vw, 14px); }
}


/* ── SplitType: hide text before JS splits it ──────────────── */
[text-split] {
  opacity: 0;
}

/* ── section-03-product: Swiper pagination — jh3y grow style ── */
/* EDIT: ganti blok pagination lama dengan ini */
.ob-products__pagination .swiper-pagination-bullet {
  flex: 1;
  width: 8px;
  height: 8px;
  border-radius: 100px;
  background: var(--Grey);
  opacity: 1;
  margin: 0;
  transition: flex 0.2s ease-out, background 0.2s ease-out;
  cursor: pointer;
}

.ob-products__pagination .swiper-pagination-bullet-active {
  flex: 4;
  background: var(--Charcoal);
}

/* Results Swiper styles are now native in etch_styles (keys: ob-results-hover-blur,
   ob-results-hover-lift, ob-results-img-hover, ob-results__img-wrap--tall) */


/* ============================================================
 * aXcelerate brand skin — restyles ax_plugin output to match
 * the O'Brien Etch design system (2026-08-19).
 * Applies to: /courses/, /training/ workshop search, all
 * course-detail / enrolment / search pages.
 * ============================================================ */

/* ── Course list tiles (ax_course_list style=ax-tile) ── */
div.ax-tile {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: var(--space-24, 24px);
  overflow-x: auto;
  padding-block: 8px 28px;
  padding-inline: max(var(--section-pad-x, 24px), calc((100vw - 1440px) / 2 + var(--section-pad-x, 24px)));
  scroll-padding-inline: max(var(--section-pad-x, 24px), calc((100vw - 1440px) / 2 + var(--section-pad-x, 24px)));
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
div.ax-tile .ax-tile-link {
  flex: 0 0 clamp(300px, 32vw, 420px);
  scroll-snap-align: start;
  float: none !important;
  width: auto !important;
}
div.ax-tile .ax-tile-link > a { text-decoration: none; display: block; height: 100%; }
div.ax-tile div.ax-course-list-record {
  width: 100% !important;
  min-height: 0 !important;
  height: 100%;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
  background: var(--White, #fff);
  border: 1px solid oklch(from var(--Charcoal, #1e1e1e) l c h / 0.08);
  border-radius: var(--radius-lg, 16px);
  overflow: hidden;
  box-shadow: none !important;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
div.ax-tile .ax-tile-link:hover .ax-course-list-record {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px oklch(from var(--Charcoal, #1e1e1e) l c h / 0.12) !important;
}
div.ax-tile .ax-course-thumb {
  max-height: none !important;
  zoom: 1 !important;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--Light-Grey, #f2f2f2);
}
div.ax-tile .ax-course-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  display: block;
}
.ax-course-list-record-body { padding: 20px 24px 28px; }
.ax-course-list-record-body .ax-course-name {
  font-family: var(--font-sans);
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 400;
  line-height: 1.25;
  color: var(--Charcoal, #1e1e1e);
  margin: 0 0 10px;
  background: none !important;
}
.ax-course-list-record-body > .ax-course-code {
  display: inline-block;
  background: var(--Red, #e6004c) !important;
  color: #fff !important;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 6px 14px;
  border: none;
  border-radius: 999px;
  margin: 0 0 14px;
}
.ax-course-list-description {
  font-family: var(--font-sans);
  font-size: var(--font-small, 14px);
  line-height: 1.55;
  color: oklch(from var(--Charcoal, #1e1e1e) l c h / 0.7);
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ax-course-list-description img,
.ax-course-list-description br { display: none !important; }

/* ── Complex course search (training page + search pages) ── */
.ax-complex-course-search {
  font-family: var(--font-sans);
  background: var(--White, #fff);
  border-radius: var(--radius-xl, 20px);
  padding: var(--space-24, 24px);
  overflow-x: auto;
}
/* standalone pages: align with 1440 content column; inside the
   training schedule section the section already pads — reset there */
.wp-site-blocks > .ax-complex-course-search,
body > .ax-complex-course-search,
main > .ax-complex-course-search {
  margin-inline: max(var(--section-pad-x, 24px), calc((100vw - 1440px) / 2 + var(--section-pad-x, 24px)));
  margin-bottom: var(--space-64, 64px);
}
.ob-training__schedule .ax-complex-course-search { margin-inline: 0; margin-bottom: 0; padding-inline: 0; }

.ax-complex-course-search-controls { margin-bottom: var(--space-24, 24px); }
.ax-complex-course-search-controls .form-control,
.ax-complex-course-search-controls select,
.ax-complex-course-search-controls input {
  padding: 10px 14px;
  border: 1px solid oklch(from var(--Charcoal, #1e1e1e) l c h / 0.15);
  border-radius: 8px;
  font-family: var(--font-sans);
  font-size: var(--font-body, 16px);
  color: var(--Charcoal, #1e1e1e);
  background: var(--White, #fff);
}
.ax-complex-course-search-controls .form-control:focus,
.ax-complex-course-search-controls select:focus,
.ax-complex-course-search-controls input:focus {
  outline: 2px solid var(--Red, #e6004c);
  outline-offset: 2px;
  box-shadow: none;
}
.ax-complex-course-search .btn-primary,
.ax-complex-course-search .btn.btn-primary,
.ax-complex-course-search .ax-course-button-link,
.ax-complex-course-search input[type="submit"] {
  background: var(--Red, #e6004c) !important;
  border: none !important;
  color: #fff !important;
  border-radius: 8px !important;
  padding: 10px 22px !important;
  font-family: var(--font-sans);
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.ax-complex-course-search .btn-primary:hover { opacity: 0.85; }

.ax-complex-course-search table,
table#ax_course_search_table {
  width: 100% !important;
  border-collapse: collapse;
  font-family: var(--font-sans);
  font-size: var(--font-body, 16px);
  background: var(--White, #fff);
}
.ax-complex-course-search table th,
.ax-complex-course-search table td {
  padding: 14px 18px;
  text-align: left;
  border-bottom: 1px solid oklch(from var(--Charcoal, #1e1e1e) l c h / 0.08);
  color: var(--Charcoal, #1e1e1e);
}
.ax-complex-course-search table th {
  font-weight: 600;
  background: var(--Light-Grey, #f2f2f2);
  white-space: nowrap;
}
.ax-complex-course-search .dataTables_wrapper .dataTables_length select { padding: 6px 10px; }
.ax-complex-course-search .dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: var(--Red, #e6004c) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 6px;
}

/* ax-skin fixups */
div.ax-tile .ax-course-list-record-body > .ax-course-code { float: none !important; position: static !important; display: block !important; width: fit-content; line-height: 1.2; height: auto !important; margin: 0 0 16px !important; }
div.ax-tile .ax-course-list-description { clear: both !important; margin-top: 0 !important; padding-top: 2px; }

/* ax-skin fixups 2 */
.ax-complex-course-search-controls { display: flex; flex-direction: column; gap: var(--space-16, 16px); align-items: stretch; }
.ax-complex-course-search-controls .input-group { display: flex; align-items: stretch; gap: 8px; }
.ax-complex-course-search-controls .input-group .form-control { flex: 1 1 auto; }
.ax-complex-course-search-controls .input-group-text { display: inline-flex; align-items: center; padding: 10px 14px; background: var(--Light-Grey, #f2f2f2); border: none; border-radius: 8px; font-family: var(--font-sans); font-size: var(--font-small, 14px); font-weight: 600; color: var(--Charcoal, #1e1e1e); }
.ax-complex-course-search-controls .input-group-addon { display: inline-flex; align-items: center; padding-inline: 4px; font-family: var(--font-sans); color: var(--Charcoal, #1e1e1e); }
.ax-complex-course-search-controls .custom-select { appearance: auto; }
.ax-complex-course-search .btn-primary, .ax-complex-course-search .btn.btn-primary { align-self: flex-end; margin-top: 4px; }

/* ── CF7 brand skin ── */
.wpcf7 form { display: flex; flex-direction: column; gap: 14px; font-family: var(--font-sans); }
.wpcf7 form p { margin: 0; }
.wpcf7 label { display: block; font-size: var(--font-small, 14px); font-weight: 600; color: var(--Charcoal, #1e1e1e); margin-bottom: 6px; }
.wpcf7 input[type=text], .wpcf7 input[type=email], .wpcf7 input[type=tel], .wpcf7 select, .wpcf7 textarea { width: 100%; padding: 12px 16px; border: 1px solid oklch(from var(--Charcoal, #1e1e1e) l c h / 0.15); border-radius: 8px; font: inherit; font-size: var(--font-body, 16px); color: var(--Charcoal, #1e1e1e); background: var(--White, #fff); }
.wpcf7 input:focus, .wpcf7 select:focus, .wpcf7 textarea:focus { outline: 2px solid var(--Red, #e6004c); outline-offset: 2px; }
.wpcf7 textarea { min-height: 88px; resize: vertical; }
.wpcf7 input[type=submit] { background: var(--Red, #e6004c); color: #fff; border: none; border-radius: 8px; padding: 14px 28px; font-family: var(--font-sans); font-size: var(--font-body, 16px); font-weight: 600; cursor: pointer; width: 100%; transition: opacity 0.2s ease; }
.wpcf7 input[type=submit]:hover { opacity: 0.88; }
.wpcf7 textarea[name=address] { display: none !important; }
.wpcf7 form p:has(> textarea[name=address]) { display: none !important; }
.wpcf7-not-valid-tip { color: var(--Red, #e6004c); font-size: 13px; margin-top: 4px; }
.wpcf7 .wpcf7-response-output { border: 1px solid var(--Red, #e6004c); border-radius: 8px; padding: 12px 16px; margin: 4px 0 0; font-size: var(--font-small, 14px); }
.wpcf7 .cf7sr-turnstile, .wpcf7 .cf7sr-ts { margin-block: 4px; }

/* ── WPForms brand submit ── */
.wpforms-form button[type=submit], .wpforms-form .wpforms-submit, div.wpforms-container-full .wpforms-form button[type=submit] { background: var(--Red, #e6004c) !important; border: none !important; color: #fff !important; border-radius: 8px !important; padding: 14px 28px !important; font-family: var(--font-sans) !important; font-weight: 600; font-size: var(--font-body, 16px) !important; transition: opacity 0.2s ease; }
div.wpforms-container-full .wpforms-form button[type=submit]:hover { opacity: 0.88; background: var(--Red, #e6004c) !important; }
.ob-lp-form .wpforms-submit-container { margin-top: 4px; }
.ob-lp-form button[type=submit] { width: 100%; }