/* =========================================================
   Brit-Food.com — main stylesheet
   Colors, typography (Poppins + Roboto) and Bootstrap overrides
   ========================================================= */

:root{
  --accent-1:#29415E;      /* primary navy */
  --accent-2:#C8515A;      /* coral red */
  --link-color:#29415E;
  --link-hover:#C8515A;
  --btn-bg:#C8515A;
  --btn-text:#ffffff;
  --topmenu-bg:#29415E;
  --topmenu-link:#ffffff;
  --footer-bg:#29415E;
  --footer-text:#ffffff;
  --footer-link:#C8515A;
  --accordion-bg:#C8515A;
  --accordion-text:#ffffff;
  --icon-color:#29415E;
  --card-header-bg:#C8515A;
  --text-primary:#29415E;
  --font-body:'Roboto', system-ui, -apple-system, sans-serif;
  --font-heading:'Poppins', system-ui, -apple-system, sans-serif;
  --font-display:'Playfair Display', Georgia, 'Times New Roman', serif;
}

html{ scroll-behavior:smooth; }

.brand-ribbon{
  height:4px;
  background:linear-gradient(90deg, var(--accent-1) 0%, var(--accent-2) 50%, var(--accent-1) 100%);
}

body{
  font-family:var(--font-body);
  font-weight:400;
  color:#33342f;
  line-height:1.8;
  font-size:1.08rem;
  -webkit-font-smoothing:antialiased;
}
p{ margin-bottom:1.2rem; }

h1,h2,h3,h4,h5,h6{
  font-family:var(--font-heading);
  color:var(--accent-1);
  line-height:1.25;
}
h1,h2{
  font-family:var(--font-display);
  letter-spacing:.005em;
}
h1{ font-weight:800; }
h2{ font-weight:700; }
h3{ font-weight:600; }
h4{ font-weight:600; }
h5,h6{ font-weight:500; }

/* UI-context headings keep the geometric sans for legibility at small sizes */
.card-title,
.accordion-button,
.benefit-card h3,
.navbar-brand{
  font-family:var(--font-heading);
}

.fw-poppins-900{ font-family:var(--font-heading); font-weight:900; }
.fw-poppins-400{ font-family:var(--font-heading); font-weight:400; }

/* Links */
a{ color:var(--link-color); text-decoration:none; transition:color .2s ease; }
a:hover, a:focus{ color:var(--link-hover); }

/* Text-primary override */
.text-primary{ color:var(--text-primary) !important; }

/* Buttons */
.btn{
  border-radius:.2rem;
  font-family:var(--font-heading);
  font-weight:600;
  font-size:.85rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  padding:.85rem 2rem;
}
.btn-primary{
  background-color:var(--btn-bg);
  border-color:var(--btn-bg);
  color:var(--btn-text);
  position:relative;
  overflow:hidden;
  z-index:1;
  transition:color .3s ease, border-color .3s ease;
}
.btn-primary::before{
  content:"";
  position:absolute;
  inset:0;
  background:var(--accent-1);
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .35s cubic-bezier(.4,0,.2,1);
  z-index:-1;
}
.btn-primary:hover, .btn-primary:focus{
  color:#fff;
  border-color:var(--accent-1);
}
.btn-primary:hover::before, .btn-primary:focus::before{
  transform:scaleX(1);
  transform-origin:left;
}
.btn-outline-primary{
  border-color:var(--accent-1);
  border-width:1px;
  color:var(--accent-1);
  background:transparent;
  transition:background-color .3s ease, color .3s ease, border-color .3s ease;
}
.btn-outline-primary:hover, .btn-outline-primary:focus{
  background-color:var(--accent-1);
  border-color:var(--accent-1);
  color:#fff;
}

