/*
Theme Name: OceanWP Child
Theme URI: https://oceanwp.org/
Template: oceanwp
Author: OceanWP
Author URI: https://oceanwp.org/about-oceanwp/
Description: OceanWP Child Theme – personalized for Koudjo Johnson.
Version: 1.0.0
*/

/* ------------------------------------------------------------
   0) Design Tokens (Farbpalette + Typo + Layout)
------------------------------------------------------------ */
:root{
  --kj-navy: #243061;
  --kj-teal: #008b8b;
  --kj-mint: #8ed8a9;
  --kj-gold: #CA9106;
  --kj-ivory: #FEFAF1;
  --kj-rose: #c89fa3;
  --kj-slate: #4c6e81;

  --kj-text: var(--kj-navy);
  --kj-muted: var(--kj-slate);
  --kj-bg: var(--kj-ivory);
  --kj-card: #ffffff;
  --kj-border: rgba(36,48,97,.12);

  --kj-radius: 16px;
  --kj-radius-sm: 12px;
  --kj-shadow: 0 10px 30px rgba(36,48,97,.08);
  --kj-shadow-sm: 0 6px 18px rgba(36,48,97,.10);

  --kj-max: 1140px;
}

/* ------------------------------------------------------------
   1) Base
------------------------------------------------------------ */
html, body{
  color: var(--kj-text);
  background: var(--kj-bg);
}

body{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a{
  color: var(--kj-teal);
  text-underline-offset: 3px;
}
a:hover, a:focus{
  color: var(--kj-navy);
}

p{
  line-height: 1.7;
}

h1,h2,h3,h4,h5,h6{
  color: var(--kj-navy);
  letter-spacing: -0.02em;
}

/* Content width (optional – OceanWP macht viel selbst) */
.container,
#content-wrap .container{
  max-width: var(--kj-max);
}

/* ------------------------------------------------------------
   2) Header / Navigation
------------------------------------------------------------ */
#site-header{
  background: #fff;
  border-bottom: 1px solid var(--kj-border);
}

#site-logo a,
#site-logo a:hover{
  color: var(--kj-navy);
}

#site-navigation-wrap .dropdown-menu > li > a{
  color: var(--kj-navy);
  font-weight: 600;
}
#site-navigation-wrap .dropdown-menu > li > a:hover{
  color: var(--kj-teal);
}

#site-navigation-wrap .dropdown-menu > li.current-menu-item > a,
#site-navigation-wrap .dropdown-menu > li.current_page_item > a{
  color: var(--kj-teal);
}

/* Sticky header shadow (falls aktiv) */
.is-sticky #site-header{
  box-shadow: var(--kj-shadow-sm);
}

/* ------------------------------------------------------------
   3) Buttons (OceanWP + WP Core)
------------------------------------------------------------ */
button,
input[type="button"],
input[type="submit"],
.wp-block-button__link,
a.button,
.owp-btn{
  background: var(--kj-teal);
  color: #fff !important;
  border: 1px solid transparent;
  border-radius: var(--kj-radius-sm);
  padding: 12px 18px;
  font-weight: 700;
  box-shadow: 0 10px 24px rgba(0,139,139,.18);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}

button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover,
a.button:hover,
.owp-btn:hover{
  background: var(--kj-navy);
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(36,48,97,.18);
}

/* Secondary button utility class */
.kj-btn-secondary{
  background: transparent !important;
  border-color: var(--kj-teal) !important;
  color: var(--kj-teal) !important;
  box-shadow: none !important;
}
.kj-btn-secondary:hover{
  background: var(--kj-teal) !important;
  color: #fff !important;
}

/* ------------------------------------------------------------
   4) Cards / Sections (nice default look)
------------------------------------------------------------ */
.entry,
.page-content,
#content-wrap .content-area,
.widget,
.oceanwp-recent-posts,
.woocommerce .product,
.woocommerce-cart .cart-collaterals,
.woocommerce-checkout #order_review{
  border-radius: var(--kj-radius);
}

/* Blog post card feel (subtle) */
.blog-entry-inner,
.single-post .entry-content{
  background: var(--kj-card);
  border: 1px solid var(--kj-border);
  border-radius: var(--kj-radius);
  box-shadow: var(--kj-shadow);
}

/* Make blog list spacing nicer */
.blog-entry-inner{
  padding: 22px;
}

/* ------------------------------------------------------------
   5) Forms
------------------------------------------------------------ */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
textarea,
select{
  border: 1px solid var(--kj-border);
  border-radius: 14px;
  background: #fff;
  color: var(--kj-navy);
  padding: 12px 14px;
  box-shadow: none;
}

input:focus,
textarea:focus,
select:focus{
  outline: none;
  border-color: rgba(0,139,139,.55);
  box-shadow: 0 0 0 4px rgba(142,216,169,.35);
}

/* ------------------------------------------------------------
   6) Footer
------------------------------------------------------------ */
#footer{
  background: var(--kj-navy);
  color: rgba(254,250,241,.92);
}

#footer a{
  color: var(--kj-mint);
}
#footer a:hover{
  color: #fff;
}

#copyright{
  background: rgba(0,0,0,.12);
  color: rgba(254,250,241,.85);
}

/* ------------------------------------------------------------
   7) Highlights / Badges
------------------------------------------------------------ */
.kj-highlight{
  background: rgba(202,145,6,.12);
  border: 1px solid rgba(202,145,6,.25);
  border-radius: 999px;
  padding: 6px 10px;
  font-weight: 700;
  color: var(--kj-navy);
}

/* ------------------------------------------------------------
   8) Simple “Hero” helpers (optional classes for your pages)
------------------------------------------------------------ */
.kj-hero{
  background: linear-gradient(135deg, rgba(0,139,139,.10), rgba(142,216,169,.12));
  border: 1px solid var(--kj-border);
  border-radius: var(--kj-radius);
  box-shadow: var(--kj-shadow);
  padding: 44px 28px;
}

.kj-hero h1{
  font-size: clamp(28px, 3vw, 44px);
  margin-bottom: 10px;
}
.kj-hero p{
  color: var(--kj-muted);
  max-width: 68ch;
  font-size: 1.05rem;
}

/* ------------------------------------------------------------
   9) Mobile polishing
------------------------------------------------------------ */
@media (max-width: 768px){
  .blog-entry-inner{
    padding: 16px;
  }
  .kj-hero{
    padding: 28px 18px;
  }
}