:root {
    
    --darkPurple: #3A1041; 
    --parchment: #fffbec; 
    --smooth: 0.5s cubic-bezier(0.5, 0, 0, 1);
    --smoothQuick: 0.2s cubic-bezier(0.5, 0, 0, 1);
}

* {margin:0; padding:0; outline:none; border:none; box-sizing:border-box; -moz-box-sizing:border-box; background-repeat: no-repeat;}

/* GLOBAL */

html 	{scroll-behavior: smooth}
body 	{line-height:1;   font-family: "Open Sans", sans-serif; color: var(--darkPurple);}

h1		{font-family: "Playfair Display", serif; font-size: 70px; font-weight: 400}
h2		{font-family: "Playfair Display", serif; font-size: 60px; font-weight: 400; margin-bottom: 0.5em}
h3		{font-family: "Playfair Display", serif; font-size: 40px; font-weight: 400; margin-bottom: 0.5em}
h4		{font-family: "Playfair Display", serif; font-size: 30px; font-weight: 400; margin-bottom: 0.5em}
h5		{font-family: "Playfair Display", serif; font-size: 25px; font-weight: 400; margin-bottom: 0.5em}
h6		{font-family: "Playfair Display", serif; font-size: 20px; font-weight: 400; margin-bottom: 0.5em}

p		{font-size: 18px; line-height: 1.6em; margin-bottom: 1.2em}

ul,
ol		{}

img     {max-width:100%; height:auto;}
a       {color:inherit;}
a.cover {position:absolute; left:0; top:0; width:100%; height:100%; background-color:rgba(0,0,0,0); display:block;}
.inner  {max-width:1260px; width:100%; margin:0 auto; padding: 0 30px;}

.cols   {display: flex;}

