/*!
 * Crazy Cantina — shared page kit
 * The visual language of /menu/ and /careers/, factored out so every restyled page
 * speaks it without re-inlining 7KB of identical CSS.
 *
 * Everything is scoped under .ccpage, so loading this site-wide cannot touch
 * Elementor, the header/footer templates, or the menu page's own .ccmenu rules.
 *
 * Pages using it: /catering/, /contact/, /gift-card/, / (home bands).
 * /careers/ and /about-us/ still carry their own inline copy of the same rules —
 * identical values, so they render the same either way. Migrate them here if they
 * are ever touched again.
 */

@font-face{font-family:'CCTrajan';src:url('/wp-content/uploads/2026/06/TrajanPro-Bold.otf') format('opentype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'CCTrajan';src:url('/wp-content/uploads/2026/06/TrajanPro-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'CCMessiri';src:url('/wp-content/uploads/2026/06/ElMessiri-VariableFont_wght.ttf') format('truetype');font-weight:400 700;font-style:normal;font-display:swap}

.ccpage{
  --ink:#1a1a1a;--copper:#A85E3E;--copper-dk:#8a4a2f;--orange:#F09542;--sand:#DABD9A;
  --paper:#f7f1e8;--paper2:#fbf7f0;--rule:#d8c4a6;--muted:#6d6459;--dark:#14100e;--navy:#111434;
  font-family:'CCMessiri','El Messiri',Georgia,serif;color:var(--ink);line-height:1.55;
  -webkit-font-smoothing:antialiased;
  /* --ccvw is the viewport MINUS the scrollbar; the fallback is 100%, NEVER 100vw,
     which would force a horizontal scrollbar on every page that uses this. */
  width:var(--ccvw,100%);margin-left:calc(50% - var(--ccvw,100%)/2)}
.ccpage *{box-sizing:border-box}
.ccpage img{max-width:100%;display:block}
.ccpage p{margin:0}

/* ---------- shared marks ---------- */
.ccpage .ab-rule{display:block;position:relative;width:min(260px,72%);height:1px;margin:0 auto;
  background:linear-gradient(90deg,transparent,rgba(218,189,154,.9),transparent)}
.ccpage .ab-rule::after{content:"";position:absolute;left:50%;top:50%;width:7px;height:7px;
  transform:translate(-50%,-50%) rotate(45deg);background:var(--sand)}
.ccpage .eyebrow{font-family:'CCTrajan',serif;font-weight:700;font-size:13px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--orange);margin:0 0 10px}
.ccpage h2{font-family:'CCTrajan',serif;font-weight:700;letter-spacing:.05em;
  font-size:clamp(30px,5.2vw,54px);line-height:1.04;margin:0}
.ccpage h3{font-family:'CCTrajan',serif;font-weight:700;letter-spacing:.05em;margin:0}
.ccpage .lede{max-width:680px;margin:0 auto;font-size:16.5px}

/* the spaced Trajan label that separates a group inside a band */
.ccpage .cc-label{font-family:'CCTrajan',serif;font-weight:700;font-size:14px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--orange);margin:52px 0 26px}

/* ---------- photo hero ---------- */
.ccpage .ab-hero{position:relative;isolation:isolate;overflow:hidden;text-align:center;
  padding:138px 22px 74px;background:var(--dark) center/cover no-repeat}
.ccpage .ab-hero::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(10,8,6,.74),rgba(10,8,6,.46) 46%,rgba(10,8,6,.84))}
.ccpage .ab-hero h1{font-family:'CCTrajan',serif;font-weight:700;color:#fff;
  font-size:clamp(38px,7.6vw,74px);letter-spacing:.07em;line-height:1;margin:20px 0 14px;
  text-shadow:0 4px 26px rgba(0,0,0,.5)}
.ccpage .ab-hero .ab-eye{font-family:'CCTrajan',serif;font-weight:700;font-size:13px;
  letter-spacing:.24em;text-transform:uppercase;color:var(--sand);margin:0 0 4px}
