/* ==========================================================
   Site FRAMEWORK

Version: 0.10
Pass: 10
Status: Testing

Architectural goal:
Validate framework ownership, remove obsolete implementation
remnants, and preserve all existing visual behavior.

   Framework evolution:
   0.1  Foundation
   0.2  Semantic section headings
   0.3  Surface card structure
   0.4  Form structure
   0.5  Location and contact structure
   0.6  Content layout primitives
   0.7  Action group structure
   0.8  Section assembly structure
   0.9  Container architecture
   0.9.1 Media video fallback repair
   0.10 Framework validation and dead-code cleanup

   Shared structure and components for family websites.
   Brand-specific colors, fonts, spacing, rhythm, and personality
   live in the restaurant stylesheet.
========================================================== */

:root {
  --lp-radius: 8px;
  --lp-transition: .25s ease;
  --lp-transition-standard: .3s ease;
  --lp-transition-slow: .65s ease;
  --lp-header-height: 135px;
}

/* ---------- Layout helpers ---------- */

body {
	padding-top: var(--lp-header-height);
}

section[id] {
  scroll-margin-top: calc(var(--lp-header-height) + 1.5rem);
}


/* ==========================================================
   CONTAINER STRUCTURE
   Shared mechanics for site page containers. Bootstrap may
   continue to provide its container sizing behavior. Modifier
   classes and brand stylesheets control padding, max-widths,
   and responsive variations.
========================================================== */

.lp-container {
  width: 100%;
  min-width: 0;
  margin-inline: auto;
}

.lp-container-wide {
  padding-inline: 72px;
}

/* ======================================================
   BUTTON SYSTEM
====================================================== */

.lp-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;

  min-height: 44px;
  padding: 0 28px;

  border-radius: var(--lp-radius);

  font-weight: 900;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;

  cursor: pointer;

  transition:
    transform var(--lp-transition),
    box-shadow var(--lp-transition),
    background-color var(--lp-transition),
    border-color var(--lp-transition),
    color var(--lp-transition);
}

.lp-button:hover,
.lp-button:focus {
  text-decoration: none;
  transform: translateY(-2px);
}

.lp-button i {
  transition:
    transform var(--lp-transition);
}

.lp-button:hover i,
.lp-button:focus i {
  transform: translateX(5px);
}


/* ==========================================================
   SITE HEADER LAYOUT
   Shared across all family restaurant brands
========================================================== */

.lp-header {
    min-height: var(--lp-header-height);
    padding: 0;
}

.lp-header-wrap {
    display: flex;
    align-items: center;
}

.lp-logo-link {
    flex: 0 0 auto;
    margin-right: 3rem;
}

.lp-logo {
    display: block;
    width: auto;
    max-width: 180px;
    height: auto;
}

.lp-header-collapse {
    align-items: center;
}

.lp-header-left {
    display: flex;
    align-items: center;
    gap: 1.5rem;

    margin-right: auto;
}

.lp-header-right {
    display: flex;
    align-items: center;
    gap: 1rem;

    flex-shrink: 0;
}


/* ==========================================================
   NAVIGATION LINKS
========================================================== */

.lp-nav-link {

    display: inline-flex;
    align-items: center;

    text-decoration: none;

    line-height: 1;
    font-weight: 800;
    letter-spacing: .02em;
}

.lp-header-action {
  inline-size: clamp(150px, 15vw, 220px);
  min-width: 0;
  padding-inline: 1rem;
  white-space: normal;
  text-align: center;
  line-height: .95;
}


/* ==========================================================
   ICON BUTTON
========================================================== */

.lp-icon-button {

    display: inline-flex;
    justify-content: center;
    align-items: center;

    flex: 0 0 auto;

    aspect-ratio: 1;

    text-decoration: none;
}

/* ==========================================================
   MOBILE HEADER
========================================================== */

@media (max-width:991.98px){

    .lp-header{

        min-height:auto;
        padding:1rem 0;

    }

    .lp-header-collapse{

        padding-top:1.5rem;

    }

    .lp-header-right{

        flex-direction:column;
        align-items:flex-start;
    }

}

/* ==========================================================
   ACTION GROUP STRUCTURE
   Shared mechanics for groups of buttons and linked calls
   to action. Brand stylesheets control gap, alignment,
   spacing, direction changes, and responsive behavior.
========================================================== */

.lp-action-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;

  min-width: 0;
}


/* ==========================================================
   SECTION ASSEMBLY STRUCTURE
   Shared semantic roles for the inner wrapper, primary content,
   and optional footer of a page section. Brand stylesheets own
   all vertical rhythm, spacing, widths, alignment, and responsive
   behavior.
========================================================== */

.lp-section-inner,
.lp-section-header,
.lp-section-body,
.lp-section-footer {
  min-width: 0;
}


/* ==========================================================
   SECTION HEADING SYSTEM
   Shared semantic structure for page and section headings.
   Brand stylesheets control typography, color, scale,
   alignment, spacing variations, and decorative treatments.
========================================================== */

