/*
Theme Name: Proud Scotland Awards
Author: unavoided
Version: 2.0
Text Domain: proud scotland awards
*/



* {margin:0; padding:0;  font-family: change, sans-serif; font-weight: 400; color: #17132e;  font-style: normal;  }
html {background:#fff; height:100%; overflow-x: hidden;}
body {height:100%;}

h1 { font-size: 45px;  margin-bottom: 3%; }
h2 { font-size: 36px; margin-bottom: 3%;}
h3 { font-size: 27px; margin-bottom: 3%;}

p {margin-bottom: 3%; font-size: 18px}

.oskar {font-family: oskar, sans-serif; }
.italic, em {font-style: italic !;}
.whitetext, .whitetext p, .whitetext h3, .whitetext h2 {color: #fff;}
.gradient-title {  background: linear-gradient(	135deg,	#1c2d80,	#007d7a,	#28a745,	#cfdc00,	#ffcf00,	#ff7a00,	#e01b2d,	#ff1f77,	#b0178c,	#4b1a72  );  -webkit-background-clip: text;  -webkit-text-fill-color: transparent;  background-clip: text;  color: transparent;
}

.centered {text-align: center;}
.home .pagetitle { bottom: 30% !important; }
.pagetitle {position: absolute; bottom: 10% !important; left: 0 ;right: 0; margin: auto; font-weight: 700; font-style: italic;}


.blue {background: #17132e;}
.tartan {background: url(images/banner.png); background-size: cover;}
.tartanbutton {background: url(images/tartanbutton.png) ; background-size: cover; padding: 30px 40px; display: inline-block; font-family: oskar, sans-serif; color: #fff; margin: 40px 0 0; font-size: 36px; text-decoration: none; }

/*header*/
header.main {  z-index: 1001; height: 320px; width: 94%; padding:0 3% ; position: absolute; z-index: 1; }
header.main .menu-btn { display: none;}
header.main .menu-icon {display: none;}

.hidemenu {display: none !important;}

header main { margin: auto !important; position: relative;  max-width: 1200px;	width: 94%;}
.page main { padding:3% 0; margin: auto; position: relative;  max-width: 1200px;	width: 94%;}
header main {padding: 0 !important}
section.content {padding: 3%;}

header.main .logolink {display: inline-block; width: 218px; position: absolute; }
header.main .logolink img { padding: 10% 0 0;	  height: 130px; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; -ms-transition: all 0.5s ease;  transition: all 0.5s ease;}

header.main .main-menu {height: 95px;display: flex;justify-content: flex-end;align-items: center;}
/* Top-level UL — works whether .main-menu is a wrapper OR the UL itself */
header.main .main-menu > ul,
header.main ul.main-menu{  display: flex;  align-items: center;  justify-content: flex-end;  gap: 20px;  height: 95px;  margin: 0;  padding: 0;  list-style: none;}
/* Submenus */
header.main .main-menu ul ul,header.main ul.main-menu ul{  display: block;  height: auto;}
/* Top-level */
header.main .main-menu > ul > li,header.main ul.main-menu > li{  position: relative;  display: flex;  align-items: center;  margin: 0;  padding: 0;  line-height: normal; }


header.main .main-menu li a {color: #17132e; font-size:20px; padding: 40px 10px;  text-decoration: none; font-family: oskar, sans-serif;  font-weight: 300; 
	transition: 	color 0.3s ease,	background-color 0.3s ease,	text-decoration-color 0.3s ease;}
header.main .main-menu li:hover a {text-decoration: underline; color: #fff; background: #17132e; }
 .current-menu-item a {text-decoration: underline; color: #fff !important; background: #17132e}

.menu-close {visibility: hidden;}

/* SUBMENU */
header.main .main-menu li { position: relative; }
/* The big white dropdown panel */
.bb-submenu-panel {  position: absolute;  top: 40px;    left: 0;  width: 320px;  background: #fff;  border-radius: 12px;  overflow: hidden;  box-shadow: 0 12px 30px rgba(0,0,0,.25);  padding: 0;  z-index: 9999;  text-align: left;    opacity: 0;  visibility: hidden;  pointer-events: none;  transform: translateY(8px);  transition: opacity .15s ease, transform .15s ease, visibility .15s ease;}
header.main .main-menu li:hover > .bb-submenu-panel {opacity: 1;  visibility: visible;  pointer-events: auto;  transform: translateY(0);}
.bb-submenu-panel > li { list-style: none;  display: block !important; line-height: 24px !important; padding: 0!important;}
.bb-submenu-panel > li:not(.bb-menu-card) > a {  display: block;  padding: 12px;  font-size: 16px;  color: #000 !important;  text-decoration: none !important;  border-bottom: 1px solid #eee;}
/* Card rows */
.bb-submenu-panel > li.bb-menu-card > a {  display: flex;  align-items: center;  justify-content: space-between;  gap: 18px;  padding: 12px;  text-decoration: none;  border-bottom: 1px solid #eee;}
.bb-card-text {  display: block;}
.bb-card-title {  display: block;  font-size: 14px;  line-height: 1.1;  color: #111;}
/* Hover feel */
.bb-submenu-panel a:hover {  background: rgba(0,0,0,.03);}
/* arrow on top-level items that have children */
header.main .main-menu li.menu-item-has-children > a{	position: relative;	padding: 10px 28px 10px 0;  }
	/* Default: arrow OWN */
header.main .main-menu li.menu-item-has-children > a::after{	content: "";	position: absolute;	right: 8px;	top: 50%;	width: 8px;	height: 8px;	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;	transform: translateY(-50%) rotate(45deg);	transition: transform .18s ease;  }
	/* Hover/focus-within: arrow UP */
header.main .main-menu li.menu-item-has-children:hover > a::after,header.main .main-menu li.menu-item-has-children:focus-within > a::after{	transform: translateY(0%) rotate(-135deg);  }	

.banner {background:	linear-gradient(	  to bottom,	  rgba(255,255,255,1) 0%,	  rgba(255,255,255,1) 15%,	  rgba(255,255,255,0) 100%
	),	url(images/banner.png); background-size: cover;  display: flex;align-items: center; justify-content: left; min-height: 320px; position: relative; top: 0; width: 100%; z-index: 0;    }
.home .banner {background:	linear-gradient(	  to bottom,	  rgba(255,255,255,1) 0%,	  rgba(255,255,255,1) 15%,	  rgba(255,255,255,0) 100%
	),	url(images/banner.png); background-size: cover;  display: flex;align-items: center; justify-content: left; min-height: 640px; position: relative; top: 0; width: 100%; z-index: 0;    }

/*home*/
.home .banner-image {  position: absolute;  bottom: 0;  left: 0;  right: 0;   margin: auto;  max-width: 1200px;  z-index: 1;}
.home .banner-image img {  width: 100%;  height: auto;  object-fit: cover;  display: block;}
.homecontent {background: url(images/2026back.png) no-repeat; background-size: 25% auto; }
.awards {  display: flex;    overflow: hidden;}
.awards-left {  flex: 0 0 15%;  padding: 0;  position: relative;  z-index: 2; text-align: right}
.awards-left h2 {padding:  40px}
.awards-right {  flex: 1;  overflow: hidden;  position: relative;}
.awards-track {  display: flex;  gap: 40px; min-height: 27vh;  width: max-content;  will-change: transform;}
.award-box {  width: 270px; background: url(images/award.png) no-repeat; background-size: cover;}
.award-content {padding: 40px 15px 0 15px; text-align: right;}

.blue .awards {  display: flex;  align-items: center;   gap: 60px;}
.blue .awards-left {  flex: 0 0 25%;  display: flex;  justify-content: center; }
.blue .awards-left img {  max-width: 260px;    width: 100%;  height: auto;}
.blue .awards-right {  flex: 0 0 75%;}
.blue .awards-right p:last-of-type {margin-bottom: 0;}

.gallery {  display: flex;  flex-wrap: wrap;  gap: 40px;  padding: 3%;  align-items: stretch;}
.gallery a {  flex: 0 0 calc(24% - 27px);  background: #17132e;  padding: 3%;  display: flex;  align-items: center;  justify-content: center;  box-sizing: border-box;}
.gallery a img {width: 100%; display: block;}

section.awardcontent{  display: flex;  flex-wrap: wrap;  gap: 40px;  padding: 3%;   background: rgba(255,255,255,0.6);}
.awardcontent .award { flex: 1 1 calc(30.333% - 40px);   min-width: 280px; /* prevents squishing */   background: #17132e;    padding: 1.5%; }

.judges {column-count: 2;	  column-gap: 40px;	  padding: 3%;}
.judgebox {break-inside: avoid;	  margin-bottom: 40px;	  padding: 3%;	  background: url(images/award.png) no-repeat;	  background-size: cover; }
.judgebox h3 {font-family: oskar, sans-serif; }
 /* =========================
	Footer
	========================= */
 
.bb-footer{   background: #17132e ;  color: #fff;   padding: 60px 3% 40px; }
.bb-footer__inner{   max-width: 1200px;   margin: 0 auto; }
.bb-footer__top{   display: grid;   grid-template-columns: 1fr auto;   gap: 60px;   align-items: start; }
  /* Contact block */
.bb-footer__contact h3{   color: #cf3f7d;   font-size: 18px;   margin-bottom: 12px; }
.bb-footer__contact p{   font-size: 14px;   line-height: 1.6;   opacity: .9; }
.bb-footer__contact a{   color: #fff;   text-decoration: none; } 
.bb-footer__contact a:hover{   text-decoration: underline; }
.bb-footer__spacer{   margin-top: 18px; }
  /* Social icons */
.bb-footer__social{   margin-top: 18px;   display: flex;   gap: 14px; }
.bb-footer__social img{   width: 45px;   height: 45px;   opacity: .9;   transition: opacity .15s ease; }
.bb-footer__social img:hover{   opacity: 1; }
  /* Logos (right) */
.bb-footer__logos{   display: flex;   flex-direction: column;   align-items: flex-end;   gap: 24px; }
.bb-footer__logos img{    height: auto;   height: 100px !important; }
  /* Divider */
.bb-footer__divider{   height: 1px;   background: linear-gradient(
135deg,	  #1c2d80,	  #007d7a, #28a745, #cfdc00,  #ffcf00, #ff7a00, #e01b2d, #ff1f77, #b0178c,  #4b1a72	);  margin: 15px 0 24px; }
  /* Bottom row */
.bb-footer__bottom{   display: flex;   justify-content: space-between;   flex-wrap: wrap;   gap: 12px;   font-size: 13px;   opacity: .85; }
.bb-footer__links a{   color: #fff;   text-decoration: none; }
.bb-footer__links span{   margin: 0 6px;   opacity: .5; }
.bb-footer__links a:hover{   text-decoration: underline; }



  /* Mobile */
 @media (max-width: 800px){   
.bb-footer__top{     grid-template-columns: 1fr;   }
.bb-footer__logos{     align-items: flex-start;   }
.bb-footer__bottom{     flex-direction: column;     gap: 8px;   }
 }
 
 /* ===== Off-canvas mobile menu (<= 1024) ===== */
  @media (max-width: 1024px){
 header.main{     position: relative;   }
  /* show the hamburger */
 header.main .menu-btn{ display: block; position: absolute; opacity: 0; pointer-events: none; }
 header.main .menu-icon{     display: inline-flex;     align-items: center;     justify-content: center;     width: 64px;     height: 95px;     cursor: pointer;     position: absolute;
	  right: 0px;   /* leaves space for cart on the far right */     top: 0;     z-index: 1101;   }
  /* hamburger lines */
 header.main .menu-icon .navicon,
 header.main .menu-icon .navicon:before,
 header.main .menu-icon .navicon:after{     background: #17132e;     content: "";     display: block;     height: 3px;     width: 30px;     border-radius: 3px;     position: relative;
	  transition: .2s ease;   }
 header.main .menu-icon .navicon:before{ position: absolute; top: -9px; }
 header.main .menu-icon .navicon:after{ position: absolute; top: 9px; }
  
 /* keep cart top-right */
 header.main .main-menu .cart{position: absolute;right: 18px;top: 0;height: 95px;display: flex;align-items: center;z-index: 1103;display: none;}
 /* Off-canvas panel */
 header.main .main-menu{position: fixed;top: 0;right: 0;height: 100vh;width: min(400px, 86vw);background: #fff; padding: 110px 28px 28px;transform: translateX(100%);
 transition: transform .25s ease;z-index: 1102;overflow-y: auto;display: block;              /* overrides desktop flex */}
 /* Close X inside panel */
 header.main .menu-close{position: absolute; visibility: visible; top: 22px;right: 22px;font-size: 28px;line-height: 1;color: #333;cursor: pointer;user-select: none;}
 /* Overlay */
 header.main .menu-overlay{display: block;position: fixed;inset: 0;background: rgba(0,0,0,.55);opacity: 0;visibility: hidden;transition: opacity .25s ease, visibility .25s ease;z-index: 1100;}
 /* When open */
 header.main .menu-btn:checked ~ .main-menu{transform: translateX(0);height: 100%;}
 header.main .menu-btn:checked ~ .menu-overlay{opacity: 1;visibility: visible;}
 /* hide desktop inline underline behaviour */
 header.main .main-menu li:hover a{ text-decoration: none; }
 /* Menu list inside panel */
 header.main .main-menu > ul,header.main .main-menu ul.bb-nav{display: block;height: auto;list-style: none;margin: 0;padding: 0;}
 header.main .main-menu li{display: block;padding: 0;margin: 0;}
 header.main .main-menu li a{color: #16222a !important;font-size: 24px;font-weight: 400;display: flex;padding: 14px 0;text-decoration: none;}
 /* Register button becomes full-width pill */
 header.main .main-menu .tickets a{ background: linear-gradient(
	 135deg,	  #1c2d80,	  #007d7a, #28a745, #cfdc00,  #ffcf00, #ff7a00, #e01b2d, #ff1f77, #b0178c,  #4b1a72	); color: #fff !important;border-radius: 15px;padding: 16px 20px;text-align: center;margin-top: 20px;width: 100%;display: flex;      
 justify-content: center;    /* centers text horizontally */
 align-items: center;        /* centers vertically */
 text-align: center;}
 /* IMPORTANT: in off-canvas, your “mega menu” panel should be part of the flow */
 .bb-submenu-panel{position: static;width: 100%;box-shadow: none;border-radius: 0;opacity: 1;visibility: visible;pointer-events: auto;transform: none;background: transparent;}
 /* Submenu rows look like your screenshot */
 .bb-submenu-panel > li:not(.bb-menu-card) > a{padding: 18px 0;font-size: 16px;border-bottom: 1px solid rgba(0,0,0,.08);color: #16222a !important;}
 .bb-submenu-panel > li.bb-menu-card > a{padding: 16px 0;border-bottom: 1px solid rgba(0,0,0,.08);}
 .bb-card-title{ font-size: 16px; }
 .bb-card-subtitle{ font-size: 14px; }
 .bb-card-media img{width: 120px;height: 58px;}
 .menu-item-has-children .bb-top-link {display: none !important;}
 .header-cart{position: absolute;right: 0px;top: 0;width: 44px;height: 95px;display: flex;align-items: center;justify-content: center;text-decoration: none;z-index: 1101;background: url(images/cart.png) no-repeat center / 28px 24px;}
 /* Don’t show the chevron animation in panel unless you want it */
 header.main .main-menu li.menu-item-has-children > a::after{ display: none; }
 }