/* ==========================================================================
   custom.css — site-specific overrides for hugo-universal-theme
   Place this file at: static/css/custom.css (in your Hugo SITE, not theme)
   Loaded automatically after the theme's style-*.css (per theme README).
   ========================================================================== */
/* --------------------------------------------------------------------------
   0. CI Colors:
   -------------------------------------------------------------------------- */
:root{  
  --color-ci-accent-light:      #B7E430;
  --color-ci-accent-dark:       #123B3A;
  --color-ci-off-white:         #f7f5ee;
  --color-ci-anthracite:        #1d2022;

  
  --color-ci-shade-5:             var(--color-ci-off-white);
  --color-ci-shade-4:           #c6c5c1;
  --color-ci-shade-3:           #989895;
  --color-ci-shade-2-5-neutral: #818280;
  --color-ci-shade-2:           #6b6d6c;
  --color-ci-shade-1:           #424545;
  --color-ci-shade-0:             var(--color-ci-anthracite);
  --color-ci-shade-n1:          #020305;

  /* Neutrals with constistent OK - lightness values (OKLAB / OKLCH) */
    
  --color-neutral-100:          #ffffff;
  --color-neutral-098:          #f8f8f8;
  --color-neutral-095:          #eeeeee;
  --color-neutral-090:          #dedede;
  --color-neutral-085:          #cecece;
  --color-neutral-080:          #bebebe;
  --color-neutral-075:          #aeaeae;
  --color-neutral-070:          #9e9e9e;
  --color-neutral-065:          #8f8f8f;
  --color-neutral-060:          #808080;
  --color-neutral-055:          #717171;
  --color-neutral-050:          #636363;
  --color-neutral-045:          #555555;
  --color-neutral-040:          #484848;
  --color-neutral-035:          #3a3a3a;
  --color-neutral-030:          #2e2e2e;
  --color-neutral-025:          #222222;
  --color-neutral-020:          #161616;
  --color-neutral-015:          #0b0b0b;
  --color-neutral-010:          #030303;
  --color-neutral-000:          #000000;
}

/* --------------------------------------------------------------------------
   1. FONTS
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Sora";
  src: url("/fonts/Sora-VariableFont_wght.woff2") format("truetype");
  font-weight: 100 900; /* Range of weights supported */
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("/fonts/Manrope-VariableFont_wght.woff2") format("truetype");
  font-weight: 100 900; /* Range of weights supported */
  font-display: swap;
}

:root {
  --font-body: "Sora" ;   /* theme default */
  --font-heading: "Manrope" ; /* set a different font here if desired */
}

body {
  font-family: var(--font-body);
}

h1, h2, h3, h4, h5, h6,
.navbar-brand {
  font-family: var(--font-heading);
}

/* --------------------------------------------------------------------------
   2. COLORS — LIGHT MODE (default)
   These override the theme's :root variables from style_default.css.
   -------------------------------------------------------------------------- */