/* HEADER */
header 			{background-color: #fff; position: sticky; top: 0; z-index: 50; box-shadow: 0 0 5px rgba(0,0,0,0.1);}
header .inner 	{display: flex; justify-content: space-between; align-items: center; padding: 15px 30px; transition: var(--smooth);}

.logo           {width: 200px; transition: var(--smooth);}
.logo img       {width: 100%; height: auto;}

.address        {background-color: var(--darkPurple); padding: 10px; display: flex; justify-content: center; z-index: 20}
.address p      {font-family: "Playfair Display", serif; display: flex; align-items: center; color: #ffffff; gap: 10px; font-weight: 700; margin-bottom: 0;}

header.fixed .inner {padding-top: 20px; padding-bottom: 20px;}
header.fixed .logo  {width: 200px;}


/* NAV */
nav		                  {}
nav ul	                  {display: flex; font-weight: 500; gap: 8px;}
nav ul li a               {text-decoration: none; transition: var(--smooth); position: relative; padding: 8px 10px; display: block}
nav ul li a span          {position: relative; z-index: 2; display: block; transition: var(--smooth);}
nav ul li a:after         {width: 100%; height: 0; position: absolute; left: 0; bottom: 0; transition: var(--smooth); content: ''; background-color: var(--darkPurple); display: block; z-index: 0}
nav ul li a:hover:after   {height: 100%;}
nav ul li a:hover span    {transform: translateY(-2px); color: #ffffff}

/* HERO CONTAINER */
.hero-container                 {height: auto; display: flex; padding: 40px 0; overflow: hidden; position: relative;}
.hero-container .inner          {display: flex; align-items: center}
.hero-container .hero-text      {width: 600px; max-width: 100%; color: #ffffff; position: relative; z-index: 5;}
.hero-container .hero-text h1   {margin-bottom: 0.35em; animation: 1.5s text-fade 0.5s ease-in-out forwards; opacity: 0; transform: translateX(-30px)}
.hero-container .hero-text p    {font-size: 18px; margin-bottom: 1em; animation: 1.5s text-fade 0.5s ease-in-out forwards; opacity: 0; transform: translateX(-30px)}
.hero-container:before          {position: absolute; inset:0; content: ''; background: rgb(0,0,0); background: linear-gradient(90deg, rgba(58,16,65,1) 0%, rgba(255,255,255,1) 100%); z-index: 4; mix-blend-mode: multiply}

.hero-image {position: absolute; inset: 0; background-size: cover; background-position: center; transform: scale(1.1); opacity: 0; animation: 1.5s fade-in 0.25s ease-in-out forwards;}

@keyframes fade-in {
    to  {transform: scale(1); opacity: 1;}    
}

@keyframes text-fade {
    
    to  {transform:translateX(0); opacity: 1;}    
}

section {scroll-margin-top: 180px;}

/* SPLIT PANEL */
.split-panel            {padding: 80px 0; background-color: var(--parchment);}
.split-panel .cols      {display: flex; justify-content: space-between}
.split-panel .col       {flex: 0 0 50%;}
.split-panel .col-text  {flex: 0 0 calc(50% - 70px); padding: 20px 0}
.split-panel .col-image {overflow: hidden;}
.split-panel p              {font-size: 17px;}
.split-panel p:last-child   {margin-bottom: 0}

.listing .split-panel:nth-child(even)        {background-color:#ffffff}
.listing .split-panel:nth-child(even) .cols  {flex-direction: row-reverse}

/* FOOD MENUS */
.food-menus-panel       {padding: 80px 0}
.food-menus-panel .cols {margin-top: 50px; display: flex; gap:40px; flex-wrap: wrap}
.food-menus-panel .col  {flex:0 0 calc(33.333% - 27px)}

.image-button-outer     {position: relative; width: 100%; display: block; padding-top: 100%; overflow: hidden;}
.image-button-image     {position: absolute; inset:0; background-position: center; background-size: cover; transition: var(--smooth);}
.image-button:after     {background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(0,0,0,1) 50%, rgba(255,255,255,1) 100%); z-index: 4; mix-blend-mode: multiply; position: absolute; inset:0; content: ''; opacity: 0.5}
.menu-text              {position: absolute; inset:0; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 5; text-align: center; padding: 0 15px;}
.menu-text p            {font-size: 30px; margin: 0; color: #ffffff; font-family: "Playfair Display", serif; transition: var(--smooth); line-height: 1.1em}
.menu-text span         {color: #ffffff; display: block; margin-top: 10px; visibility: hidden; opacity: 0; transition: var(--smooth); transform: translateY(5px)}

.image-button-outer:hover .menu-text p          {transform: translateY(-5px);}
.image-button-outer:hover .menu-text span       {opacity: 1; visibility: visible; transform: translateY(-5px)}
.image-button-outer:hover .image-button-image   {transform: scale(1.1)}

/* OPENING TIMES */
.opening-times-panel        {padding: 80px 0; background-color: var(--parchment);}
.opening-times-panel .cols  {justify-content: flex-start; gap: 100px; margin-top: 50px; flex-wrap: wrap}
.opening-times-panel .col   {width: calc(50% - 50px);}
.opening-times-panel td     {font-size: 18px; padding: 10px 0;}
.opening-times-panel h3     {font-size: 30px; margin-bottom: 0.5em; border-bottom: 0.5px solid var(--darkPurple); padding-bottom: 20px;}

.opening-times-panel tr td:first-child  {padding-right: 40px;}

/* NEWS AND EVENTS */
.news-listing-panel         {padding: 80px 0}
.news-listing-panel .cols   {margin-top: 70px; display: flex; gap:40px; flex-wrap: wrap}
.news-listing-panel .col    {flex:0 0 calc(33.333% - 27px)}

.news-listing               {position: relative; z-index: 5}
.news-listing-card          {text-decoration: none}
.news-listing-card p        {font-size: 16px; margin-bottom: 0}
.news-listing-card p.date   {font-size: 14px; margin-bottom: 10px;}
.news-listing-card h3       {font-size: 34px;}
.news-listing-text          {padding: 15px 10px}

.listing-card-image-container  {padding-top:100%; position: relative; overflow: hidden;}
.listing-card-image            {position: absolute; inset:0; background-size: cover; background-position: center; transition: var(--smooth);}

.news-listing-card:hover .listing-card-image    {transform: scale(1.1);}

.other-news.news-listing-panel  {background-color: var(--parchment); padding: 80px 0}

.text-page p,
.text-page ul,
.text-page ol   {font-size: 18px; line-height: 1.6em; margin-bottom: 1.2em}

.text-page ul,
.text-page ol   {margin: 1.5em}

/* ANNOUNCEMENT */
.announcement-panel         {padding: 80px 0; text-align: center; background-color: var(--parchment);}
.announcement-panel .inner  {max-width: 960px;}

/* NEWS LISTING */
.news-hero-outer    {height: 500px; width: 100%; position: relative}
.news-hero          {position: absolute; background-position: center; background-size: cover; inset:0}

.news-page-top h1               {font-size: 60px; margin: 0.5em 0}
.news-page-top .news-intro p    {font-size: 22px;}
.news-page-top .inner           {width: 960px; max-width: 100%; padding-top: 40px; padding-bottom: 40px;}

.text-page  {padding: 50px 0}
.text-page h1   {margin-bottom: 0.5em}

/* FOOTER */
footer	            {padding: 80px 0; background-color: var(--darkPurple); color: #ffffff; scroll-margin-top: 180px;}
footer .cols        {gap:40px;}
footer .cols .col   {width: 50%;}
footer h2           {margin-bottom: 0.75em; font-size: 50px;}
footer p            {font-size: 16px}

footer p a:hover,
.footer-left-cols ul li a:hover         {color: var(--parchment)}


.footer-left-cols                       {display: flex; gap: 10px !important}
.footer-left-cols ul                    {list-style: none}
.footer-left-cols ul li                 {margin: 0 0 15px 0; line-height: 1.6em}
.footer-left-cols ul li a               {text-decoration: none}
.footer-left-cols .col                  {width: auto !important; flex: 1 1 auto;}

.footer-left-cols ul.social-list            {display: flex; gap: 25px; align-items: center}
.footer-left-cols ul.social-list li a       {fill: #ffffff;}
.footer-left-cols ul.social-list li a:hover {fill:var(--parchment)}

.contact-cols           {display: flex;}
.contact-cols .col      {width: auto !important;}
.contact-cols .col:first-child  {padding-right: 25px;}

footer iframe           {width: 100% !important; height: 300px !important; margin-top: 20px;}

/* BUTTONS */
.btn	{}

/* FORM STYLES */
.form-container			{}
.form-row				{}
.form-cell				{}

input[type="text"]		{}
input[type="password"]	{}
input[type="submit"]	{}
textarea				{}

/* SELECT CSS */
.select-css				{}

/* LEGACY COOKIE BAR */
.cookieBar              {width: 100%; background-color:rgba(0,0,0,0.5); position: fixed; bottom: 0px; left: 0px; text-align: center; padding: 10px 10px; z-index: 99999999;}
.cookieBar p			{color:#ffffff; font-size:14px; font-family:inherit; line-height:1.5em; text-align:center; display:inline-block;}
.cookieBar .acceptBtn   {background:#000; border:1px solid #DEDEDE; font-weight:bold; display:inline-block; margin-top:6px; margin-left:5px; font-family:inherit; font-size:12px; padding:5px 10px; text-decoration:none; color:#FFF; text-transform:uppercase; }