/*
Theme Name: Ortopedie Planá Medical
Theme URI: https://www.ortopedieplana.cz
Template: oceanwp
Author: Ortopedie Planá
Description: Custom moderni medical sablona pro Ortopedie Plana. Child theme nad OceanWP s vlastni barevnou paletou (namorni modr / tyrkysova / oranzova), typografii Poppins + Inter a sadou komponent pro hero sekce, karty vyhod, karty tymu a CTA pruhy.
Version: 1.0
Text Domain: ortopedie-plana-medical
*/

/* =====================================================================
   ORTOPEDIE PLANA MEDICAL - CHILD THEME STYLES
   ===================================================================== */

:root{
  --op-navy:#103B4C;
  --op-navy-dark:#0A2730;
  --op-teal:#1AA6A6;
  --op-teal-light:#E6F5F4;
  --op-cta:#F2762E;
  --op-cta-dark:#D4601C;
  --op-bg:#F7F9FA;
  --op-text:#1F2D2D;
  --op-muted:#5B6B6B;
  --op-radius:14px;
}

body, p, li, .entry-content, input, textarea, select{
  font-family:'Inter', -apple-system, sans-serif;
  color:var(--op-text);
  line-height:1.7;
}
h1, h2, h3, h4, h5, h6,
.entry-title, .page-header-title, .widget-title, .heading-title{
  font-family:'Poppins', sans-serif !important;
  font-weight:700 !important;
  color:var(--op-navy);
  letter-spacing:-0.01em;
}
a{ color:var(--op-teal); }
a:hover{ color:var(--op-cta); }
body{ background:var(--op-bg); }
.content-area, #content{ background:#fff; }

#site-header{
  background:#fff;
  box-shadow:0 2px 14px rgba(16,59,76,0.08);
}
#site-header.medium-header{ min-height:90px; }

.custom-header-media{ position:relative; }
.custom-header-media:after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(16,59,76,.55), rgba(16,59,76,.25));
}

#site-navigation .main-menu > li > a.menu-link{
  font-family:'Poppins', sans-serif;
  font-weight:600;
  font-size:14px;
  letter-spacing:.02em;
  color:var(--op-navy);
  transition:color .2s ease;
}
#site-navigation .main-menu > li > a.menu-link:hover,
#site-navigation .main-menu > li.current-menu-item > a.menu-link{
  color:var(--op-cta);
}

@media (min-width:1024px){
  #site-header.hidden-menu .mobile-menu-icon,
  #site-header.hidden-menu .mobile-icon{ display:none !important; }
  #site-header.hidden-menu #site-navigation-wrap{ display:flex !important; }
}

.page-header, .top-bar-wrap, .ocean-page-header, .page-title-wrap{
  background:linear-gradient(120deg, var(--op-navy) 0%, var(--op-teal) 100%) !important;
}
.page-header-title, .page-header h1, .page-header .entry-title{
  color:#fff !important;
  font-size:clamp(28px,4vw,42px) !important;
}

.wp-block-button__link, .button, button, input[type="submit"]{
  font-family:'Poppins', sans-serif;
  font-weight:600;
  border-radius:var(--op-radius) !important;
  padding:14px 30px !important;
  background:var(--op-cta) !important;
  border:none !important;
  color:#fff !important;
  transition:transform .15s ease, box-shadow .15s ease;
  box-shadow:0 6px 16px rgba(242,118,46,.30);
}
.wp-block-button__link:hover, .button:hover{
  transform:translateY(-2px);
  background:var(--op-cta-dark) !important;
}
.wp-block-button.is-style-outline .wp-block-button__link{
  background:transparent !important;
  color:var(--op-navy) !important;
  border:2px solid var(--op-navy) !important;
  box-shadow:none;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover{
  background:var(--op-navy) !important;
  color:#fff !important;
}

.op-hero{
  background:linear-gradient(120deg, var(--op-navy-dark), var(--op-navy) 60%, var(--op-teal));
  color:#fff;
  border-radius:0 0 40px 40px;
  padding:64px 32px;
  margin-bottom:48px;
}
.op-hero h1{ color:#fff !important; font-size:clamp(30px,4vw,46px) !important; margin-bottom:14px;}
.op-hero p{ color:#E7F2F2; font-size:18px; max-width:640px; }
.op-hero-badges{ display:flex; gap:28px; flex-wrap:wrap; margin-top:28px; }
.op-hero-badge{ font-family:'Poppins',sans-serif; font-weight:600; font-size:14px; display:flex; align-items:center; gap:8px;}

.op-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:24px; margin:32px 0; }
.op-card{
  background:#fff; border:1px solid #E3ECEC; border-radius:var(--op-radius);
  padding:28px 24px; box-shadow:0 4px 18px rgba(16,59,76,.05);
  transition:transform .2s ease, box-shadow .2s ease;
}
.op-card:hover{ transform:translateY(-4px); box-shadow:0 10px 26px rgba(16,59,76,.12); }
.op-card .op-icon{
  width:48px; height:48px; border-radius:12px; background:var(--op-teal-light);
  display:flex; align-items:center; justify-content:center; margin-bottom:16px; font-size:22px;
}
.op-card h3{ font-size:18px !important; margin:0 0 8px; }
.op-card p{ color:var(--op-muted); font-size:15px; margin:0; }

.op-team-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:28px; margin:32px 0; }
.op-team-card{ text-align:center; }
.op-team-card img{
  width:160px; height:160px; object-fit:cover; border-radius:50%;
  margin:0 auto 16px; border:4px solid var(--op-teal-light);
}
.op-team-card h4{ font-size:17px !important; margin:0 0 2px; }
.op-team-card span{ color:var(--op-teal); font-weight:600; font-size:13px; text-transform:uppercase; letter-spacing:.04em; }
.op-team-card p{ color:var(--op-muted); font-size:14px; margin-top:8px; }

.op-cta-banner{
  background:var(--op-teal-light); border-radius:var(--op-radius);
  padding:36px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px;
  margin:48px 0;
}
.op-cta-banner h3{ margin:0 0 6px; font-size:20px !important; }
.op-cta-banner p{ margin:0; color:var(--op-muted); }

.op-badge-row{ display:flex; gap:20px; flex-wrap:wrap; margin:24px 0; }
.op-badge{
  background:#fff; border:1px solid #E3ECEC; border-radius:999px;
  padding:10px 20px; font-size:14px; font-weight:600; color:var(--op-navy);
  display:flex; align-items:center; gap:8px;
}

#footer, #footer-widgets, #footer-bottom{
  background:var(--op-navy) !important;
  color:#CFE3E3;
}
#footer a{ color:#CFE3E3; }
#footer a:hover{ color:var(--op-cta); }
#footer h2, #footer h3, .widget-title{ color:#fff !important; }
#footer-bottom{ border-top:1px solid rgba(255,255,255,.12); }

.op-emoji-notice{
  background:#FFF4E8; border-left:4px solid var(--op-cta);
  padding:16px 20px; border-radius:10px; margin-bottom:24px;
}

@media (max-width:600px){
  .op-hero{ padding:40px 20px; border-radius:0 0 24px 24px; }
  .op-cta-banner{ flex-direction:column; align-items:flex-start; }
}