.ccpage .ab-hero .ab-sub{font-size:clamp(17px,2.6vw,25px);color:var(--orange);margin:0 0 20px}
/* Every page hero is ONE size, whatever its content — /catering/ (the tallest, because it
   carries two CTAs) sets the bar and the rest are held to it. Excludes .cc-close, which
   reuses .ab-hero for the closing CTA band, and the homepage, whose hero is .cchero. */
.ccpage .ab-hero:not(.cc-close){min-height:474px;display:flex;flex-direction:column;
  align-items:center;justify-content:center}
@media(max-width:700px){.ccpage .ab-hero:not(.cc-close){min-height:400px}}

/* Exception to the .ccpage scoping, on purpose: /menu/ and /drinks/ open with .ccmenu .intro
   rather than .ab-hero, and they are page heroes too — same height as everything else. */
.ccmenu .intro{min-height:474px;display:flex;flex-direction:column;align-items:center;
  justify-content:center}
@media(max-width:700px){.ccmenu .intro{min-height:400px}}

/* ---------- bands ---------- */
.ccpage .cc-dark{background:var(--dark);color:#fff;padding:78px 22px 86px;text-align:center;
  position:relative;overflow:hidden}
.ccpage .cc-dark::before{content:"";position:absolute;inset:0;opacity:.5;pointer-events:none;
  background-image:radial-gradient(circle at 50% 50%,rgba(168,94,62,.16) 1.4px,transparent 1.5px);
  background-size:26px 26px}