:root {
  /* --- theme's original 8 variables --- */
  --primary-accent:     var(--color-ci-accent-dark);
  --navbar-border-top:  color-mix(in srgb, var(--color-ci-accent-dark) 90%, transparent);
  --button-border:      var(--color-ci-accent-light);
  --link-focus:         var(--color-ci-accent-light);
  --form-shadow:        color-mix(in srgb, var(--color-ci-accent-dark) 90%, transparent);
  --pagination-bg:      color-mix(in srgb, var(--color-ci-accent-dark) 30%, transparent);
  --link-hover-bg:      color-mix(in srgb, var(--color-ci-accent-dark) 30%, transparent);
  --navbar-focus:       color-mix(in srgb, var(--color-ci-accent-dark) 30%, transparent);

  /* --- neutrals (grepped from every hardcoded hex in style_default.css,
         owl_theme.css, owl_carousel.css — grouped by role) --- */
  --color-bg:           var(--color-neutral-100); /* #fff/#ffffff/#FFFFFF: panels, boxes, product, pagination, dropdown-menu, navbar-default */
  --color-bg-alt:       var(--color-neutral-095); /* #f7f7f7/#eeeeee/#f5f5f5/#e5e5e5/#e6e6e6: #top, footer headings, box headers, categoryMenu, pager, progress */
  --color-text:         var(--color-neutral-030); /* #555555/#333333/#3b3b3b: body text, headings, navbar links, box-simple/team/blog titles */
  --color-text-muted:   var(--color-neutral-060); /* #999999/#777777/#888888/#666: paragraph/date/price text, navbar-toggle icon, breadcrumb active */
  --color-border:       var(--color-neutral-010); /* #ccc/#cccccc/#ddd/#dddddd/#d5d5d5/#bbb: navbar-default border, dropdown border, pagination border, ribbon border */
  --color-black:        var(--color-neutral-000); /* #000/#000000: ribbon shadow, .bar dark-mask overlay */

  --color-footer:       var(--color-neutral-070);
  --color-copyright:    var(--color-neutral-060);
  
  --color-heading:      var(--color-neutral-050);
  --color-hover:        var(--color-neutral-000);

  /* --- social icons (hardcoded in theme; exposed here so you CAN override) --- */
  --social-facebook:    #4460ae;
  --social-gplus:       #c21f25;
  --social-instagram:   #cd4378;
  --social-email:       #4a7f45;

  /* --- ribbon badges --- */
  --ribbon-new:         #5bc0de;
  --ribbon-new-dark:    #2390b0;
  --ribbon-gift:        #5cb85c;
  --ribbon-gift-dark:   #357935;
}

/* --------------------------------------------------------------------------
   3. COLORS — DARK MODE
   Automatically applied when the visitor's OS/browser prefers dark.
   -------------------------------------------------------------------------- */

/*
@media (prefers-color-scheme: dark) {
  :root {
  --primary-accent:     var(--color-ci-accent-dark);
  --navbar-border-top:  color-mix(in srgb, var(--color-ci-accent-dark) 90%, transparent);
  --button-border:      var(--color-ci-accent-light);
  --link-focus:         var(--color-ci-accent-light);
  --form-shadow:        color-mix(in srgb, var(--color-ci-accent-dark) 90%, transparent);
  --pagination-bg:      color-mix(in srgb, var(--color-ci-accent-dark) 30%, transparent);
  --link-hover-bg:      color-mix(in srgb, var(--color-ci-accent-dark) 30%, transparent);
  --navbar-focus:       color-mix(in srgb, var(--color-ci-accent-dark) 30%, transparent);

  --color-bg:           var(--color-neutral-020); 
  --color-bg-alt:       var(--color-neutral-030); 
  --color-text:         var(--color-neutral-090); 
  --color-text-muted:   var(--color-neutral-060); 
  --color-border:       var(--color-neutral-020); 
  --color-black:        var(--color-neutral-020); 

  --color-footer:       var(--color-neutral-070);
  --color-copyright:    var(--color-neutral-060);
  
  --color-heading:      var(--color-neutral-050);
  --color-hover:        var(--color-neutral-000);

  --social-facebook:    #4460ae;
  --social-gplus:       #c21f25;
  --social-instagram:   #cd4378;
  --social-email:       #4a7f45;

  --ribbon-new:         #5bc0de;
  --ribbon-new-dark:    #2390b0;
  --ribbon-gift:        #5cb85c;
  --ribbon-gift-dark:   #357935;
  }
}
*/

/* --------------------------------------------------------------------------
   4. APPLY NEUTRALS
   Every selector below was grepped directly from style_default.css /
   owl_theme.css / owl_carousel.css for hardcoded grey/white/black values,
   then grouped by role. Comments show which original hex value(s) each
   selector used, so you can trace it back if something looks off.
   -------------------------------------------------------------------------- */

