﻿/*
 * editor-styles.css
 * Reddipak – Rich Text Editor Styles
 * Add this file to Umbraco's rich text editor stylesheet configuration.
 * Settings > Rich Text Editor > Stylesheets
 */

/* ============================================================
   FONT SIZES
   ============================================================ */

/* Extra small */
.text-xs { font-size: 0.625rem !important; }   /* 10px */
.text-sm { font-size: 0.75rem !important; }    /* 12px */

/* Small */
.text-size-12 { font-size: 0.75rem !important; }
.text-size-13 { font-size: 0.8125rem !important; }
.text-size-14 { font-size: 0.875rem !important; }

/* Base / Body */
.text-size-15 { font-size: 0.9375rem !important; }
.text-size-16 { font-size: 1rem !important; }
.text-size-17 { font-size: 1.0625rem !important; }
.text-size-18 { font-size: 1.125rem !important; }

/* Medium */
.text-size-20 { font-size: 1.25rem !important; }
.text-size-22 { font-size: 1.375rem !important; }
.text-size-24 { font-size: 1.5rem !important; }
.text-size-26 { font-size: 1.625rem !important; }
.text-size-28 { font-size: 1.75rem !important; }
.text-size-30 { font-size: 1.875rem !important; }

/* Large */
.text-size-32 { font-size: 2rem !important; }
.text-size-36 { font-size: 2.25rem !important; }
.text-size-40 { font-size: 2.5rem !important; }
.text-size-42 { font-size: 2.625rem !important; }
.text-size-48 { font-size: 3rem !important; }

/* Extra large */
.text-size-56 { font-size: 3.5rem !important; }
.text-size-64 { font-size: 4rem !important; }
.text-size-72 { font-size: 4.5rem !important; }
.text-size-80 { font-size: 5rem !important; }
.text-size-96 { font-size: 6rem !important; }

/* ============================================================
   FONT WEIGHT
   ============================================================ */
.text-light-weight   { font-weight: 300 !important; }
.text-normal-weight  { font-weight: 400 !important; }
.text-medium-weight  { font-weight: 500 !important; }
.text-semi-bold      { font-weight: 600 !important; }
.text-bold           { font-weight: 700 !important; }
.text-extra-bold     { font-weight: 800 !important; }

/* ============================================================
   FONT FAMILY
   ============================================================ */
.font-body    { font-family: 'Montserrat', sans-serif !important; }
.font-heading { font-family: 'Cormorant Garamond', serif !important; }

/* ============================================================
   TEXT COLOUR
   ============================================================ */
.text-brand-green  { color: #8aa66c !important; }
.text-brand-dark   { color: #002c3e !important; }
.text-brand-black  { color: #0c0c0c !important; }
.text-brand-muted  { color: #999998 !important; }
.text-brand-white  { color: #ffffff !important; }

/* ============================================================
   TEXT ALIGNMENT
   ============================================================ */
.text-align-left   { text-align: left !important; }
.text-align-center { text-align: center !important; }
.text-align-right  { text-align: right !important; }

/* ============================================================
   TEXT DECORATION & STYLE
   ============================================================ */
.text-underline     { text-decoration: underline !important; }
.text-no-underline  { text-decoration: none !important; }
.text-italic        { font-style: italic !important; }
.text-uppercase     { text-transform: uppercase !important; }
.text-lowercase     { text-transform: lowercase !important; }
.text-capitalize    { text-transform: capitalize !important; }

/* ============================================================
   LINE HEIGHT
   ============================================================ */
.line-height-tight   { line-height: 1.2 !important; }
.line-height-normal  { line-height: 1.5 !important; }
.line-height-relaxed { line-height: 1.8 !important; }
.line-height-loose   { line-height: 2 !important; }

/* ============================================================
   LETTER SPACING
   ============================================================ */
.letter-spacing-tight  { letter-spacing: -0.05em !important; }
.letter-spacing-normal { letter-spacing: 0 !important; }
.letter-spacing-wide   { letter-spacing: 0.1em !important; }
.letter-spacing-wider  { letter-spacing: 0.2em !important; }

/* ============================================================
   HIGHLIGHTS / CALL-OUTS
   ============================================================ */
.highlight-green {
    background-color: #8aa66c;
    color: #ffffff;
    padding: 0.1em 0.4em;
    border-radius: 3px;
}
.highlight-dark {
    background-color: #002c3e;
    color: #ffffff;
    padding: 0.1em 0.4em;
    border-radius: 3px;
}
.highlight-light {
    background-color: #f7f8f9;
    color: #0c0c0c;
    padding: 0.1em 0.4em;
    border-radius: 3px;
}

/* ============================================================
   INTRO / LEAD PARAGRAPH
   ============================================================ */
.text-intro {
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.7;
    color: #555;
}
.text-lead {
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1.6;
}

/* ============================================================
   PULL QUOTE / BLOCKQUOTE STYLES
   ============================================================ */
.pull-quote {
    border-left: 5px solid #8aa66c;
    padding: 0.75rem 1.25rem;
    font-size: 1.25rem;
    font-style: italic;
    color: #002c3e;
    margin: 1.5rem 0;
}

/* ============================================================
   NOTICE / INFO BOX
   ============================================================ */
.notice-box {
    background-color: #f0f5eb;
    border: 1px solid #8aa66c;
    border-radius: 6px;
    padding: 1rem 1.25rem;
    font-size: 0.9375rem;
    color: #0c0c0c;
}
.notice-box-dark {
    background-color: #002c3e;
    border-radius: 6px;
    padding: 1rem 1.25rem;
    font-size: 0.9375rem;
    color: #ffffff;
}