.ccpage .cc-dark>*{position:relative;z-index:1}
.ccpage .cc-dark h2,.ccpage .cc-dark h3{color:#fff}
.ccpage .cc-dark .ab-rule{margin:20px auto 26px}
.ccpage .cc-dark .lede{color:rgba(255,255,255,.78)}
.ccpage .cc-dark .lede+.lede{margin-top:14px}

.ccpage .cc-paper{background:var(--paper);padding:78px 22px 86px;text-align:center;
  position:relative;overflow:hidden}
.ccpage .cc-paper .lede{color:#4a443c}
.ccpage .cc-paper .lede+.lede{margin-top:14px}
.ccpage .cc-paper .eyebrow{color:var(--copper)}
.ccpage .cc-paper .cc-label{color:var(--copper-dk)}

.ccpage .cc-wrap{max-width:1120px;margin:0 auto}

/* ---------- cards ---------- */
/* dark card, as on /careers/ */
.ccpage .cc-card{background:rgba(255,255,255,.035);border:1px solid rgba(218,189,154,.17);
  border-radius:18px;padding:26px 26px 28px;text-align:left;display:flex;flex-direction:column;
  transition:border-color .22s ease,transform .22s ease,box-shadow .22s ease}
.ccpage .cc-card:hover{border-color:var(--copper);transform:translateY(-3px);
  box-shadow:0 16px 34px rgba(0,0,0,.42)}
.ccpage .cc-card h3{font-size:19px;text-transform:uppercase;margin:0 0 10px;color:var(--sand)}
.ccpage .cc-card p{font-size:14.8px;color:rgba(255,255,255,.74);line-height:1.6}

/* cream card, as on /menu/ */
.ccpage .cc-tile{background:var(--paper2);border:1px solid var(--rule);border-radius:16px;
  padding:22px 20px 20px;text-align:center;display:flex;flex-direction:column;align-items:center;
  transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}
.ccpage .cc-tile:hover{border-color:var(--copper);box-shadow:0 10px 26px rgba(168,94,62,.13);
  transform:translateY(-2px)}
.ccpage .cc-tile h3{font-size:16px;text-transform:uppercase;margin:0 0 8px;color:var(--ink)}
.ccpage .cc-tile p{font-size:13.6px;color:#4a443c;line-height:1.55}

/* the small diamond-bulleted chip, as on /careers/ */
.ccpage .cc-chip{border:1px solid rgba(218,189,154,.2);border-radius:14px;padding:20px;
  text-align:left;font-size:14.6px;color:rgba(255,255,255,.78);line-height:1.55;
  background:rgba(168,94,62,.10)}
.ccpage .cc-chip::before{content:"";display:block;width:8px;height:8px;margin-bottom:12px;
  transform:rotate(45deg);background:var(--orange)}
.ccpage .cc-paper .cc-chip{border-color:var(--rule);background:var(--paper2);color:#4a443c}

/* auto grids */
.ccpage .cc-grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.ccpage .cc-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.ccpage .cc-grid.four{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:860px){.ccpage .cc-grid.four{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:660px){
  .ccpage .cc-grid.two,.ccpage .cc-grid.four{grid-template-columns:minmax(0,1fr)}
}

/* ---------- buttons ---------- */
.ccpage .cc-btns{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:26px}
.ccpage .btn{display:inline-flex;align-items:center;gap:10px;border-radius:40px;
  padding:12px 30px;font-family:'CCTrajan',serif;font-weight:700;font-size:13.5px;
  letter-spacing:.14em;text-transform:uppercase;text-decoration:none;cursor:pointer;
  border:1.5px solid transparent;transition:background .2s ease,color .2s ease,
  border-color .2s ease,box-shadow .2s ease,transform .2s ease}
.ccpage .btn-solid{background:var(--copper);color:#fff;border-color:var(--copper)}
.ccpage .btn-solid:hover{background:var(--copper-dk);border-color:var(--copper-dk);
  box-shadow:0 10px 26px rgba(168,94,62,.34);transform:translateY(-1px)}
.ccpage .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.ccpage .btn-ghost:hover{background:#fff;color:var(--ink);border-color:#fff}
.ccpage .cc-paper .btn-ghost{color:var(--copper-dk);border-color:var(--copper)}
.ccpage .cc-paper .btn-ghost:hover{background:var(--copper);color:#fff;border-color:var(--copper)}

/* the underlined Trajan micro-link, as on the careers role cards */
.ccpage .cc-more{margin-top:auto;align-self:flex-start;font-family:'CCTrajan',serif;
  font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  text-decoration:none;color:var(--orange);border-bottom:1.5px solid rgba(240,149,66,.42);
  padding-bottom:3px;transition:color .18s ease,border-color .18s ease}
.ccpage .cc-more:hover{color:#fff;border-color:#fff}
.ccpage .cc-paper .cc-more{color:var(--copper-dk);border-color:rgba(168,94,62,.42)}
.ccpage .cc-paper .cc-more:hover{color:var(--ink);border-color:var(--ink)}

/* ---------- split: copy beside a photo ---------- */
.ccpage .cc-split{display:grid;gap:44px;align-items:center;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);text-align:left;max-width:1120px;margin:0 auto}
.ccpage .cc-split.rev>:first-child{order:2}
.ccpage .cc-split .cc-shot{border-radius:18px;overflow:hidden;box-shadow:0 22px 50px rgba(0,0,0,.35)}
.ccpage .cc-split .cc-shot img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.ccpage .cc-split .ab-rule{margin:18px 0 22px}
/* a half-width column cannot carry the full display size without wrapping to three lines */
.ccpage .cc-split h2{font-size:clamp(26px,3.6vw,42px)}
@media(max-width:860px){
  .ccpage .cc-split{grid-template-columns:minmax(0,1fr);gap:30px}
  .ccpage .cc-split.rev>:first-child{order:0}
}

/* ---------- numbered steps ---------- */
.ccpage .cc-steps{display:grid;gap:26px;grid-template-columns:repeat(4,minmax(0,1fr));
  max-width:1060px;margin:34px auto 0;counter-reset:step}
.ccpage .cc-step{text-align:center}
.ccpage .cc-step .n{width:56px;height:56px;margin:0 auto 16px;display:flex;align-items:center;
  justify-content:center;font-family:'CCTrajan',serif;font-weight:700;font-size:20px;
  color:var(--orange);border:1.5px solid rgba(240,149,66,.5);transform:rotate(45deg)}
.ccpage .cc-step .n span{transform:rotate(-45deg)}
.ccpage .cc-step h3{font-size:15px;text-transform:uppercase;margin:0 0 8px;color:var(--sand)}
.ccpage .cc-step p{font-size:14px;color:rgba(255,255,255,.72);line-height:1.6}
.ccpage .cc-paper .cc-step h3{color:var(--copper-dk)}
.ccpage .cc-paper .cc-step p{color:#4a443c}
@media(max-width:860px){.ccpage .cc-steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.ccpage .cc-steps{grid-template-columns:minmax(0,1fr)}}

/* ---------- photo tiles with a caption over the image ---------- */
.ccpage .cc-photo{position:relative;border-radius:16px;overflow:hidden;isolation:isolate;
  aspect-ratio:3/4;display:flex;align-items:flex-end;
  transition:transform .22s ease,box-shadow .22s ease}
.ccpage .cc-photo:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(0,0,0,.4)}
.ccpage .cc-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.ccpage .cc-photo::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(10,8,6,.05) 34%,rgba(10,8,6,.86))}
.ccpage .cc-photo .cap{padding:22px 20px;text-align:left;width:100%}
.ccpage .cc-photo .cap h3{font-size:16px;text-transform:uppercase;color:#fff;margin:0 0 6px;
  text-shadow:0 2px 14px rgba(0,0,0,.6)}
.ccpage .cc-photo .cap p{font-size:13.4px;color:rgba(255,255,255,.82);line-height:1.5}

@media(max-width:700px){
  .ccpage .ab-hero{padding:120px 20px 56px}
  .ccpage .cc-dark,.ccpage .cc-paper{padding:60px 20px 66px}
}

/* ---------- Elementor form, restyled to the kit ----------
   Same treatment as the /careers/ "Apply Now" card (which still carries its own inline
   copy as .cc-applyform). Put .cc-form on the CONTAINER holding the form widget. */
.cc-form{background:#faf4e6;border:1px solid #e2d2b4;border-radius:22px;
  padding:34px 32px 30px;box-shadow:0 20px 46px rgba(90,58,32,.13)}
.cc-form .elementor-field-group>label.elementor-field-label{
  font-family:'CCMessiri','El Messiri',Georgia,serif;font-size:13.5px;color:#6d6459;
  margin-bottom:7px;font-weight:600}
.cc-form .elementor-field-group .elementor-field-textual{
  width:100%;background:#fffdf7;border:1px solid #ddcaa8;border-radius:11px;
  padding:13px 15px;font-family:'CCMessiri','El Messiri',Georgia,serif;font-size:15px;color:#1a1a1a;
  box-shadow:none;transition:border-color .18s ease,box-shadow .18s ease;min-height:48px}
.cc-form .elementor-field-group .elementor-field-textual:focus{
  border-color:#A85E3E;box-shadow:0 0 0 3px rgba(168,94,62,.14);outline:none}
.cc-form .elementor-field-group .elementor-field-textual::placeholder{color:#a89b88}
.cc-form textarea.elementor-field-textual{min-height:120px;resize:vertical}
.cc-form select.elementor-field-textual{appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,#8a4a2f 50%),linear-gradient(135deg,#8a4a2f 50%,transparent 50%);
  background-position:calc(100% - 20px) 21px,calc(100% - 14px) 21px;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:44px}
.cc-form .elementor-button[type=submit]{
  width:100%;justify-content:center;background:#A85E3E;border:none;border-radius:40px;
  padding:15px 30px;font-family:'CCTrajan',serif;font-weight:700;font-size:13.5px;letter-spacing:.14em;
  text-transform:uppercase;color:#fff;cursor:pointer;
  transition:background .2s ease,box-shadow .2s ease,transform .2s ease}
.cc-form .elementor-button[type=submit]:hover{background:#8a4a2f;
  box-shadow:0 10px 24px rgba(168,94,62,.34);transform:translateY(-1px)}
.cc-form .elementor-message{font-family:'CCMessiri','El Messiri',Georgia,serif;font-size:14.5px}
.cc-form .elementor-message.elementor-message-success{color:#2f6b3c}
.cc-form .elementor-message.elementor-message-danger{color:#a33}
.cc-form .elementor-field-required .elementor-field-label:after{color:#A85E3E}
@media(max-width:900px){.cc-form{padding:26px 20px 24px}}