/* --- base --- */
body { /* was #555555 */
  background-color: var(--color-bg);
  color: var(--color-text);
}
a { color: var(--primary-accent); }
hr { border-color: var(--color-bg-alt); } /* was #eeeeee */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: #333333; } /* kept as-is: heading-specific tone */
.breadcrumb > li + li:before { color: var(--color-text); }
.breadcrumb > .active { color: var(--color-text-muted); }

/* --- #top bar --- */
#top { color: var(--color-text); border-color: var(--color-bg-alt); }
#top .social a { color: var(--color-text-muted); }
#top .social a:hover { color: var(--color-bg); }
#top .login a { color: var(--color-bg-alt); }
#top.light { color: var(--color-bg); }
#top.light .social a { color: var(--color-text-muted); }
#top.light .login a { color: var(--color-text); }

/* --- navbar-default --- */
.navbar-default {
  background-color: var(--color-bg);
  border-color: var(--color-border);
}
.navbar-default .navbar-brand,
.navbar-default .navbar-nav > li > a,
.navbar-default .navbar-nav .open .dropdown-menu > li > a,
.navbar-default .navbar-link,
.navbar-default .btn-link {
  color: var(--color-text);
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
  color: var(--color-text);
}
.navbar-default .navbar-text { color: var(--color-text-muted); }
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a {
  background-color: var(--color-bg);
  color: var(--color-text);
}
.navbar-default .navbar-nav > .disabled > a,
.navbar-default .navbar-nav .open .dropdown-menu > .disabled > a,
.navbar-default .btn-link[disabled]:hover {
  color: var(--color-border);
}
.navbar-default .navbar-toggle { border-color: var(--color-border); }
.navbar-default .navbar-toggle .icon-bar { background-color: var(--color-text-muted); }
.navbar-default .navbar-collapse,
.navbar-default .navbar-form { border-color: var(--color-border); }
.navbar .btn-default,
.navbar .btn-default.navbar-toggle { color: var(--color-text-muted); background-color: var(--color-bg); }
.navbar .btn-default:hover,
.navbar .btn-default.navbar-toggle:hover { background-color: var(--color-bg); }
.navbar ul.dropdown-menu li,
.navbar .yamm-content ul li { border-color: var(--color-bg-alt); }
.navbar ul.dropdown-menu li a,
.navbar .yamm-content ul li a { color: var(--color-text-muted); }
.navbar .yamm-content h3,
.navbar .yamm-content h5 { color: var(--color-text); }
.navbar.navbar-light ul.nav > li.active > a,
.navbar.navbar-light ul.nav > li > a:hover,
.navbar.navbar-light ul.nav > li.open > a:hover,
.navbar.navbar-light ul.nav > li > a:focus,
.navbar.navbar-light ul.nav > li.open > a:focus {
  background-color: var(--color-bg);
  color: var(--color-text);
}
.navbar-affixed-top.affix { border-color: var(--color-border); }

/* --- dropdown menus --- */
.dropdown-menu {
  background-color: var(--color-bg);
  border-color: var(--color-border);
  box-shadow: 0 6px 12px var(--form-shadow);
}
.dropdown-menu .divider { background-color: var(--color-bg-alt); }
.dropdown-menu > li > a { color: var(--color-text); }

/* --- nav-tabs / nav-pills --- */
.nav > li > a:hover, .nav > li > a:focus,
.nav .open > a, .nav .open > a:hover, .nav .open > a:focus,
.nav-tabs > li > a:hover {
  background-color: var(--color-bg-alt);
}
.nav > li.disabled > a,
.nav > li.disabled > a:hover,
.nav > li.disabled > a:focus {
  color: var(--color-text-muted);
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  color: var(--color-text);
  background-color: var(--color-bg);
}
.tab-content { border-color: var(--color-border); }

