/*
Theme Name: Urban Cusina
Theme URI: https://urbancusina.com
Author: Urban Cusina
Author URI: https://urbancusina.com
Description: A bold, modern Filipino restaurant WordPress theme with dark urban aesthetics. Features a full-width hero, menu sections, dish detail pages, and an About page — all styled with a kinetic editorial design system.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: restaurant, food, dark, modern, one-column, custom-menu, featured-images, full-width-template, custom-colors
Text Domain: urban-cusina
*/

/* =========================================================
   URBAN CUSINA — Base Styles & CSS Custom Properties
   ========================================================= */

:root {
  --color-primary:              #ff8e82;
  --color-primary-dim:          #e42024;
  --color-primary-container:    #ff766a;
  --color-primary-fixed-dim:    #ff5b50;
  --color-secondary:            #fd7e93;
  --color-secondary-dim:        #f3778b;
  --color-secondary-container:  #842138;
  --color-on-secondary-container: #ffc0c7;
  --color-background:           #0e0e0e;
  --color-surface:              #0e0e0e;
  --color-surface-dim:          #0e0e0e;
  --color-surface-container-lowest: #000000;
  --color-surface-container-low:    #131313;
  --color-surface-container:        #191919;
  --color-surface-container-high:   #1f1f1f;
  --color-surface-container-highest:#262626;
  --color-surface-bright:       #2c2c2c;
  --color-on-surface:           #ffffff;
  --color-on-surface-variant:   #ababab;
  --color-on-background:        #ffffff;
  --color-outline:              #757575;
  --color-outline-variant:      #484848;

  --font-headline: 'Epilogue', sans-serif;
  --font-body:     'Be Vietnam Pro', sans-serif;
  --font-label:    'Plus Jakarta Sans', sans-serif;

  --radius-sm:   0.25rem;
  --radius-md:   0.5rem;
  --radius-lg:   1rem;
  --radius-xl:   1.25rem;
  --radius-full: 9999px;
}

/* Reset & base */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background-color: var(--color-background);
  color: var(--color-on-background);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection {
  background-color: var(--color-primary-dim);
  color: #fff;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }

/* Glass navigation */
.glass-nav {
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* Material Symbols */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
}

/* Editorial text shadow */
.editorial-text-shadow {
  text-shadow: 0 10px 30px rgba(228, 32, 36, 0.3);
}

/* Grayscale hover */
.grayscale-hover {
  filter: grayscale(1) contrast(1.25);
  transition: filter 1s ease;
}
.grayscale-hover:hover {
  filter: grayscale(0) contrast(1);
}

/* Rotate card hover */
.rotate-card {
  transition: transform 0.5s ease;
  transform: rotate(3deg);
}
.rotate-card:hover {
  transform: rotate(0deg);
}

/* Scrollbar styling */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--color-surface-container-low); }
::-webkit-scrollbar-thumb { background: var(--color-primary-dim); border-radius: 3px; }

/* WordPress alignments */
.alignleft  { float: left; margin-right: 1.5rem; }
.alignright { float: right; margin-left: 1.5rem; }
.aligncenter { display: block; margin: 0 auto; }
.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: 0.8rem; color: var(--color-on-surface-variant); margin-top: 0.5rem; }

/* Screen reader text */
.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  position: absolute;
  height: 1px; width: 1px;
  overflow: hidden;
  white-space: nowrap;
}

/* Dish page writeup */
.dish-content h2 {
  margin-top: 20px;
  font-weight: 700;
  color: #ffffff;
}
.dish-content h3 {
  margin-top: 15px;
  font-weight: 600;
  color: #ffffff;
}
.dish-content p {
  padding-top: 15px !important;
}
.dish-content li {
  margin-left: 20px;
  padding-top: 15px !important;
}