/* =====================================
html{scroll-behavior:smooth}
body{
margin:0; color:var(--rf-paper); background:var(--rf-ink);
font: 400 18px/1.6 "LibreBaskerville", Georgia, serif;
}
img{max-width:100%; height:auto; display:block}
/* Layout helpers */
.rf-container{width:min(1100px, 92%); margin-inline:auto}
.rf-section{padding:72px 0}
.rf-section--tight{padding:36px 0}
.rf-section--alt{background:linear-gradient(180deg, #171717 0, #1f1f1f 100%)}
.rf-h{font: 700 40px/1.2 "CormorantGaramond", Georgia, serif; letter-spacing:.5px; margin:0 0 18px; color:var(--rf-gold)}
.rf-order-wrap { max-width: 980px; margin: 0 auto; padding: 24px 16px 48px; }
.rf-hero { text-align: center; margin: 8px 0 20px; }
.rf-title { font-size: clamp(28px, 4vw, 40px); color:#b4934c; margin: 0 0 6px; }
.rf-subtitle { color: #7a581c; margin: 0; }
.rf-form-card { background: #fff; border: 1px solid #eee; border-radius: 14px; padding: 16px; box-shadow: 0 5px 20px rgba(0,0,0,.04); }
.rf-faq { margin-top: 28px; }
.rf-faq h2 { margin-bottom: 8px; font-size: 20px; }
.rf-faq ul { padding-left: 18px; }
.rf-alert { margin: 14px 0 18px; padding: 12px 14px; border-radius: 10px; border: 1px solid transparent; }
.rf-alert.success { background: #f1fff4; border-color: #bfe4c5; color: #0d6a2a; }
.rf-alert.error { background: #fff4f4; border-color: #f0c1c1; color: #912828; }
/* HERO */
.rf-hero{position:relative; min-height:68vh; display:grid; place-items:center; text-align:center; background:radial-gradient(80% 60% at 50% 30%, #272727 0, #111 70%)}
.rf-hero__overlay{position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.7));}
.rf-hero__inner{position:relative; z-index:1}
.rf-hero__mark{width:min(420px, 78vw); margin:0 auto 10px; filter:drop-shadow(0 2px 0 rgba(0,0,0,.35))}
.rf-hero__title{font:700 56px/1.05 "CormorantGaramond", Georgia, serif; color:#b4934c; margin:.2rem 0}
.rf-hero__tag{color:var(--rf-paper); opacity:.9; font-size:20px; margin:8px 0 22px}
.rf-hero__cta{display:flex; justify-content:center; gap:14px}
/* Compact hero on Orders Board + Order Form */
.rf-order-wrap > .rf-hero,
.rf-order-wrap .rf-hero--compact {
min-height: auto !important;
padding: 16px 0 !important;
background: none !important;
}
/* Hide hero-only bits on these pages */
.rf-order-wrap .rf-hero__overlay,
.rf-order-wrap .rf-hero__mark,
.rf-order-wrap .rf-hero__tag {
display: none !important;
}
/* Tighter heading/subtitle on these pages */
.rf-order-wrap .rf-title { font-size: 32px !important; color:#b4934c; line-height: 1.2 !important; }
.rf-order-wrap .rf-subtitle { margin-top: 6px !important; opacity: .9; }
/* Buttons */
.rf-btn{display:inline-block; text-decoration:none; border:1.5px solid var(--rf-gold); color:var(--rf-ink); background:var(--rf-gold);
padding:12px 22px; border-radius:999px; letter-spacing:.08em; text-transform:uppercase; font-weight:700; transition:transform .16s ease, box-shadow .16s ease, background .2s ease}
.rf-btn:hover{transform:translateY(-1px); box-shadow:var(--rf-shadow)}
.rf-btn:active{transform:translateY(0)}
.rf-btn--lg{font-size:18px; padding:14px 26px}
.rf-btn--outline{color:var(--rf-gold)}
.rf-btn--outline:hover{background:rgba(201,162,65,.12)}
.rf-btn--primary{background:#545454; color:#b4934c}
/* 1) Clear, classy focus rings (keyboard users) */
:focus-visible {
outline: 3px solid var(--rf-gold);
outline-offset: 2px;
}
/* 2) Button states that feel “pressed” */
.rf-btn,
.button,
.wp-element-button,
.wp-block-button__link,
button,
input[type=submit] {
transition: transform .12s ease, box-shadow .12s ease, background .2s ease;
}
:is(.rf-btn,.button,.wp-element-button,.wp-block-button__link,button,input[type=submit]):hover {
transform: translateY(-1px);
box-shadow: var(--rf-shadow);
}
:is(.rf-btn,.button,.wp-element-button,.wp-block-button__link,button,input[type=submit]):active {
transform: translateY(0);
}
/* 3) Optional secondary button (tan-on-ink) */
.rf-btn--secondary {
background: var(--rf-ink-2);
color: var(--rf-paper);
border: 2px solid var(--rf-gold);
}
.rf-btn--secondary:hover { background: #222; }
/* 4) Gallery image safety */
.rf-gallery__item img { width: 100%; height: 260px; object-fit: cover; }
/* 5) Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
* { animation: none !important; transition: none !important; }
}
/* Cards & grid */
.rf-grid{display:grid; gap:22px}
.rf-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.rf-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:920px){.rf-grid--3{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.rf-grid--2,.rf-grid--3{grid-template-columns:1fr}}
.rf-card{background:linear-gradient(180deg, #1f1b15, #171410); border:1px solid rgba(201,162,65,.5); border-radius:var(--rf-radius); padding:24px; box-shadow:0 8px 18px rgba(0,0,0,.25)}
.rf-card__title{margin:0 0 8px; color:var(--rf-gold); font:700 26px/1.2 "CormorantGaramond", Georgia, serif}
.rf-card__text{margin:0; opacity:.92}
/* Gallery */
.rf-gallery{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px}
.rf-gallery__item{border:1px solid rgba(201,162,65,.45); border-radius:14px; overflow:hidden; background:#111}
@media (max-width:820px){.rf-gallery{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.rf-gallery{grid-template-columns:1fr}}
/* Menu poster with subtle frame */
.rf-menu-poster{position:relative; display:grid; place-items:center}
.rf-menu-poster img{border:1.8px solid rgba(201,162,65,.55); border-radius:18px; box-shadow:var(--rf-shadow)}
.rf-menu-poster__cta{margin-top:16px; text-align:center}
/* Notes / asides */
.rf-note{border-left:3px solid var(--rf-gold); padding-left:18px}
/* Ordered steps */
.rf-list--steps{counter-reset:s; list-style:none; padding:0; margin:0 0 20px}
.rf-list--steps li{counter-increment:s; margin:10px 0; padding:8px 0 8px 36px; position:relative}
.rf-list--steps li::before{content:counter(s)"."; position:absolute; left:0; top:0; color:var(--rf-gold); font-weight:700}
/* =====================================
Order Form Styling (shared)
Apply to the /order page by wrapping form in .rf-form or using .rf-order-wrap
===================================== */
.rf-order-wrap, .rf-form{--field-bg:#121212; --field-bd:rgba(201,162,65,.6); --field-bd-focus:var(--rf-gold); --field-text:#f3eee6}
.rf-order-wrap .rf-title{font:700 34px/1.2 "CormorantGaramond", Georgia, serif; color:#b4934c}
.rf-form form, .rf-order-wrap form{max-width:860px; margin:0 auto; background:linear-gradient(180deg,#1c1914,#13110e); border:1px solid rgba(201,162,65,.45); border-radius:18px; padding:24px; box-shadow:var(--rf-shadow)}
.rf-form label, .rf-order-wrap label{display:block; margin:12px 0 6px; color:#b4934c}
.rf-form input[type="text"],
.rf-form input[type="email"],
.rf-form input[type="tel"],
.rf-form input[type="number"],
.rf-form input[type="date"],
.rf-form input[type="time"],
.rf-form select,
.rf-form textarea,
.rf-order-wrap input[type="text"],
.rf-order-wrap input[type="email"],
.rf-order-wrap input[type="tel"],
.rf-order-wrap input[type="number"],
.rf-order-wrap input[type="date"],
.rf-order-wrap input[type="time"],
.rf-order-wrap select,
.rf-order-wrap textarea{
width:100%; background:var(--field-bg); color:var(--field-text);
border:1.5px solid var(--field-bd); border-radius:12px; padding:12px 14px; outline:none;
transition:border-color .2s ease, box-shadow .2s ease
}
.rf-form input:focus, .rf-form select:focus, .rf-form textarea:focus,
.rf-order-wrap input:focus, .rf-order-wrap select:focus, .rf-order-wrap textarea:focus{
border-color:var(--field-bd-focus); box-shadow:0 0 0 3px rgba(201,162,65,.15)
}
.rf-form .actions .button,
.rf-order-wrap .actions .button,
.rf-form button[type="submit"],
.rf-order-wrap button[type="submit"],
.rf-form input[type="submit"],
.rf-order-wrap input[type="submit"]{
composes: rf-btn rf-btn--primary; /* (if PostCSS not available, rules below duplicate) */
display:inline-block; cursor:pointer; border:1.5px solid var(--rf-gold); color:#1a1408; background:var(--rf-gold);
padding:12px 22px; border-radius:999px; letter-spacing:.08em; text-transform:uppercase; font-weight:700;
}
.rf-form .actions .button:hover,
.rf-order-wrap .actions .button:hover,
.rf-form button[type="submit"]:hover,
.rf-order-wrap button[type="submit"]:hover,
.rf-form input[type="submit"]:hover,
.rf-order-wrap input[type="submit"]:hover{box-shadow:var(--rf-shadow)}
/* Form Grouping */
.rf-form .field-group{display:grid; gap:14px; grid-template-columns:1fr 1fr}
@media (max-width:720px){.rf-form .field-group{grid-template-columns:1fr}}
/* Tables / summaries (if your form renders a cart) */
.rf-order-wrap table{width:100%; border-collapse:collapse; margin:16px 0; background:#0f0f0f}
.rf-order-wrap th, .rf-order-wrap td{padding:10px 12px; border-bottom:1px solid rgba(201,162,65,.25)}
.rf-order-wrap th{color:var(--rf-gold); font-family:"CormorantGaramond", Georgia, serif; font-weight:700}
.rf-order-wrap tfoot td{font-weight:700}
/* Subtle decorative rule */
.hr-gold{height:1px; border:0; background:linear-gradient(90deg, transparent, rgba(201,162,65,.8), transparent); margin:24px 0}
/* =====================================
Orders Board: colors for columns, cards, and expanded modal
===================================== */
/* Columns + counters */
.rf-board-wrap .rf-col {
background: linear-gradient(180deg,#1c1914,#13110e);
border-color: rgba(201,162,65,.35);
}
.rf-board-wrap .rf-col-head { border-bottom-color: rgba(201,162,65,.25); }
.rf-board-wrap .rf-count {
background: var(--rf-gold);
color: #1a1408;
}
/* Cards (list view) */
.rf-board-wrap .rf-card {
background: #181411; /* card background */
border-color: rgba(201,162,65,.45); /* gold-ish border */
color: var(--rf-paper); /* body text on card */
}
.rf-board-wrap .rf-card h4 { color: var(--rf-gold); } /* card title */
.rf-board-wrap .rf-card .rf-meta { color: #d8cdb8; } /* small meta text */
/* Drag/hover affordances */
.rf-board-wrap .rf-card:hover { box-shadow: 0 6px 14px rgba(0,0,0,.35); transform: translateY(-1px); }
.rf-board-wrap .rf-drop-hover { outline: 2px dashed var(--rf-gold); }
/* Expanded modal (details) */
.rf-board-wrap .rf-modal-dialog {
background: #121010; /* modal surface */
color: var(--rf-paper); /* default text */
border: 1px solid rgba(201,162,65,.45);
}
.rf-board-wrap .rf-modal h3 { color:#7a581c; }
.rf-board-wrap .rf-modal h4,
.rf-board-wrap .rf-modal .rf-kv dt { color: #b4934c; } /* headings + labels */
.rf-board-wrap .rf-modal .rf-kv dd,
.rf-board-wrap .rf-modal li { color: var(--rf-paper); } /* values + list items */
.rf-board-wrap .rf-modal-close {
background: var(--rf-gold); /* was red; brand it */
color: #1a1408;
}
/* Orders Board modal close button — make it red & visible */
.rf-board-wrap .rf-modal-close {
background: #e74c3c;
color: #fff;
display: flex;
border: 1px solid #ff9a8f;
box-shadow: 0 2px 8px rgba(231,76,60,.35);
text-shadow: 0 1px 0 rgba(0,0,0,.25);
line-height: 1; /* prevent vertical drift */
font-size: 32px; /* make the × bigger */
}
.rf-board-wrap .rf-modal-close:hover { filter: brightness(1.06); }
.rf-board-wrap .rf-modal-close:focus-visible {
outline: 3px solid #ffb3a7;
outline-offset: 2px;
}
/* Optional: different card tints by stage (delete if you want one color) */
.rf-board-wrap .rf-col[data-stage="new"] .rf-card { background:#1a1a1a; }
.rf-board-wrap .rf-col[data-stage="confirmed"] .rf-card { background:#142017; }
.rf-board-wrap .rf-col[data-stage="baking"] .rf-card { background:#201914; }
.rf-board-wrap .rf-col[data-stage="out_for_delivery"] .rf-card { background:#151b20; }
.rf-board-wrap .rf-col[data-stage="delivered"] .rf-card { background:#131a14; }
.rf-board-wrap .rf-col[data-stage="cancelled"] .rf-card { background:#1e1414; opacity:.85; }