/*
Theme Name: Ocean Waves
Theme URI: https://jomarimanto.com
Author: Jomari Manto
Author URI: https://jomarimanto.com
Description: The 2026 site for Jomari Manto — Marketing, Analytics, and AI Solutions. Ported verbatim from the approved prototype: every page keeps the exact inline styles it was designed with, and each page carries its own style block just as the prototype's <helmet> did. Ships Home, Cover, Solutions, About, Projects, Blogs, Resources, Academics (courses), Contact, Thank You and 404, with Course/Resource/Project post types editable in wp-admin with or without ACF.
Version: 2.6.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ocean-waves
Tags: portfolio, blog, custom-menu, featured-images, translation-ready
*/

/* ============================================================
   This file is deliberately small.

   The design lives in inline styles on the elements themselves, exactly as
   the prototype had it, plus the per-page <style> block in inc/page-styles.php.
   Only two things cannot be expressed inline, so only those live here:
     1. :hover states  (from the prototype's style-hover attributes)
     2. the image-slot empty frame and the skip link
   ============================================================ */

/* ---- hover states, converted from style-hover ---- */
.jmh1:hover,.jmh1:focus-visible{background:#01013F;}
.jmh2:hover,.jmh2:focus-visible{border-color:#5B6480;}
.jmh3:hover,.jmh3:focus-visible{border-color:#FFFFFF;color:#FFFFFF;}
.jmh4:hover,.jmh4:focus-visible{color:#FFFFFF;}
.jmh5:hover,.jmh5:focus-visible{color:#FFFFFF;box-shadow:inset 0 -2px 0 #51A2D5;}
.jmh6:hover,.jmh6:focus-visible{border-color:#022F8E;transform:translateY(-4px);box-shadow:0 22px 34px -26px rgba(1,1,63,.45);}
.jmh7:hover,.jmh7:focus-visible{border-color:#022F8E;transform:translateY(-3px);box-shadow:0 24px 40px -30px rgba(1,1,63,.45);}
.jmh8:hover,.jmh8:focus-visible{background:#01013F;color:#FFFFFF;}
.jmh9:hover,.jmh9:focus-visible{border-color:#022F8E;color:#000000;}
.jmh10:hover,.jmh10:focus-visible{color:#022F8E;}
.jmh11:hover,.jmh11:focus-visible{border-color:#022F8E;transform:translateY(-3px);box-shadow:0 18px 28px -24px rgba(1,1,63,.45);}
.jmh12:hover,.jmh12:focus-visible{color:#01013F;border-bottom-color:#022F8E;}
.jmh13:hover,.jmh13:focus-visible{border-color:#022F8E;transform:translateY(-2px);color:#01013F;}
.jmh14:hover,.jmh14:focus-visible{border-color:#01013F;}
.jmh15:hover,.jmh15:focus-visible{border-color:#022F8E;transform:translateY(-3px);box-shadow:0 18px 30px -26px rgba(1,1,63,.5);}
.jmh16:hover,.jmh16:focus-visible{border-color:#000000;}
.jmh17:hover,.jmh17:focus-visible{border-color:#5B6480;transform:translateY(-3px);box-shadow:0 18px 30px -26px rgba(0,0,0,.45);}
.jmh18:hover,.jmh18:focus-visible{background:#9DC6E4;color:#01013F;}
.jmh19:hover,.jmh19:focus-visible{background:#EEF3FA;}

/* ---- image placeholder: the empty state the design specifies ---- */
/* image-slot's own box: width/height 100% with a 3/2 fallback ratio, exactly as
   the custom element declared it. Where the wrapper's height is definite (it
   clips, or has a fixed size) height:100% wins; where it is not, the ratio
   does — which is what makes the Resources cover taller than its 16/10 frame,
   same as the prototype. */
.jm-slot{ position:relative; display:block; width:100%; height:100%; aspect-ratio:3/2; }
.jm-slot img{ width:100%; height:100%; object-fit:cover; display:block; }
.jm-slot--empty{
  background:rgba(0,0,0,.04);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  text-align:center; padding:12px; box-sizing:border-box; user-select:none;
  font:13px/1.3 system-ui,-apple-system,sans-serif; color:rgba(0,0,0,.55);
}
.jm-slot--empty svg{ opacity:.45; }
.jm-slot__cap{ max-width:90%; font-weight:500; letter-spacing:.01em; }
/* the dashed ring the prototype draws inside the frame */
.jm-slot--empty::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  border:1.5px dashed rgba(0,0,0,.25); border-radius:inherit;
}

/* ---- accessibility helpers (not part of the visual design) ---- */
.screen-reader-text{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}
/* Clipped rather than pushed off-screen: a -9999px offset is counted by
   Chrome's scrollWidth and showed up as 24px of horizontal scroll at 375px. */
.skip-link{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}
.skip-link:focus{
  position:fixed; left:8px; top:8px; width:auto; height:auto; z-index:200;
  clip:auto; clip-path:none; background:#fff; color:#022F8E; padding:12px 18px;
  font:700 15px -apple-system,BlinkMacSystemFont,'SF Pro Display',Arial,sans-serif;
}

/* ---- scroll reveal: hidden only once JS confirms it can animate ---- */
.js [data-reveal]{ opacity:0; }
.js [data-reveal].is-revealed{ animation:fadeUp .6s cubic-bezier(.2,.7,.2,1) both; }
@media (prefers-reduced-motion:reduce){
  .js [data-reveal]{ opacity:1; }
  .js [data-reveal].is-revealed{ animation:none; }
}
@keyframes fadeUp{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }