:root {

/* Base tokens -------------- */
	
	--sk-blue-50: #F0FCFF;
  --sk-blue-100: #D4E9F3;
  --sk-blue-200: #B4D4E6;
  --sk-blue-300: #8CBAD9;
  --sk-blue-400: #639ABD;
  --sk-blue-500: #2377A8;
  --sk-blue-600: #106491;
  --sk-blue-700: #004D74;
  --sk-blue-800: #003755;
  --sk-blue-900: #06293e;
  --sk-blue-950: #0f2432;
	
	--ultramarine: #00158A;
	--dark-grey: #141414;
	--light-grey: #f6f6f6;
	
/* UI tokens ------------------ */
	
	--bg-l1: var(--light-grey);
	--bg-l2: var(--sk-blue-100);
	--bg-l3: var(--sk-blue-300);
	--bg-button: #FFF;
	
	--primary-content:var(--sk-blue-900);
	--primary-content-inv:var(--sk-blue-50);
	--secondary-content:var(--sk-blue-700);
	--secondary-content-inv:var(--sk-blue-300);
	--dimmed-content:var(--sk-blue-500);
	
	--sharp-border:var(--sk-blue-500);
	--dimmed-border:var(--sk-blue-300);
	
	--bradius-xs: 6px;
	--bradius-s: 8px;
	
/* to be depricated */
	--dark-blue: #0B2A3B;
	--mid-blue: #113355;
	--clear-blue: #2377A8;
	--sky-blue: #D4E9F3;
	--light-blue: #EDF9FF;

	--text-main: var(--dark-blue);
	--text-link: var(--clear-blue);
	--text-inverted: var(--light-blue);
	
	--bg-l1: var(--light-grey);
	--bg-l2: var(--sky-blue);
}

#masthead .hgroup {
    zoom: 1;
    position: relative;
    padding-top: 0px; 
    padding-bottom: 0px; 
    height: 0px;
}

import { defineConfig } from '@pandacss/dev'
export default defineConfig({
 theme: {
 // Define your tokens here
  tokens: {
   extend: {
    colors: {
      darkblue:{ value:'#08374B' },
      midblue:{ value:'#248CC8' },
		  lightblue:{ value:'#DBEDF5' }
    }
   }
  }
 }
})

/* TEXT RELATED ---------------- */
h1, h2, h3, h4, h5, p, b, .vantage-carousel-title-text {
	color: var(--primary-content);
}

.member h3 {
	font-size: 18px;
}

.vantage-carousel-title-text {
	font-size:22px;
}
.site-footer p,.site-footer b,.site-footer h3 {
	color: #cccccc !important;
}

/* UPPFÖDARKORT  --------------- */

.card-header {
	align-items: flex-start;
	width: 100%;
}

.card-heading {
	position:relative;
	margin: 16px 0px 8px 0px !important;
	font-size: 1.8rem !important;	
	font-weight: bold;
}

.blue-card {
	background: var(--bg-l2);
	border-radius: var(--bradius-s);
	padding: 0px 16px !important;
	height: 100%;
}

/* UPPFÖDARLÄNKAR  ------------- */
.fab, .fas {
	width:24px;
	height: 24px;
	text-align: center;
}

a.social-link {
	padding: 4px 4px;
	background: var(--sk-blue-50);
	color: var(--primary-content);
	margin-left: 4px;
	border-radius: 6px;
}

a.social-link:hover {
	background: var(--sk-blue-800);
	color: var(--primary-content-inv);
}

/* Space between the card rows */
.additionalgrid {
	padding-top: 16px;
}	

/* LÄNKKORT -------------------- */

.linkcard {
	background: var(--bg-l2);
	border-radius: var(--bradius-s);
	padding: 24px;
	height: 100%;
}

.linkcard b {
	font-size: 16px;
}

.linkcard a {
	color: var(--primary-content);
	font-size: 22px;
	font-weight: bold;
	text-decoration:none;
}

.linkcard span:hover, .linkcard a:hover {
	margin-right: 8px;
	color: var(--sk-blue-500);
}
 
.linkcard span {
	vertical-align: middle;
	height:fit-content;
	display:flex;
}

/* SECTION HEADERS ------------ */

.sectionheader h2 {
	font-size: 24px;
	margin: 0px;
}

.sectionheader {
	background: var(--bg-l2) !important;
	color:#08374B !important;
}

/* ANNONSKORT ------------------ */

.annonscard {
	background-color: var(--bg-l2);
	border-radius: var(--bradius-s);
	height: 100%;
	overflow: hidden;
}

.annonscard h2 {
	font-size: 24px;
	margin-top:0px;
	margin-bottom: 0px;
}

.imgcontainer {
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
}

.annonscard img {
	flex-shrink: 0;
	height: 100% !important;
	width: 100% !important;
	min-width: 100%;
  min-height: 100%;
}

/* gör så att man enkelt kan få en av tassarna genom att bara kalla på img-klassen ist för att använda länk varje gång. */

.blackpaw{content:url("https://stockholmskattklubb.se/wp-content/uploads/2024/11/blackpaw.png");}

.greenpaw {content:url("https://stockholmskattklubb.se/wp-content/uploads/2024/11/Greenpaw.png");}

.yellowpaw {content:url("https://stockholmskattklubb.se/wp-content/uploads/2024/11/Yellowpaw.png");}

.orangepaw {content:url("https://stockholmskattklubb.se/wp-content/uploads/2024/11/Orangepaw.png");}

.certified {content:url("https://stockholmskattklubb.se/wp-content/uploads/2024/11/certifierad_symbol_webb_med_text.png");width: 50%;}


/* Tooltips! Används för pawpeds-grejerna på uppfödar-sidan. ---------- */

.tooltip {
		position: relative;
		display: inline-block;
}

.tooltip .tooltiptext {
		visibility: hidden;
		width: 120px;
		background-color: rgba(0, 0, 0, 0.7);
		color: #fff;
		text-align: center;
		border-radius: 6px;
		padding: 5px 0;
  /* Position the tooltip */
		position: absolute;
		z-index: 1;
		bottom: 100%;
		left: 50%;
		Margin-left: -60px;
}

.tooltip:hover .tooltiptext {
		visibility: visible;
}

/* Här under ligger CSS för att göra små-korrigeringar i temat -------- */

.startpage-icon {
		display: block;
		margin-left: auto;
		margin-right: auto;
		width: fit-content;
}

/* prev/next buttons on post slide */
.vantage-carousel-title a.next, .vantage-carousel-title a.previous {
		background: var(--sk-blue-800);
		color: var(--primary-content-inv);
		min-height: 24px;
		min-width: 24px;
		padding: 8px;
}

.vantage-carousel-title a.next:hover, .vantage-carousel-title a.previous:hover {
		background: var(--sk-blue-100);
		color: var(--primary-content);
}

/* class to add for content to temporarily hide */
.hidden {
		visibility: hidden;
		height: 0px;
}

/* jämnt space mellan inläggskarusellen på startsidan */
.entry-content ul li {
		margin-right: 37px !important;
}

body.responsive.layout-full #page-wrapper .full-container {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto
}