/* --- pagination / pager --- */
.pager { border-color: var(--color-bg-alt); }
.pager li > a, .pager li > span { background-color: var(--color-bg); }
.pager li > a:hover, .pager li > a:focus { color: var(--color-bg); }
.pager .disabled > a, .pager .disabled > a:hover, .pager .disabled > a:focus, .pager .disabled > span {
  color: var(--color-text-muted);
  background-color: var(--color-bg);
  border-color: var(--color-border);
}
.pagination > li > a, .pagination > li > span {
  background-color: var(--color-bg);
  border-color: var(--color-border);
}
.pagination > li > a:hover, .pagination > li > span:hover,
.pagination > li > a:focus, .pagination > li > span:focus {
  border-color: var(--color-border);
}
.pagination > .disabled > span, .pagination > .disabled > a {
  color: var(--color-text-muted);
  background-color: var(--color-bg);
  border-color: var(--color-border);
}

/* --- panels / boxes / cards --- */
.panel { background-color: var(--color-bg); border-color: var(--color-border); }
.panel-group.accordion .panel { border-color: var(--color-border); }
.box, .box-simple {
  background-color: var(--color-bg);
  border-color: var(--color-border);
}
.box .box-header, .box .box-footer,
#categoryMenu h3 {
  background-color: var(--color-bg-alt);
  border-color: var(--color-bg-alt);
}
.box-simple h3, .box-simple h3 a { color: var(--color-text); }
.box-simple p, .box-simple.box-white { color: var(--color-text-muted); }
.box-simple.box-white .icon { color: var(--color-text); }
.box-simple.box-dark { background-color: var(--color-text); color: var(--color-bg-alt); }
.box-simple.box-dark .icon { color: var(--color-bg-alt); }
.box-simple.box-dark h3, .box-simple.box-dark h3 a, .box-simple.box-dark p { color: var(--color-bg); }
.box-image-text .content h3, .box-image-text .content h4 { color: var(--color-text); }
.box-image-text .content p { color: var(--color-text-muted); }

/* --- panel-heading / sidebar-menu --- */
.panel.sidebar-menu { background-color: var(--color-bg); }
.panel.sidebar-menu .panel-heading .btn.btn-danger { color: var(--color-bg); }
.panel.sidebar-menu .panel-body span.colour { color: var(--color-text); }
.panel.sidebar-menu .panel-body span.colour.white { color: var(--color-bg); }
.panel.sidebar-menu .panel-body label,
.panel.sidebar-menu ul.nav ul li a,
.panel.sidebar-menu ul.popular li p.date,
.panel.sidebar-menu ul.recent li p.date {
  color: var(--color-text-muted);
}
.panel.sidebar-menu .panel-body label:hover { color: var(--color-text); }
.panel.sidebar-menu ul.nav ul li a:hover,
.panel.sidebar-menu ul.nav ul li a:focus,
.panel.sidebar-menu ul.tag-cloud li a,
.panel.sidebar-menu ul.popular li,
.panel.sidebar-menu ul.recent li {
  background-color: var(--color-bg-alt);
}

/* --- testimonials / team members --- */
.testimonials .item { background-color: var(--color-bg); }
.testimonials .item .testimonial .text,
.testimonials .item .testimonial .name-picture p,
.team-member p.role, .team-member .text p {
  color: var(--color-text-muted);
}
.team-member h3 a { color: var(--color-text); }
.team-member .social a, .team-member-detail .social a { color: var(--color-bg); }

/* --- blog listings --- */
#blog-listing-big .post h2 a, #blog-homepage .post h2 a,
#blog-listing-big .post h4 a, #blog-homepage .post h4 a,
#blog-listing-medium .post h2 a {
  color: var(--color-text);
}
#blog-listing-big .post .author-category, #blog-homepage .post .author-category,
#blog-listing-big .post .date-comments a, #blog-homepage .post .date-comments a,
#blog-listing-medium .post .author-category,
#blog-listing-medium .post .date-comments a,
.box-image-text.blog .author-category,
#blog-post .comment .posted {
  color: var(--color-text-muted);
}
#blog-post #comments, #blog-post #comment-form { border-color: var(--color-bg-alt); }