/* ============== TOP BAR ============== */
.top-bar{
  background:#ffffff;
  padding:.6rem 0;
  font-size:.95rem;
  border-bottom:1px solid #eef0f3;
}
.top-bar a{ color:var(--accent-1); font-weight:500; }
.top-bar a:hover{ color:var(--accent-2); }
.top-bar .brand-logo img{
  max-width:280px;
  max-height:112px;
  width:auto;
  height:auto;
}
.top-bar i{ color:var(--icon-color); }

/* ============== TOP MENU / NAV ============== */
.navbar-topmenu{
  background-color:var(--topmenu-bg);
  padding-top:0;
  padding-bottom:0;
}
.navbar-topmenu .navbar-nav{
  column-gap:.4rem;
}
.navbar-topmenu .nav-item{ position:relative; }
.navbar-topmenu .nav-link{
  position:relative;
  color:var(--topmenu-link);
  font-family:var(--font-body);
  font-weight:600;
  font-size:1.08rem;
  padding:.95rem 1.1rem;
  text-transform:none;
  letter-spacing:.01em;
  overflow:hidden;
  z-index:1;
  transition:color .25s ease, transform .25s ease;
}
.navbar-topmenu .nav-link::before{
  content:"";
  position:absolute;
  left:1rem; right:1rem; bottom:.55rem;
  height:2px;
  background:#ffffff;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .3s ease;
  z-index:-1;
}
.navbar-topmenu .nav-link::after{
  content:"";
  position:absolute;
  inset:0;
  background:var(--accent-2);
  transform:translateY(100%);
  transition:transform .3s cubic-bezier(.4,0,.2,1);
  z-index:-2;
}
.navbar-topmenu .nav-link:hover,
.navbar-topmenu .nav-link:focus-visible{
  color:#ffffff;
  transform:translateY(-2px);
}
.navbar-topmenu .nav-link:hover::after,
.navbar-topmenu .nav-link:focus-visible::after{
  transform:translateY(0);
}
.navbar-topmenu .nav-link.active{
  color:#ffffff;
}
.navbar-topmenu .nav-link.active::after{
  transform:translateY(0);
  background:var(--accent-1);
  box-shadow:inset 0 -3px 0 var(--accent-2);
}
@media (prefers-reduced-motion: reduce){
  .navbar-topmenu .nav-link,
  .navbar-topmenu .nav-link::after,
  .navbar-topmenu .nav-link::before{ transition:none; }
}
.navbar-topmenu .navbar-toggler{
  border-color:rgba(255,255,255,.5);
  transition:transform .2s ease;
}
.navbar-topmenu .navbar-toggler:hover{ transform:scale(1.08); }
.navbar-topmenu .navbar-toggler-icon{
  filter: invert(1) grayscale(100%) brightness(200%);
}
.navbar-topmenu .navbar-collapse.collapsing{
  transition:height .3s ease;
}
.navbar-topmenu .navbar-nav .nav-item{
  animation:navFadeIn .4s ease backwards;
}
.navbar-topmenu .navbar-nav .nav-item:nth-child(1){ animation-delay:.03s; }
.navbar-topmenu .navbar-nav .nav-item:nth-child(2){ animation-delay:.07s; }
.navbar-topmenu .navbar-nav .nav-item:nth-child(3){ animation-delay:.11s; }
.navbar-topmenu .navbar-nav .nav-item:nth-child(4){ animation-delay:.15s; }
.navbar-topmenu .navbar-nav .nav-item:nth-child(5){ animation-delay:.19s; }
.navbar-topmenu .navbar-nav .nav-item:nth-child(6){ animation-delay:.23s; }
@keyframes navFadeIn{
  from{ opacity:0; transform:translateY(-6px); }
  to{ opacity:1; transform:translateY(0); }
}

