/*
Theme Name: HMK Brinje 2026
Theme URI: https://www.hmkbrinje.hr/
Author: M5-L4 / custom build
Description: Lightweight Elementor-ready theme for HMK Brinje with a BEAR5 2026 starter layout.
Version: 1.0.0
Requires at least: 6.3
Requires PHP: 7.4
Text Domain: hmk-brinje-2026
*/

:root {
  --hmk-orange: #f36b0a;
  --hmk-orange-2: #ff7a13;
  --hmk-black: #090909;
  --hmk-dark: #111111;
  --hmk-dark-2: #181818;
  --hmk-line: rgba(255,255,255,.12);
  --hmk-white: #ffffff;
  --hmk-muted: #b9b9b9;
  --hmk-max: 1240px;
}

.border-bottom { border-bottom: 2px solid #f36b0a;}

html { scroll-behavior: smooth; }
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--hmk-black);
  color: var(--hmk-white);
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.6;
  overflow-x: hidden;
}
a { color: inherit; }
img { max-width: 100%; height: auto; }

.hmk-site-header {
  position: sticky;
  top: 0;
  z-index: 999;
  background: rgba(9,9,9,.92);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--hmk-line);
}
.hmk-header-inner {
  width: min(calc(100% - 40px), var(--hmk-max));
  min-height: 82px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 28px;
}
.hmk-brand { display: inline-flex; align-items: center; text-decoration: none; min-width: 200px; }
.hmk-brand img { display: block; width: 190px; max-height: 65px; object-fit: contain; object-position: left center; }
.hmk-brand-text { font-weight: 900; letter-spacing: -.04em; font-size: 24px; }
.hmk-nav { margin-left: auto; }
.hmk-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 26px; align-items: center; }
.hmk-nav a { text-decoration: none; font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; transition: .2s ease; }
.hmk-nav a:hover, .hmk-nav .current-menu-item > a { color: var(--hmk-orange); }
.hmk-header-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 18px;
  text-decoration: none;
  background: var(--hmk-orange);
  color: #fff;
  font-weight: 900;
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: .06em;
  transform: skew(-4deg);
  transition: .2s ease;
}
.hmk-header-cta span { transform: skew(4deg); }
.hmk-header-cta:hover { background: #fff; color: #111; transform: skew(-4deg) translateY(-2px); }
.hmk-menu-toggle { display:none; margin-left:auto; width:46px; height:46px; padding:0; border:1px solid var(--hmk-line); background:transparent; color:#fff; cursor:pointer; }
.hmk-menu-toggle span, .hmk-menu-toggle::before, .hmk-menu-toggle::after { content:""; display:block; width:20px; height:2px; background:currentColor; margin:5px auto; transition:.2s ease; }

.hmk-content-area { min-height: 60vh; }
.hmk-default-wrap { width:min(calc(100% - 40px), var(--hmk-max)); margin:0 auto; padding:80px 0; }
.hmk-default-wrap h1 { font-size:clamp(42px,7vw,84px); line-height:.95; text-transform:uppercase; letter-spacing:-.04em; }

.hmk-site-footer {
  border-top: 1px solid var(--hmk-line);
  background: #070707;
  padding: 58px 0 26px;
}
.hmk-footer-inner { width:min(calc(100% - 40px), var(--hmk-max)); margin:0 auto; display:grid; grid-template-columns:1.2fr .8fr .8fr; gap:50px; }
.hmk-footer-logo { width:190px; margin-bottom:18px; }
.hmk-footer-title { font-size:13px; text-transform:uppercase; letter-spacing:.12em; color:var(--hmk-orange); font-weight:900; margin:0 0 14px; }
.hmk-footer-copy, .hmk-footer-inner a { color:#c7c7c7; font-size:14px; text-decoration:none; }
.hmk-footer-inner a:hover { color:#fff; }
.hmk-footer-bottom { width:min(calc(100% - 40px), var(--hmk-max)); margin:42px auto 0; padding-top:20px; border-top:1px solid var(--hmk-line); display:flex; justify-content:space-between; gap:20px; color:#858585; font-size:12px; }

/* Elementor starter styling */
.elementor-page .hmk-content-area { min-height: 0; }
.elementor-section.hmk-section, .e-con.hmk-section { padding: 110px 24px; }
.hmk-section > .elementor-container { max-width: var(--hmk-max); }
.hmk-kicker .elementor-heading-title,
.hmk-kicker { color:var(--hmk-orange)!important; font-size:12px!important; line-height:1.2!important; font-weight:900!important; text-transform:uppercase!important; letter-spacing:.15em!important; }
.hmk-title .elementor-heading-title,
.hmk-title { color:#fff!important; font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif!important; font-weight:400!important; text-transform:uppercase!important; line-height:.93!important; letter-spacing:.005em!important; }
.hmk-copy, .hmk-copy p { color:#c8c8c8!important; font-size:17px!important; line-height:1.7!important; }

.hmk-hero {
  position: relative;
  min-height: calc(100vh - 82px);
  display:flex;
  align-items:center;
  overflow:hidden;
  padding: 70px 24px!important;
  background-color:#090909!important;
  background-image:
    linear-gradient(90deg, rgba(0,0,0,.94) 0%, rgba(0,0,0,.76) 40%, rgba(0,0,0,.36) 72%, rgba(0,0,0,.58) 100%),
    url('https://www.hmkbrinje.hr/wp-content/uploads/2024/02/1-768x512.png')!important;
  background-size:cover!important;
  background-position:center!important;
}
.hmk-hero::before { content:""; position:absolute; inset:auto -5% 4% auto; width:42%; height:7px; background:var(--hmk-orange); transform:rotate(-3deg); opacity:.9; }
.hmk-hero::after { content:"BEAR V"; position:absolute; right:-2vw; bottom:-.13em; font:400 clamp(120px,21vw,360px)/.8 Impact, sans-serif; color:rgba(255,255,255,.025); letter-spacing:-.03em; pointer-events:none; }
.hmk-hero .elementor-container { position:relative; z-index:2; max-width:var(--hmk-max); }
.hmk-hero-title .elementor-heading-title { font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif!important; font-size:clamp(86px,12vw,190px)!important; line-height:.78!important; font-weight:400!important; letter-spacing:.005em!important; text-transform:uppercase!important; color:#fff!important; text-shadow:0 8px 30px rgba(0,0,0,.35); }
.hmk-hero-title .elementor-heading-title strong { color:var(--hmk-orange); font-weight:inherit; }
.hmk-hero-sub .elementor-heading-title { font-size:clamp(18px,2.2vw,30px)!important; color:#fff!important; font-weight:900!important; text-transform:uppercase!important; letter-spacing:.16em!important; }
.hmk-date-pill { display:inline-block; }
.hmk-date-pill .elementor-heading-title { display:inline-block; color:#fff!important; background:var(--hmk-orange); padding:8px 13px; font-size:13px!important; font-weight:900!important; text-transform:uppercase; letter-spacing:.08em; transform:skew(-4deg); }
.hmk-hero-copy { max-width:660px; }
.hmk-hero-copy, .hmk-hero-copy p { color:#d8d8d8!important; font-size:18px!important; }
.hmk-hero .elementor-button, .hmk-button .elementor-button { border-radius:0!important; background:var(--hmk-orange)!important; color:#fff!important; padding:16px 24px!important; font-weight:900!important; text-transform:uppercase!important; letter-spacing:.06em!important; font-size:13px!important; transition:.2s ease!important; transform:skew(-4deg); }
.hmk-hero .elementor-button .elementor-button-content-wrapper, .hmk-button .elementor-button .elementor-button-content-wrapper { transform:skew(4deg); }
.hmk-hero .elementor-button:hover, .hmk-button .elementor-button:hover { background:#fff!important; color:#111!important; transform:skew(-4deg) translateY(-2px); }
.hmk-button-outline .elementor-button { background:transparent!important; border:1px solid rgba(255,255,255,.5)!important; }
.hmk-button-outline .elementor-button:hover { background:#fff!important; border-color:#fff!important; color:#111!important; }
.hmk-promo-card img { border:1px solid rgba(255,255,255,.15); box-shadow:0 28px 80px rgba(0,0,0,.48); transform:rotate(1.6deg); }

.hmk-info-strip { background:var(--hmk-orange)!important; padding:22px 24px!important; }
.hmk-info-strip .elementor-heading-title { color:#fff!important; font-size:35px!important; text-transform:uppercase; letter-spacing:.08em; font-weight:900!important; }
.hmk-info-strip .elementor-widget-text-editor, .hmk-info-strip .elementor-widget-text-editor p { color:#fff!important; margin-bottom:0!important; }

.hmk-dark-section { background:#0d0d0d!important; }
.hmk-light-section { background:#f1eee9!important; }
.hmk-light-section .hmk-title .elementor-heading-title, .hmk-light-section .elementor-heading-title { color:#101010!important; }
.hmk-light-section .hmk-copy, .hmk-light-section .hmk-copy p, .hmk-light-section .elementor-widget-text-editor { color:#444!important; }

.hmk-card { background:#151515; border:1px solid var(--hmk-line); min-height:100%; padding:32px!important; position:relative; overflow:hidden; transition:.25s ease; }
.hmk-card::before { content:""; position:absolute; width:80px; height:4px; background:var(--hmk-orange); left:0; top:0; }
.hmk-card:hover { transform:translateY(-5px); border-color:rgba(243,107,10,.5); }
.hmk-card .elementor-heading-title { color:#fff!important; text-transform:uppercase; font-weight:900!important; }
.hmk-card .elementor-widget-text-editor, .hmk-card .elementor-widget-text-editor p { color:#bdbdbd!important; }
.hmk-card .elementor-button { background:none!important; color:var(--hmk-orange)!important; padding:0!important; font-weight:900!important; text-transform:uppercase!important; }

.hmk-schedule-day { background:#121212; border:1px solid var(--hmk-line); padding:0!important; min-height:100%; }
.hmk-schedule-day .elementor-widget-heading:first-child { background:#050505; border-bottom:4px solid var(--hmk-orange); padding:22px 24px; margin:0; }
.hmk-schedule-day .elementor-widget-heading:first-child .elementor-heading-title { color:#fff!important; font-size:22px!important; text-transform:uppercase; }
.hmk-schedule-day .elementor-widget-text-editor { padding:20px 24px 26px; color:#d2d2d2!important; }
.hmk-schedule-day ul { list-style:none; margin:0; padding:0; }
.hmk-schedule-day li { padding:11px 0; border-bottom:1px solid rgba(255,255,255,.08); }
.hmk-schedule-day li:last-child { border-bottom:0; }
.hmk-schedule-day strong { color:var(--hmk-orange); display:inline-block; min-width:95px; }

.hmk-photo img { width:100%; aspect-ratio:4/3; object-fit:cover; filter:saturate(.85) contrast(1.05); transition:.25s ease; }
.hmk-photo:hover img { transform:scale(1.02); filter:saturate(1) contrast(1.08); }
.hmk-poster img { width:100%; height:auto; }

.hmk-big-number .elementor-heading-title { color:var(--hmk-orange)!important; font-family:Impact, sans-serif!important; font-size:70px!important; line-height:1!important; font-weight:400!important; }
.hmk-stat-label .elementor-heading-title { color:#fff!important; font-size:13px!important; text-transform:uppercase; letter-spacing:.08em; }

.hmk-contact-panel { background:var(--hmk-orange)!important; padding:55px!important; }
.hmk-contact-panel .elementor-heading-title, .hmk-contact-panel .elementor-widget-text-editor, .hmk-contact-panel .elementor-widget-text-editor p, .hmk-contact-panel a { color:#fff!important; }
.hmk-contact-panel .elementor-button { background:#111!important; color:#fff!important; }

.hmk-page-hero { padding:105px 24px 80px!important; background:#0c0c0c!important; border-bottom:1px solid var(--hmk-line); position:relative; overflow:hidden; }
.hmk-page-hero::after { content:""; position:absolute; width:42%; height:9px; background:var(--hmk-orange); right:-6%; bottom:18%; transform:rotate(-4deg); }
.hmk-page-hero .elementor-container { position:relative; z-index:1; }

@media (max-width: 1024px) {
  .hmk-header-cta { display:none; }
  .hmk-menu-toggle { display:block; }
  .hmk-nav { position:absolute; left:0; right:0; top:82px; background:#0b0b0b; border-bottom:1px solid var(--hmk-line); padding:24px; display:none; }
  .hmk-site-header.is-open .hmk-nav { display:block; }
  .hmk-nav ul { display:flex; flex-direction:column; align-items:flex-start; gap:16px; width:min(100%, var(--hmk-max)); margin:0 auto; }
  .hmk-footer-inner { grid-template-columns:1fr 1fr; }
  .elementor-section.hmk-section, .e-con.hmk-section { padding:82px 22px; }
}
@media (max-width: 767px) {
  .hmk-header-inner { width:min(calc(100% - 28px), var(--hmk-max)); min-height:72px; }
  .hmk-brand { min-width:0; }
  .hmk-brand img { width:150px; max-height:52px; }
  .hmk-nav { top:72px; }
  .hmk-hero { min-height:auto; padding:74px 20px 62px!important; background-position:62% center!important; }
  .hmk-hero::after { display:none; }
  .hmk-hero-title .elementor-heading-title { font-size:clamp(68px,24vw,120px)!important; }
  .hmk-hero-sub .elementor-heading-title { font-size:17px!important; letter-spacing:.1em!important; }
  .elementor-section.hmk-section, .e-con.hmk-section { padding:64px 18px; }
  .hmk-contact-panel { padding:32px!important; }
  .hmk-footer-inner { grid-template-columns:1fr; gap:30px; }
  .hmk-footer-bottom { flex-direction:column; }
}

.hmk-hero .elementor-widget-button,
.hmk-page-hero .elementor-widget-button,
.hmk-light-section .elementor-widget-button { display:inline-block; width:auto; margin-right:10px; margin-bottom:10px; }
.hmk-info-strip .elementor-column { border-right:1px solid rgba(255,255,255,.28); }
.hmk-info-strip .elementor-column:last-child { border-right:0; }
.hmk-info-strip .elementor-widget-wrap { padding:4px 20px; }
@media (max-width:767px) {
  .hmk-hero .elementor-widget-button,
  .hmk-page-hero .elementor-widget-button,
  .hmk-light-section .elementor-widget-button { display:block; margin-right:0; }
  .hmk-info-strip .elementor-column { border-right:0; border-bottom:1px solid rgba(255,255,255,.28); }
  .hmk-info-strip .elementor-column:last-child { border-bottom:0; }
}


/* =========================================================
   HMK BRINJE / BEAR – DODATNI STILOV
   ========================================================= */


/* ---------------------------------------------------------
   1. STATISTIKA – 300+ / 3 / 2 / 2
   Kose crte između brojki + malo više "race" izgleda
   --------------------------------------------------------- */

.hmk-big-number {
    position: relative;
}

.hmk-big-number::after {
    content: "/";
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-52%) skewX(-10deg);
    font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
    font-size: 72px;
    line-height: 1;
    font-weight: 400;
    color: rgba(255, 255, 255, .10);
    pointer-events: none;
}

/* zadnji broj nema kosu crtu */
.elementor-column:last-child .hmk-big-number::after {
    display: none;
}

/* malo više prostora oko statistike */
.hmk-big-number .elementor-heading-title {
    transition: transform .25s ease;
}

.elementor-column:hover > .elementor-widget-wrap > .hmk-big-number .elementor-heading-title {
    transform: translateX(5px);
}

.hmk-stat-label {
    position: relative;
}

.hmk-stat-label::after {
    content: "";
    display: block;
    width: 34px;
    height: 3px;
    margin-top: 13px;
    background: var(--hmk-orange);
    transform: skewX(-25deg);
    transition: width .25s ease;
}

.elementor-column:hover > .elementor-widget-wrap > .hmk-stat-label::after {
    width: 60px;
}


/* ---------------------------------------------------------
   2. RASPORED / PRIJAVA / SUDIONICI
   Bolji kontrast gumba na svijetloj pozadini
   --------------------------------------------------------- */

.hmk-light-section .hmk-button .elementor-button {
    border: 2px solid var(--hmk-orange) !important;
    background: var(--hmk-orange) !important;
    color: #fff !important;
}

.hmk-light-section .hmk-button .elementor-button:hover {
    background: #111 !important;
    border-color: #111 !important;
    color: #fff !important;
}


/* SUDIONICI + WAITING LIST */
.hmk-light-section .hmk-button-outline .elementor-button {
    background: transparent !important;
    border: 2px solid #111 !important;
    color: #111 !important;
}

.hmk-light-section .hmk-button-outline .elementor-button:hover {
    background: #111 !important;
    border-color: #111 !important;
    color: #fff !important;
}


/* ---------------------------------------------------------
   3. GUMBI – držimo ih jedan kraj drugoga
   --------------------------------------------------------- */

.hmk-light-section .elementor-widget-button {
    display: inline-block !important;
    width: auto !important;
    max-width: max-content;
    margin-right: 10px;
    margin-bottom: 10px;
}

.hmk-light-section .elementor-button {
    min-height: 48px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}


/* ---------------------------------------------------------
   4. POSTER RASPOREDA
   Malo ga odvojimo od bijele/svijetle pozadine
   --------------------------------------------------------- */

.hmk-light-section .hmk-poster img {
    box-shadow: 0 18px 45px rgba(0, 0, 0, .13);
    border: 1px solid rgba(0, 0, 0, .08);
    transition: transform .3s ease, box-shadow .3s ease;
}

.hmk-light-section .hmk-poster:hover img {
    transform: translateY(-4px) rotate(-.3deg);
    box-shadow: 0 25px 60px rgba(0, 0, 0, .18);
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 767px) {

    /* na mobitelu maknemo velike kose separatore */
    .hmk-big-number::after {
        display: none;
    }

    .hmk-big-number {
        padding-top: 20px;
        border-top: 1px solid rgba(255,255,255,.12);
    }

    .hmk-light-section .elementor-widget-button {
        display: block !important;
        width: 100% !important;
        max-width: none;
        margin-right: 0;
        margin-bottom: 10px;
    }

    .hmk-light-section .elementor-button {
        width: 100%;
    }
}



/* ---------------------------------------------------------
   HEADER SOCIAL ICONS
--------------------------------------------------------- */

.hmk-header-socials {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-left: 8px;
}

.hmk-header-socials a {
    width: 38px;
    height: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 50%;

    color: #fff;

    transition:
        background-color .25s ease,
        border-color .25s ease,
        transform .25s ease;
}

.hmk-header-socials a svg {
    width: 17px;
    height: 17px;

    fill: currentColor;
}

.hmk-header-socials a:hover {
    background: #fff;
    border-color: #fff;
    color: #111;

    transform: translateY(-2px);
}