/* --- product listings --- */
.product { background-color: var(--color-bg); border-color: var(--color-bg-alt); }
.product .text h3 a { color: var(--color-text); }
.product .text p.price del,
.goToDescription a,
#order-summary table td {
  color: var(--color-text-muted);
}
.product:hover { border-color: var(--color-hover); }
#productMain .sizes a { border-color: var(--color-border); color: var(--color-text); }
#productMain .sizes a.active, #productMain .sizes a:hover { color: var(--color-bg); }
#product-social p a { color: var(--color-bg); }
#order-summary table tr.total td, #order-summary table tr.total th { color: var(--color-text); }

/* --- footer / copyright / style-switch --- */
#footer, #footer .blog-entries .item, #footer .social a {
  background-color: var(--color-footer);
  color: var(--color-text);
}
#footer h1, #footer h2, #footer h3, #footer h4, #footer h5, #footer h6,
#footer .photostream div a,
#footer .blog-entries .item .name h5 a {
  color: var(--color-bg-alt);
}
#footer ul a { color: var(--color-text-muted); }
#copyright { background-color: var(--color-copyright); color: var(--color-border); }
#style-switch { background-color: var(--color-bg); border-color: var(--color-bg-alt); }

/* --- bars / jumbotron / ribbons --- */
.bar.background-gray { background-color: var(--color-bg-alt); }
.bar.background-gray-dark { background-color: var(--color-text); }
.bar.background-white { background-color: var(--color-bg); }
.bar .dark-mask { background-color: var(--color-black); }
.jumbotron > hr { border-color: var(--color-border); }
.ribbon .theribbon { color: var(--color-bg); }
.ribbon .theribbon:after { border-color: var(--color-black) var(--color-black) transparent transparent; }
.ribbon.new .theribbon, .ribbon.gift .theribbon { border-color: var(--color-border); }

/* --- misc: pages-listing, heading-breadcrumbs, showcase, packages --- */
.pages-listing .item h3 a { color: var(--color-text); }
.pages-listing .item .text p { color: var(--color-text-muted); }
#heading-breadcrumbs h1 { color: var(--color-heading); }
.showcase .item .icon, .showcase .item h4,
.portfolio-project .project-more h4,
.portfolio-showcase p.lead {
  color: var(--color-text);
}
.portfolio-project .project-more p, .portfolio-showcase p { color: var(--color-text-muted); }
.packages .package { background-color: var(--color-bg); }
.packages .package .package-header.light-gray { background-color: var(--color-bg-alt); color: var(--color-text); }
.packages .package .price .period { color: var(--color-text-muted); }
.packages .package ul li { border-color: var(--color-border); }

