/*
Theme Name: Open Table Advisory
Theme URI: https://opentableadvisory.com
Author: Open Table Advisory
Description: Custom brand-locked theme for Open Table Advisory — APAC Market Entry & Growth Advisory. Built from the approved Website Blueprint & Developer Brief.
Version: 1.0.0
Requires PHP: 7.4
Text Domain: opentable
*/

/* =========================================================
   BRAND TOKENS — approved palette, do not alter values
   Ivory #F7F3EA · Charcoal #1D2423 · Copper #B85F33
   Taupe #B8A58F · Stone #DAD7CF
   ========================================================= */
:root{
  --ot-ivory:  #F7F3EA;
  --ot-charcoal: #1D2423;
  --ot-copper: #B85F33;
  --ot-taupe:  #B8A58F;
  --ot-stone:  #DAD7CF;

  --ot-font-display: "Cormorant Garamond", Georgia, serif;
  --ot-font-sans: "Inter", "Noto Sans", -apple-system, BlinkMacSystemFont, sans-serif;

  --ot-h1-desktop: 64px;
  --ot-h1-mobile: 38px;
  --ot-body: 17px;
  --ot-label: 12px;

  --ot-max-width: 1160px;
  --ot-radius: 2px;
}

/* =========================================================
   RESET / BASE
   ========================================================= */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--ot-ivory);
  color: var(--ot-charcoal);
  font-family: var(--ot-font-sans);
  font-size: var(--ot-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color: var(--ot-copper); text-decoration:none; }
a:hover{ text-decoration: underline; }

h1,h2,h3,h4{
  font-family: var(--ot-font-display);
  font-weight: 600;
  color: var(--ot-charcoal);
  line-height: 1.2;
  margin: 0 0 20px;
}
h1{ font-size: var(--ot-h1-mobile); margin-bottom: 24px; }
@media (min-width:900px){ h1{ font-size: var(--ot-h1-desktop); } }
h2{ font-size: 30px; margin-top: 48px; margin-bottom: 20px; }
h2:first-child{ margin-top: 0; }
h3{ font-size: 20px; margin-top: 28px; margin-bottom: 12px; }
h3:first-child{ margin-top: 0; }
h4{ font-size: 17px; margin-top: 20px; margin-bottom: 10px; }

p{ margin: 0 0 20px; }
p:last-child{ margin-bottom: 0; }

ul, ol{ margin: 0 0 20px; padding-left: 22px; line-height: 1.75; }
ul li, ol li{ margin-bottom: 6px; }

blockquote{ margin: 32px 0; }

.ot-label{
  font-family: var(--ot-font-sans);
  font-size: var(--ot-label);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ot-copper);
  font-weight: 600;
  display:block;
  margin-bottom: 12px;
}

.ot-container{
  max-width: var(--ot-max-width);
  margin: 0 auto;
  padding: 0 24px;
}

.ot-section{
  padding: 80px 24px !important;
  max-width: var(--ot-max-width);
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  border-bottom: 1px solid var(--ot-stone);
  margin-bottom: 8px;
}
/* Full-bleed background sections must span the entire viewport width for
   their color band — override the max-width/centering above so the color
   isn't capped. Inner content still gets inset via padding on the
   .has-background group rule below, so text doesn't touch the edges. */