/* Breadcrumbs */
.breadcrumb-bar{ background:#f4f5f7; padding:.75rem 0; font-family:var(--font-heading); font-size:.88rem; }
.breadcrumb-item a{ color:var(--accent-1); font-weight:500; }
.breadcrumb-item.active{ color:var(--accent-2); font-weight:600; }

/* ============== HERO ============== */
.hero-section{
  position:relative;
  min-height:420px;
  max-height:550px;
  height:52vw;
  display:flex;
  align-items:center;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  color:#fff;
  overflow:hidden;
}
.hero-section::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(180deg, rgba(15,25,38,.78) 0%, rgba(41,65,94,.62) 40%, rgba(10,17,27,.9) 100%);
}
.hero-section .container{ position:relative; z-index:2; }
.hero-bg{
  position:absolute;
  inset:0;
  z-index:0;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.hero-animated .hero-bg{
  animation:heroKenBurns 22s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes heroKenBurns{
  0%{ transform:scale(1) translate(0,0); }
  100%{ transform:scale(1.12) translate(-1%,-1%); }
}
@media (prefers-reduced-motion: reduce){
  .hero-animated .hero-bg{ animation:none; }
}
.hero-section .eyebrow{
  display:inline-block;
  color:#fff;
  font-family:var(--font-heading);
  font-weight:600;
  letter-spacing:.32em;
  text-transform:uppercase;
  font-size:.78rem;
  margin-bottom:1.1rem;
  opacity:.9;
}
.hero-section h1{
  color:#fff;
  font-weight:800;
  letter-spacing:.01em;
  text-shadow:0 3px 18px rgba(0,0,0,.6);
  font-size:clamp(1.9rem, 4.2vw, 3.35rem);
}
.hero-section h1::after{
  content:"";
  display:block;
  width:72px; height:2px;
  background:var(--accent-2);
  margin:1.4rem auto 0;
}
.hero-section:not(.text-start) h1::after{ margin-left:auto; margin-right:auto; }
.hero-section p.lead{
  font-family:var(--font-display);
  font-style:italic;
  text-shadow:0 2px 10px rgba(0,0,0,.5);
  font-weight:500;
  font-size:1.2rem;
  letter-spacing:.01em;
  color:rgba(255,255,255,.92);
  max-width:640px;
  margin:1.3rem auto 0;
}
.hero-section .btn-primary{ font-size:.85rem; }

.page-hero{
  min-height:230px;
  height:30vw;
  max-height:320px;
}
.page-hero h1{ font-size:clamp(1.7rem, 3.4vw, 2.5rem); }

/* ============== SPLIT SECTIONS (About / Offer) ============== */
.split-section{ padding:4.5rem 0; }
.split-section img{
  border-radius:.6rem;
  box-shadow:0 12px 30px rgba(41,65,94,.18);
  width:100%;
  height:auto;
  transition:transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease, filter .45s ease;
}
.split-section img:hover{
  transform:scale(1.03) translateY(-6px);
  box-shadow:0 22px 44px rgba(41,65,94,.3);
  filter:saturate(1.08);
}
.split-section .eyebrow{
  font-family:var(--font-heading);
  font-weight:700;
  color:var(--accent-2);
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:.85rem;
  position:relative;
  padding-left:1.6rem;
}
.split-section .eyebrow::before{
  content:"";
  position:absolute;
  left:0; top:50%;
  width:1.1rem; height:2px;
  background:var(--accent-2);
  transform:translateY(-50%);
}
.split-section h2{ font-weight:800; position:relative; }
.split-section h2:not(.card-title)::after{
  content:"";
  display:block;
  width:56px; height:4px;
  background:var(--accent-2);
  border-radius:2px;
  margin-top:.85rem;
}
.bg-alt{ background-color:#f6f7f9; }

/* ============== BENEFITS ============== */
.benefit-card{
  text-align:center;
  padding:2.6rem 1.6rem;
  height:100%;
  border-radius:.3rem;
  background:#fff;
  border:1px solid #eef0f3;
  box-shadow:0 10px 28px rgba(41,65,94,.07);
  transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease, border-color .3s ease;
}
.benefit-card:hover{
  transform:translateY(-8px);
  box-shadow:0 22px 42px rgba(41,65,94,.16);
  border-color:var(--accent-2);
}
.benefit-card .icon-badge{
  width:68px; height:68px;
  font-size:1.6rem;
  margin:0 auto 1.3rem;
  border:1px solid rgba(41,65,94,.18);
  background:transparent;
  transition:background-color .3s ease, transform .3s ease, border-color .3s ease;
}
.benefit-card:hover .icon-badge{
  background:var(--accent-2);
  border-color:var(--accent-2);
  color:#fff;
  transform:rotate(-6deg) scale(1.05);
}
.benefit-card h3{ font-size:1.1rem; font-weight:700; letter-spacing:.02em; }

/* ============== PARALLAX CTA ============== */
.parallax-section{
  position:relative;
  background-image:url('../img/cliveden-2.jpg');
  background-attachment:fixed;
  background-size:cover;
  background-position:center;
  padding:5.5rem 0;
  color:#fff;
  text-align:center;
}
.parallax-section::before{
  content:"";
  position:absolute; inset:0;
  background:rgba(41,65,94,.78);
}
.parallax-section .container{ position:relative; z-index:2; }
.parallax-section h2{ color:#fff; font-weight:800; }
@media (max-width:768px){
  .parallax-section{ background-attachment:scroll; }
}

/* ============== CARDS (restaurants) ============== */
.card{ border:none; border-radius:.7rem; overflow:hidden; box-shadow:0 8px 22px rgba(41,65,94,.1); transition:transform .2s ease, box-shadow .2s ease; }
.card:hover{ transform:translateY(-5px); box-shadow:0 16px 32px rgba(41,65,94,.18); }
.card-img-top{ height:220px; object-fit:cover; }
.card .card-header{
  background-color:var(--card-header-bg);
  color:#fff;
  font-family:var(--font-heading);
  font-weight:700;
  border:none;
}
.card-title{ font-family:var(--font-heading); font-weight:700; color:var(--accent-1); }
.card-body .price-tag{ color:var(--accent-2); font-weight:700; font-family:var(--font-heading); }

/* ============== ACCORDION ============== */
.accordion-button{
  background-color:var(--accordion-bg);
  color:var(--accordion-text);
  font-family:var(--font-heading);
  font-weight:600;
  box-shadow:none !important;
}
.accordion-button:not(.collapsed){
  background-color:var(--accent-1);
  color:#fff;
}
.accordion-button::after{
  filter:brightness(0) invert(1);
}
.accordion-item{ border:none; margin-bottom:.6rem; border-radius:.5rem !important; overflow:hidden; }
.accordion-body{ background:#fff; }

/* ============== ITINERARY TIMELINE ============== */
.itinerary{
  position:relative;
  list-style:none;
  padding-left:0;
  margin:0;
}
.itinerary::before{
  content:"";
  position:absolute;
  left:29px; top:8px; bottom:8px;
  width:2px;
  background:linear-gradient(180deg, var(--accent-2), var(--accent-1));
}
.itinerary-item{
  position:relative;
  display:flex;
  gap:1.4rem;
  padding-bottom:2rem;
}
.itinerary-item:last-child{ padding-bottom:0; }
.itinerary-marker{
  position:relative;
  z-index:1;
  flex:0 0 auto;
  width:60px; height:60px;
  border-radius:50%;
  background:linear-gradient(145deg, var(--accent-1), var(--accent-2));
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:1.3rem;
  box-shadow:0 8px 20px rgba(41,65,94,.28), 0 0 0 5px #fff, 0 0 0 6px rgba(41,65,94,.1);
  transition:transform .3s ease, box-shadow .3s ease;
}
.itinerary-item:hover .itinerary-marker{
  transform:scale(1.08) rotate(-4deg);
  box-shadow:0 10px 24px rgba(200,81,90,.4), 0 0 0 5px #fff, 0 0 0 6px rgba(41,65,94,.1);
}
.itinerary-content{ padding-top:.3rem; }
.itinerary-time{
  display:inline-block;
  font-family:var(--font-heading);
  font-weight:700;
  font-size:.78rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--accent-2);
  margin-bottom:.35rem;
}
.itinerary-content h4{
  font-family:var(--font-heading);
  font-weight:700;
  color:var(--accent-1);
  margin-bottom:.4rem;
  font-size:1.1rem;
}
.itinerary-content p{ margin-bottom:0; color:#4a4c47; }

/* ============== TABLES (tour details) ============== */
.tour-table th{
  background-color:var(--accent-1);
  color:#fff;
  font-family:var(--font-heading);
  font-weight:600;
  width:35%;
}
.tour-table td, .tour-table th{ vertical-align:middle; padding:.9rem 1rem; }

.included-list li i{ color:#2e7d32; margin-right:.5rem; }
.excluded-list li i{ color:var(--accent-2); margin-right:.5rem; }

/* ============== FOOTER ============== */
.site-footer{
  background-color:var(--footer-bg);
  color:var(--footer-text);
  padding:3.5rem 0 1.2rem;
}
.site-footer h5{
  color:#fff;
  font-family:var(--font-heading);
  font-weight:700;
  margin-bottom:1.1rem;
}
.site-footer a{ color:var(--footer-link); }
.site-footer a:hover{ color:#fff; }
.site-footer .footer-menu-list a{ color:#ffffff; }
.site-footer .footer-menu-list a:hover{ color:var(--footer-link); }
.site-footer .footer-logo img{ max-width:190px; height:auto; margin-bottom:1rem; }
.site-footer p, .site-footer li{ color:rgba(255,255,255,.85); }
.site-footer .footer-bottom{
  border-top:1px solid rgba(255,255,255,.15);
  margin-top:2rem;
  padding-top:1.2rem;
  font-size:.85rem;
  color:rgba(255,255,255,.6);
}
.site-footer ul{ list-style:none; padding-left:0; }
.site-footer ul li{ margin-bottom:.5rem; }

/* ============== FORMS ============== */
.form-label{ font-family:var(--font-heading); font-weight:600; color:var(--accent-1); font-size:.9rem; }
.form-control{
  border-radius:.25rem;
  border:1px solid #dbdfe4;
  padding:.7rem .9rem;
}
.form-control:focus{
  border-color:var(--accent-1);
  box-shadow:0 0 0 .2rem rgba(41,65,94,.15);
}
.alert-success{ background:#eaf5ec; color:#1e5e2b; border:1px solid #cdead1; }
.alert-danger{ background:#fbeaec; color:#8a2732; border:1px solid #f3c8cd; }

/* ============== MISC ============== */
.section-title{ margin-bottom:2.4rem; }
.icon-badge{
  width:56px; height:56px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%;
  background:rgba(41,65,94,.08);
  color:var(--icon-color);
  font-size:1.3rem;
}
.gallery-thumb{
  border-radius:.5rem;
  overflow:hidden;
  height:150px;
}
.gallery-thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .3s ease; }
.gallery-thumb:hover img{ transform:scale(1.08); }

.map-embed{ border-radius:.6rem; overflow:hidden; box-shadow:0 8px 22px rgba(41,65,94,.15); border:0; width:100%; height:340px; }

.back-to-top{
  position:fixed; right:1.2rem; bottom:1.2rem;
  width:46px; height:46px;
  border-radius:50%;
  background:var(--accent-2);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,.25);
  opacity:0; visibility:hidden;
  transition:opacity .3s ease, visibility .3s ease, transform .2s ease;
  z-index:1000;
}
.back-to-top.show{ opacity:1; visibility:visible; }
.back-to-top:hover{ transform:translateY(-4px); color:#fff; }

/* Fade-in on scroll */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform:translateY(0); }

::selection{ background:var(--accent-2); color:#fff; }

@media (max-width:991.98px){
  .navbar-topmenu .nav-link{ padding:.7rem 1rem; }
  .top-bar .brand-logo img{ max-width:170px; }
}