/* --- owl carousel dots --- */
.home-carousel .owl-theme .owl-controls .owl-page span { background-color: #666; }

/* --------------------------------------------------------------------------
   5. SOCIAL ICONS + RIBBONS
   Rewiring the theme's hardcoded hex colors to the variables above.
   -------------------------------------------------------------------------- */

#top .social a:hover.facebook,
.team-member .social a.facebook {
  background-color: var(--social-facebook);
}

#top .social a:hover.gplus,
.team-member .social a.gplus {
  background-color: var(--social-gplus);
}

#top .social a:hover.instagram,
.team-member .social a.instagram {
  background-color: var(--social-instagram);
}

#top .social a:hover.email,
.team-member .social a.email {
  background-color: var(--social-email);
}

.ribbon.new .theribbon {
  background-color: var(--ribbon-new);
}
.ribbon.new .theribbon:after {
  border-color: var(--ribbon-new-dark) var(--ribbon-new-dark) transparent transparent;
}

.ribbon.gift .theribbon {
  background-color: var(--ribbon-gift);
}
.ribbon.gift .theribbon:after {
  border-color: var(--ribbon-gift-dark) var(--ribbon-gift-dark) transparent transparent;
}

/* --------------------------------------------------------------------------
   6. LANG SWITCHER
   -------------------------------------------------------------------------- */

/* toggle: nudge the flag to sit on the same baseline as the text nav items,
   without touching height/display (avoids the flex+height:100% blow-up) */
.lang-switcher .dropdown-toggle,
.lang-switcher .dropdown-toggle:hover,
.lang-switcher .dropdown-toggle:focus {
  text-decoration: none !important;
}
.lang-switcher .fi {
  display: inline-block;
  vertical-align: -2px;
  line-height: 1;
  font-size: 1.2em;
  border-radius: 2px;
}

/* dropdown panel */
.lang-dropdown { min-width: auto; right: 0; left: auto; }

/* dropdown items: color set explicitly so nothing inherits white from
   Bootstrap's default .dropdown-menu > .active > a rule */
.lang-dropdown .lang-option,
.lang-dropdown .lang-option:visited {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 15px;
  color: var(--color-text);
  background-color: transparent;
}
.lang-dropdown .lang-option.active {
  font-weight: bold;
  color: var(--color-text) !important;
  background-color: var(--color-bg-alt) !important;
}
.lang-dropdown .lang-option:hover,
.lang-dropdown .lang-option:focus {
  color: var(--color-text);
  background-color: var(--color-bg-alt);
}

/* --------------------------------------------------------------------------
   7. YOUR EXISTING CUSTOMIZATIONS (carried over from your current custom.css)
   -------------------------------------------------------------------------- */

.box-image-text .image {
  min-height: 190px;
  max-height: 190px;
}

.box-image-text .image img {
  max-height: 190px;
  margin: auto;
}

.box-simple {
  min-height: 230px;
}

/* --------------------------------------------------------------------------
   8. PROFILE PICTURE HEIGHT
   -------------------------------------------------------------------------- */

.profile {
  display: flex;
  align-items: flex-start;
  gap: 40px;
}

.profile-image {
  flex: 0 0 33.333%;
}

.profile-image img {
  display: block;
  width: 100%;
  height: auto;
}

/* Mobil */
@media (max-width: 767px) {
  .profile {
    display: block;
  }

  .profile-image {
    width: 66.666%;
    margin: 0 auto 30px;
  }

  .profile-image img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 50%;
  }
}

/* --------------------------------------------------------------------------
   9. Custom layouting
   -------------------------------------------------------------------------- */


.row-last {
    display: flex;
    justify-content: center;
}


html {
    scrollbar-gutter: stable;
}

/*
html {
    scrollbar-width: none; 
}

html::-webkit-scrollbar {
    display: none; 
}
*/

.jumbotron,
.home-carousel {
  background: url('/img/texture-bw.png') center center repeat;
}
.home-carousel .dark-mask {
  opacity: 0.8;
  filter: alpha(opacity=80);
}

.carousel-column {
  margin-left: 2rem;
  margin-right: 2rem;
}

.customers .owl-wrapper {
    display: flex !important;
    align-items: center;
}

/* Main logo (visible on medium/large screens) */
.hidden-xs.hidden-sm {
  height: auto; /* Let the logo scale naturally */
  max-height: 50px; /* Cap at navbar height */
  width: auto;
  max-width: 100%;
  margin: 0 15px; /* Add horizontal margin for spacing */
  object-fit: contain; /* Ensure proper scaling */
}

/* Small logo (visible on mobile/extra-small screens) */
.visible-xs,
.visible-sm {
  height: auto; /* Let the logo scale naturally */
  max-height: 45px !important; /* Cap at navbar height */
  width: auto;
  max-width: 100%;
  margin: 0 15px; /* Add horizontal margin for spacing */
  object-fit: contain; /* Ensure proper scaling */
}