.lp-section-eyebrow,
.lp-section-title {
  margin: 0;
}


/* ==========================================================
   CONTENT LAYOUT STRUCTURE
   Shared mechanics for multi-region content layouts and
   split section headers. Brand stylesheets control column
   proportions, gaps, alignment, stacking, and breakpoints.
========================================================== */

.lp-content-layout,
.lp-section-split {
  display: grid;
  min-width: 0;
}

.lp-content-primary,
.lp-content-secondary,
.lp-section-support {
  min-width: 0;
}


/* ==========================================================
   SURFACE CARD STRUCTURE
   Shared mechanics for non-media content surfaces. Brand
   stylesheets control backgrounds, borders, shadows, radius,
   spacing, typography, and decorative treatments.
========================================================== */

.lp-card {
  position: relative;
  min-width: 0;
}

.lp-card-header,
.lp-card-body,
.lp-card-footer {
  min-width: 0;
}

.lp-card-body {
  position: relative;
}

/* ==========================================================
   FORM STRUCTURE
   Shared mechanics for forms and form controls. Brand
   stylesheets control layout proportions, spacing, colors,
   borders, typography, focus treatments, and field variants.
========================================================== */

.lp-form,
.lp-form-grid,
.lp-form-field {
  min-width: 0;
}

.lp-form-grid {
  display: grid;
}

.lp-form-field {
  margin: 0;
  padding: 0;

  border: 0;
}

.lp-label,
.lp-field-help {
  display: block;
}

.lp-input,
.lp-select,
.lp-textarea {
  display: block;

  width: 100%;
  max-width: 100%;
}

.lp-form-actions {
  display: flex;
}

.lp-form-honeypot {
  position: absolute;
  left: -5000px;

  width: 1px;
  height: 1px;

  overflow: hidden;
}

/* ==========================================================
   LOCATION AND CONTACT STRUCTURE
   Shared mechanics for restaurant location listings and
   contact details. Brand stylesheets control grid columns,
   spacing, surfaces, typography, colors, icons, and motion.
========================================================== */

.lp-location-grid {
  display: grid;
}

.lp-location-card {
  display: flex;
  flex-direction: column;

  min-width: 0;
}

.lp-location-card-header {
  min-width: 0;
}

.lp-contact-list {
  display: flex;
  flex-direction: column;

  margin: 0;

  font-style: normal;
}

.lp-contact-link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;

  min-width: 0;

  text-decoration: none;
}

.lp-social-links {
  display: flex;
  align-items: center;
}

.lp-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  text-decoration: none;
}

/* ==========================================================
   MEDIA CARD STRUCTURE
   Shared card mechanics. Brand stylesheets control color,
   borders, shadows, typography, overlays, and proportions.
========================================================== */

.lp-media-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;

  min-height: 0;

  transform: translateZ(0);

  transition:
    transform var(--lp-transition-standard),
    box-shadow var(--lp-transition-standard);
}

.lp-media-card-media {
  position: absolute;
  inset: 0;

  transition:
    transform var(--lp-transition-slow),
    filter .4s ease;
}

.lp-media-card-object {
  position: absolute;
  inset: 0;

  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
}

.lp-media-card-fallback {
  z-index: 0;
}

.lp-media-card-video {
  z-index: 1;

  opacity: 0;
  pointer-events: none;

  transition: opacity .35s ease;
}

.lp-media-card-video.is-playing {
  opacity: 1;
}

.lp-media-card-video.is-unavailable {
  display: none;
}

.lp-media-card-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.lp-media-card-content {
  position: absolute;
  inset: auto 0 0;
  z-index: 2;
}

.lp-media-card:hover {
  transform: translateY(-7px);
}

.lp-media-card:hover .lp-media-card-media {
  transform: scale(1.05);
}


/* ---------- Hero ---------- */

.lp-hero {
  position: relative;
  height: 85vh;
  overflow: hidden;
  background-position: center;
  background-size: cover;
}

.lp-hero-video {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;
  pointer-events: none;
}

.lp-hero-video.is-unavailable {
	display: none;
}

.lp-hero-overlay {
  position: absolute;
  inset: 0;
}

.lp-hero-content {
  position: absolute;
  inset: 0;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  padding: 0 1rem;
  text-align: center;
  transform: translateY(-24px);
}

.lp-hero-title {
  display: flex;
  flex-direction: column;
  align-items: center;

  margin: 0;
  line-height: .95;
}

.lp-hero-subtitle {
  max-width: 900px;
  margin: 1rem auto 0;

  line-height: 1.3;
}

.lp-hero-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.8rem;

  margin-top: 38px;
}


/* ---------- Responsive ---------- */

@media (max-width: 991.98px) {
	:root {
		--lp-header-height: 104px;
	}
  .lp-container-wide {
    padding-inline: 24px;
  }
}

@media (max-width: 575.98px) {
  .lp-hero {
    height: 100vh;
    min-height: 680px;
  }

  .lp-hero-buttons {
    width: 100%;
    gap: 14px;
    margin-top: 28px;
  }


}