.ot-section--stone,
.ot-section--charcoal{
  max-width: none !important;
  width: 100%;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.ot-section--stone{ background: var(--ot-stone); }
/* Automatically apply the EASI-style copper divider to any 4-column layout
   inside a stone section — covers both the hardcoded template AND any
   content pasted via the block editor (Homepage, EASI page), without
   needing a special class on each column. */
.ot-section--stone .wp-block-columns > .wp-block-column{
  border-left: 3px solid var(--ot-copper);
  padding-left: 20px;
  padding-top: 4px;
}
.ot-section--charcoal{ background: var(--ot-charcoal); color: var(--ot-ivory); }
.ot-section--charcoal h1, .ot-section--charcoal h2, .ot-section--charcoal h3{ color: var(--ot-ivory); }

.ot-btn{
  display:inline-block;
  background: var(--ot-charcoal);
  color: var(--ot-ivory);
  padding: 16px 32px;
  border-radius: var(--ot-radius);
  font-family: var(--ot-font-sans);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.02em;
  transition: background 0.2s ease;
}
.ot-btn:hover{ background: var(--ot-copper); text-decoration:none; color:#fff; }
.ot-btn--copper{ background: var(--ot-copper); color:#fff; }
.ot-btn--copper:hover{ background: var(--ot-charcoal); }

/* =========================================================
   HEADER
   ========================================================= */
.ot-header{
  background: var(--ot-ivory);
  border-bottom: 1px solid var(--ot-stone);
  position: sticky; top:0; z-index: 100;
  width: 100%;
}
.ot-header__inner{
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 20px 40px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap: 56px;
  box-sizing: border-box;
}
.ot-header__logo img{ max-height: 34px; width: auto; display:block; }
.ot-header__logo{ font-family: var(--ot-font-display); font-size: 24px; font-weight:700; color: var(--ot-charcoal); display:flex; align-items:center; flex-shrink: 0; }
.ot-nav{ flex: 1 1 auto; }
.ot-header__cta{ margin-left: auto; flex-shrink: 0; }
.ot-nav ul{ list-style:none; display:flex; gap:28px; margin:0; padding:0; align-items:center; }
.ot-nav a{ color: var(--ot-charcoal); font-size:15px; font-weight:500; }
.ot-nav a:hover{ color: var(--ot-copper); text-decoration:none; }
.ot-menu-toggle{ display:none; background:none; border:none; font-size:28px; line-height:1; cursor:pointer; transition: color 0.15s ease; }
.ot-menu-toggle.is-open{ color: var(--ot-copper); }

/* Single, reliable breakpoint — switches to hamburger mode below 1024px.
   No JS dependency for this switch; JS only handles the open/close click. */
@media (max-width: 1024px){
  .ot-header__inner{
    padding: 16px 20px;
    gap: 12px;
  }
  .ot-header__logo img{ max-height: 28px; }
  .ot-header__cta .ot-btn{
    padding: 8px 14px;
    font-size: 12px;
    white-space: nowrap;
  }
  .ot-nav{
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--ot-ivory);
    border-top: 1px solid var(--ot-stone);
    box-shadow: 0 12px 24px rgba(29,36,35,0.12);
    z-index: 99;
  }
  .ot-nav:not(.is-open){ display: none; }
  .ot-nav ul{
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 40px 16px;
  }
  .ot-nav ul li{ border-bottom: 1px solid var(--ot-stone); }
  .ot-nav ul li:last-child{ border-bottom: none; }
  .ot-nav a{ display:block; padding:14px 0; font-size:16px; }
  .ot-menu-toggle{ display: block; }
}

/* =========================================================
   HERO
   ========================================================= */
.ot-hero{
  padding: 100px 0 90px;
  background: linear-gradient(135deg, var(--ot-ivory) 55%, var(--ot-stone) 100%);
}
.ot-hero__grid{
  display:grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 60px;
  align-items:center;
}
@media (max-width: 860px){ .ot-hero__grid{ grid-template-columns: 1fr; } }
.ot-hero__tagline{ font-family: var(--ot-font-display); font-size: 42px; margin-bottom: 20px; }
.ot-hero__sub{ font-size: 18px; color:#4b524f; max-width: 480px; margin-bottom: 32px; }
.ot-hero__proof{ font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ot-taupe); margin-top: 18px; }
.ot-hero__image{ background: var(--ot-stone); min-height: 340px; border-radius: var(--ot-radius); }

/* Full-bleed hero variant: image stretches to the true browser edge on the
   right, text column stays aligned with the site's normal container width. */
.ot-hero__grid-bleed,
.ot-hero__grid-bleed > .wp-block-group__inner-container{
	display: flex;
	align-items: stretch;
	min-height: 480px;
}
.ot-hero__text{
	width: min(560px, 46%);
	flex-shrink: 0;
	padding-left: max(24px, calc((100vw - 1160px) / 2 + 24px));
	padding-right: 48px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.ot-hero__image--bleed{
	flex: 1 1 auto;
	min-height: 480px;
	background: var(--ot-stone);
	position: relative;
	overflow: hidden;
}
.ot-hero__image--bleed.wp-block-cover{
	background-size: cover !important;
	background-position: center !important;
}
.ot-hero__image--bleed img,
.ot-hero__image--bleed .wp-block-cover__image-background{
	position: absolute !important;
	inset: 0 !important;
	object-fit: cover !important;
	object-position: center !important;
	height: 100% !important;
	width: 100% !important;
	margin: 0 !important;
}
@media (max-width: 900px){
	.ot-hero__grid-bleed,
	.ot-hero__grid-bleed > .wp-block-group__inner-container{ flex-direction: column; min-height: 0; }
	.ot-hero__text{ width: 100%; padding: 40px 24px 32px; }
	.ot-hero__image--bleed{ min-height: 320px; }
}

/* =========================================================
   PROBLEM SECTION
   ========================================================= */
.ot-problem p{ font-size: 20px; max-width: 760px; font-family: var(--ot-font-display); }

/* =========================================================
   VERTICAL CARDS
   ========================================================= */
.ot-verticals{ display:grid; grid-template-columns: repeat(4,1fr); gap: 24px; align-items: stretch; }
@media (max-width: 900px){ .ot-verticals{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .ot-verticals{ grid-template-columns: 1fr; } }
/* When used as a WP Columns block (homepage service cards) instead of the
   archive's CSS grid, force the same equal-height stretch behavior. */
.wp-block-columns.ot-verticals{ align-items: stretch !important; }
.ot-vertical-card{
  display: flex !important;
  flex-direction: column !important;
  height: 100%;
  box-sizing: border-box;
  background:#fff;
  border: 1px solid var(--ot-stone);
  padding: 28px 24px !important;
  border-radius: var(--ot-radius);
}
.ot-vertical-card.ot-filter-hidden{
  display: none !important;
}
.ot-vertical-card > .wp-block-group__inner-container{
  padding: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.ot-vertical-card .ot-label{ margin-bottom: 12px; }
.ot-vertical-card p{ font-size: 15px; color:#4b524f; margin-bottom: 16px; }
.ot-card-cta{
  color: var(--ot-copper);
  font-size: 14px;
  font-weight: 600;
  margin-top: auto;
  padding-top: 8px;
}

/* =========================================================
   EASI METHOD
   ========================================================= */
.ot-easi{ display:grid; grid-template-columns: repeat(4,1fr); gap: 24px; }
@media (max-width: 860px){ .ot-easi{ grid-template-columns: repeat(2,1fr); } }
.ot-easi-step{ border-left: 3px solid var(--ot-copper); padding-left: 18px; }
.ot-easi-step__letter{ font-family: var(--ot-font-display); font-size: 36px; color: var(--ot-copper); display:block; }

/* =========================================================
   CONSULTATION / FORM PAGE
   ========================================================= */
.ot-consult-fee{
  background:#fff;
  border: 1px solid var(--ot-stone);
  padding: 24px 28px;
  border-radius: var(--ot-radius);
  margin-bottom: 36px;
  max-width: 560px;
}
.ot-consult-fee strong{ font-family: var(--ot-font-display); font-size: 22px; display:block; margin-bottom:6px; }

/* =========================================================
   FOOTER
   ========================================================= */
.ot-footer{
  background: var(--ot-charcoal);
  color: var(--ot-stone);
  padding: 60px 0 30px;
  font-size: 14px;
}
.ot-footer a{ color: var(--ot-stone); }
.ot-footer__grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 40px; margin-bottom: 40px; }
@media (max-width: 700px){ .ot-footer__grid{ grid-template-columns: 1fr; } }
.ot-footer__bottom{ border-top: 1px solid #3a423f; padding-top: 20px; font-size: 12px; color: var(--ot-taupe); display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; }

/* =========================================================
   BLOCK EDITOR COLOR + TYPE SUPPORT
   Matches the classes WordPress generates from editor-color-palette
   and editor-font-sizes in functions.php.
   ========================================================= */
.has-ot-ivory-color{ color: var(--ot-ivory) !important; }
.has-ot-charcoal-color{ color: var(--ot-charcoal) !important; }
.has-ot-copper-color{ color: var(--ot-copper) !important; }
.has-ot-taupe-color{ color: var(--ot-taupe) !important; }
.has-ot-stone-color{ color: var(--ot-stone) !important; }

.has-ot-ivory-background-color{ background-color: var(--ot-ivory) !important; }
.has-ot-charcoal-background-color{ background-color: var(--ot-charcoal) !important; color: var(--ot-ivory); }
.has-ot-copper-background-color{ background-color: var(--ot-copper) !important; color: #fff; }
.has-ot-taupe-background-color{ background-color: var(--ot-taupe) !important; }
.has-ot-stone-background-color{ background-color: var(--ot-stone) !important; }

.has-small-font-size{ font-size: 14px !important; }
.has-body-font-size{ font-size: var(--ot-body) !important; }
.has-large-font-size{ font-size: 22px !important; font-family: var(--ot-font-display); }
.has-display-font-size{ font-size: 38px !important; font-family: var(--ot-font-display); font-weight:600; }

/* Give WP core blocks used on content pages the same look as the rest of the site */
.wp-block-group{ padding: 48px 0; }
.wp-block-group.has-background{ padding: 72px 40px; border-radius: var(--ot-radius); margin-bottom: 24px; }
.ot-center-block{ text-align: center; }
.ot-center-block .wp-block-buttons{ justify-content: center; }
.wp-block-separator{ border-color: var(--ot-stone); margin: 40px 0; }
.wp-block-quote{
	border-left: 3px solid var(--ot-copper);
	padding-left: 20px;
	margin: 32px 0;
	font-family: var(--ot-font-display);
	font-size: 24px;
	font-style: italic;
}
.wp-block-quote cite{ font-family: var(--ot-font-sans); font-style: normal; font-size: 13px; color: var(--ot-taupe); }
.wp-block-button__link{
	background: var(--ot-copper) !important;
	color: #fff !important;
	border-radius: var(--ot-radius) !important;
	padding: 16px 32px !important;
	font-weight: 600;
	font-size: 15px !important;
	letter-spacing: 0.02em;
	font-family: var(--ot-font-sans);
}
.wp-block-button__link:hover{ background: var(--ot-charcoal) !important; }
/* Higher-specificity override in case a block sets its own inline color/radius */
.wp-block-button .wp-block-button__link,
.wp-block-button__link.has-background,
.wp-block-button__link.has-text-color{
	background-color: var(--ot-copper) !important;
	color: #fff !important;
	border-radius: 2px !important;
}
.wp-block-buttons{ justify-content: center; }
.wp-block-buttons.is-content-justification-center{ justify-content: center; }
.ot-consult-form{ margin-top: 20px; }
/* Safety net: hide Fluent Forms' default form-title output if the plugin's
   own "Enable Form Title" setting is left on — the theme provides its own
   heading, so a second one is redundant/looks like an untitled placeholder. */
.ot-consult-form .ff-form-title,
.ot-consult-form .fluentform .ff-el-form-heading{ display:none !important; }
.wp-block-columns{ gap: 32px; }

/* Client Pathway Examples filter — understated text links matching the
   site's uppercase/letter-spaced label style, not generic pill buttons. */
.ot-pathway-filters{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
	margin-bottom: 40px;
	border-bottom: 1px solid var(--ot-stone);
	padding-bottom: 4px;
}
.ot-filter-btn{
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background: none !important;
	border: none !important;
	border-bottom: 2px solid transparent !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	outline: none;
	color: var(--ot-taupe);
	font-family: var(--ot-font-sans);
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding: 10px 14px 12px;
	margin-bottom: -1px;
	cursor: pointer;
	transition: color 0.15s ease, border-color 0.15s ease;
	white-space: nowrap;
}
.ot-filter-btn:hover{ color: var(--ot-charcoal); }
.ot-filter-btn.is-active{
	color: var(--ot-copper) !important;
	border-bottom-color: var(--ot-copper) !important;
}

/* Latest Pathways section on homepage — styles the native Query Loop
   block output to match the existing vertical-card look. */
.ot-pathways-grid{
	margin-top: 24px !important;
	margin-bottom: 40px !important;
}
.ot-pathways-grid .wp-block-post-template{
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 24px !important;
	list-style: none;
	margin: 32px 0 0;
	padding: 0;
}
.ot-pathways-grid .wp-block-post-template > li,
.ot-pathways-grid .wp-block-post-template > div{
	margin: 0 !important;
	width: auto !important;
	flex: none !important;
}
@media (max-width: 900px){
	.ot-pathways-grid .wp-block-post-template{ grid-template-columns: repeat(2,1fr) !important; }
}
@media (max-width: 600px){
	.ot-pathways-grid .wp-block-post-template{ grid-template-columns: 1fr !important; }
}
.ot-pathways-grid .ot-vertical-card a{ color:inherit; text-decoration:none; }
.ot-pathways-grid .wp-block-post-title{ font-size:18px; margin-bottom:8px; }
.ot-pathways-grid .wp-block-post-excerpt{ font-size:14px; color:#4b524f; }